Harry Wood
home
>
maps
>
examples
> web-maps-lite >
KML Displayer
KML Displayer
<html> <head> <title>KML Displayer</title> </head> <body> <?php $url = "http://harrywood.co.uk/maps/examples/web-maps-lite/cloudmade-offices.kml"; //Example if (isset( $_GET['url'] )) $url = $_GET['url']; ?> <!-- Form at the top for inputting a URL --> <form action="./kml-displayer.php" method="GET"> <table><tr> <td style="white-space:nowrap;">KML or GeoRSS URL:</td> <td width="100%"><input type="text" name="url" value="<?=$url ?>" style="width:100%;"></td> <td><input type="submit" value="Go!"></td> </tr></table> </form> <!-- Show a CloudMade map with KML/GeoRSS --> <center> <div id="cloudmade-map" style="width: 600px; height: 450px"></div> </center> <script type="text/javascript" src="http://tile.cloudmade.com/wml/0.2/web-maps-lite.js"></script> <script type="text/javascript"> var map = new CM.Map('cloudmade-map', new CM.Tiles.CloudMade.Web({key: 'ed24c9065bb55c1090d3d76e7ab8577e'})); //Initialise with KML/GeoRSS URL var geoxml = new CM.GeoXml('<?=urlencode($url) ?>'); CM.Event.addListener(geoxml, 'load', function() { map.zoomToBounds(geoxml.getDefaultBounds()); map.addOverlay(geoxml); }); </script> <!-- Footer links --> <br><br> <hr> <br> It's easy to display a KML/GeoRSS map on your own website. Do 'view source' on this page to get the map display HTML/javascript. This kml displayer uses CloudMade's web maps API. See also <a href="http://developers.cloudmade.com/projects/web-maps-api/examples/kml-and-geo-rss">'Web Maps API' KML information on the CloudMade site</a>. <br><br> <b>Note on same origin policy:</b> Normally it would be impossible to request KML from a URL which is not at the same domain name as the site displaying it. The CloudMade API works around this in a sneakily hidden manner. The CM.GeoXML constructor actually requests your specified KML URL via a xml2json.php proxy which CloudMade runs. So the javascript is actually fetching JSONP, in this case from the url: <a href="http://tile.cloudmade.com/json/xml2json.php?callback=_getCloudMadeJson&url=<?=urlencode($url) ?>">http://tile.cloudmade.com/json/xml2json.php?callback=_getCloudMadeJson&url=<?=urlencode($url) ?></a> <br><br> Other libraries such as OpenLayers also have KML support (<a href="http://funmap.co.uk/examples/openlayers/kml.html">example</a>) but you'll always need to request KML from the same server. <br><br> There's not much happening in PHP here, but the <a href="./kml-displayer.php.txt">kml-displayer.php source code is here</a> </body>
view directly
Home
Blog
About
Maps
Other
Contact