Elphel Development Blog

Open Street Maps and Google Maps APIs

   

Both, Google Maps API and Open Layers API, are quite simple, though it can take some time to find a perfect example. The maps are added to the WebGL panorama view test page (read “Experimenting with WebGL panoramas”)

Description

The maps are embedded, so the sources are available.
There is a *.kml file with the points’ records that is read with PHP and the coordinates are passed to javascript. Then the points/markers are placed on maps. Markers’ events are:

• ‘click’ – setting the current position
• ‘mouseover’/’mouseout’ – highlighting

Notes

OpenLayers Library

• Possible to have a Google Maps layer
• Currently Markers Overlays are used (found first) but they are old and there are more advanced and better Vectors Overlays. For more info please visit this page.
• Markers Overlays: didn’t find how to change the icon properties of a created marker except url – to change an icon to a different sized one – the marker is removed and recreated.
• Markers Overlays: markers over Open Street Map being initialized and placed with correctly return wrong coordinates (not used but anyway).
• Vectors Overlays: can’t display vectors over Open Street Map Layer so far.
• Vectors Overlays: haven’t tried events.

Google Maps API

• Need to generate a unique key for each particular website.
• Didn’t find how to change the icon properties of a created marker except url – to change an icon to a different sized one – the marker is removed and recreated.

Some PHP

function parse_kml_file($kmlFile){
  if (!is_file($kmlFile)) return -1;
  $kml_contents = simplexml_load_file($kmlFile);
  //Document, PhotoOverlay, Camera, Icon, href, longitude & latitude are KML tags
  $PhotoOverlay = $kml_contents->Document->PhotoOverlay;
  $marker=array();
  $i=0;
  foreach($PhotoOverlay as $element) {
    $marker[$i]['longitude'] = $element->Camera->longitude;
    $marker[$i]['latitude'] = $element->Camera->latitude;
    $marker[$i]['href'] = $element->Icon->href;
    $i++;
  }
  return $marker;
}