Tools KML Previewer

From ActiveIDsWiki

Aim & workflow

The KML Previewer allows you to preview and embed KML files with content (elements) that are denied / not shown on maps.google.com like ImageOverlays. To use this tool you need to store the KML at a place accessible online, like eSnips. You load your KML in the previewer by providing its web location in the URL of the previewer. You can use the map with your KML loaded in it you website or blog (see embed map in a blog).

KML Previewer

Overlays are loaded into the KML Previewer by setting the URL of the KML (or KMZ) file and the latitude, longitude and zoom level of the desired view point in the URL of the KML Previewer.

Get latitude, longitude and zoom level

An easy way to get the latitude, longitude and zoom level is by using the Get Lat Lon tool of Simon Willison below. In the KML Previewer URL you will set the latitude and longitude in the 'll' parameter and the zoom level in the 'z' parameter.

Source: getlatlon.com

For instance for the 'Barcelona bicycle stations' example created in the ImageOverlay tutorial you would enter Barcelona in the 'Place name' of the Get Lat Lon tool and pan and zoom to the desired view. The output will for instance be latitude, longitude(41.38556712651267, 2.1704864501953125) and zoom level 12. In the KML Previewer URL that you will define later the value would be as follows 'll=41.38556712651267, 2.1704864501953125' and 'z=12'.

KML File URL

To use this tool you need to store the KML at a place accessible online, like eSnips. You will load your KML in the previewer by providing its web location in the URL of the previewer. This URL should not contain any symbols (eg. &, >, =). If there are any symbols in your URL make sure you replace them with their html codes. In the KML Previewer URL you will set the URL of the KML in the 'kml' parameter. For instance for the 'Barcelona bicycle stations' example created in the ImageOverlay tutorial is stored at http://wiki.activeids.nl/uploads/gps/barcelona_bicycle_stations.kml so you would define the value 'kml=http://wiki.activeids.nl/uploads/gps/barcelona_bicycle_stations.kml'.

Create Previewer URL

To finally preview your KML you can now put all the parameters together and put them in the KML Previewer URL. The URL should be formulated as "http://activeids.nl/apps/kmlpreviewer/index_v1.php?kml=YourKmlUrl&ll=YourLat,YourLong&z=YourZoomLevel". In which you should replace 'YourKmlUrl' with the URL of your KML file, 'YourLat,YourLong' by the values of your latitude and longitude and 'YourZoomLevel' by your zoom level.

KML Previewer URL format:
"http://activeids.nl/apps/kmlpreviewer/index_v1.php?kml=YourKmlUrl&ll=YourLat,YourLong&z=YourZoomLevel"

Example

For the 'Barcelona bicycle stations' example created in the ImageOverlay tutorial the KML Previewer URL would be: http://activeids.nl/apps/kmlpreviewer/index_v1.php?kml=http://wiki.activeids.nl/uploads/gps/barcelona_bicycle_stations.kml&ll=41.38556712651267,2.1704864501953125&z=12 .

The result of the 'Barcelona bicycle stations' KML loaded in the KML Previewer:

You can now embed the KML Previewer in your website or blog.

Source code

index.php:

<!-- GET VAR FROM URL -->
<?php			
            // get parameters (kml, ll, z) from url:
			$sKML = "";
            if (isset($_GET['kml'])) {
                $sKML = $_GET['kml'];
            }
			$sLatLong = "";
            if (isset($_GET['ll'])) {
                $sLatLong = $_GET['ll'];
            }
			$sZoom = "";
            if (isset($_GET['z'])) {
                $sZoom = $_GET['z'];
            }
 
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
    <title>Active IDs - KML Previewer</title>
 
    <!-- PARSE PHP VAR TO JS: -->
    <script src="http://maps.google.com/maps?file=api&v=2&key=enteryourapikey" type="text/javascript"></script> 	
    <script type="text/javascript">
        var urlKML 	= '<?php echo $sKML; ?>';
        var urlLatLong 	= new GLatLng(<?php echo $sLatLong; ?>);
	var urlZoom 	= Number(<?php echo $sZoom; ?>);
    </script>
    <script src="js/gmaps_v1.js" type="text/javascript"></script>
 
</head>  
 
<body>		
    <div id="gMap" style="width:680px; height:480px;"></div> 
</body>
 
</html>

gmaps.js:

var map;
var markers = [];
 
$(document).ready(function() {
 
	/* ------------------- */
	/* ----- LOAD MAP ---- */
	/* ------------------- */
 
	if (GBrowserIsCompatible()) {
		// Initialize the map.
		map = new GMap2(document.getElementById("gMap"));
		map.addControl(new GLargeMapControl());
		map.setCenter(urlLatLong, urlZoom);			
  		map.setMapType(G_SATELLITE_MAP);
	}else{
		$("#gMap").append("<p>Map could not be loaded</p>");	
	};
 
 
	/* ------------------- */
	/* ----- LOAD KML ---- */
	/* ------------------- */
 
	// KML from url:
	var urlKMLoverlay = new GGeoXml(urlKML);
	map.addOverlay(urlKMLoverlay);
 
});
 
 
// Google recommends unloading the map:
$(document.body).unload(function() {
	if (GBrowserIsCompatible()) {
		GUnload();
	}
});

What's next?

With your map you can now do the following:

Personal tools

Views