Web Maps Lite API Examples

KML and GeoRSS

Power up your page with geo formats

Javascript Level: Beginner

There's a lot of fascinating map data available in KML and GeoRSS formats. In this example we see how to show places of latest earthquakes from U.S. Geological Survey (a GeoRSS feed) on your map:

Here's the JavaScript for the example:

var map = new CM.Map('cm-example', 
	new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'}));
		
var geoxml = new CM.GeoXml('http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M2.5.xml');

CM.Event.addListener(geoxml, 'load', function() {
	map.zoomToBounds(geoxml.getDefaultBounds());
	map.addOverlay(geoxml);
});

Lets see what's going on here:

1. We create a new CloudMade map as usual:

var map = new CM.Map('cm-example', 
	new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'}));

2. Next we create a GeoXML object with the url of the data we want to display, in this case - GeoRSS feed of the earthquake data from the U.S. Geological Survey.

var geoxml = new CM.GeoXml('http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M2.5.xml');

3. Then we add a listener to GeoXml load event - it will execute when the data is ready to be displayed on the map:

CM.Event.addListener(geoxml, 'load', function() {
	... //executes when the data is ready to be displayed
});

4. In the listener, first we zoom to the bounding box that contains our data:

map.zoomToBounds(geoxml.getDefaultBounds());

5. Finally we add our GeoXml overlay to the map:

map.addOverlay(geoxml);

Here we go, the latest world earthquakes on our map! You can find out more about GeoXml by checking out the CM.GeoXml section of our documentation.

Now lets check one more example - Tile overlay.

JS-docs | View example