<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<!--*************************************************************-->
<!--* Michael Markieta **************************************-->
<!--* www.spatialanalysis.ca **********************************-->
<!--*************************************************************-->
<head>
<title>CloudMade Earthquakes</title>
</head>
<body>
<div style="text-align: center; margin-top: 30px;">Earthquakes Around the World
</div>
<div id="map_canvas" style=
"position: absolute;
top: 50%;
margin-top: -300px;
left: 50%;
margin-left: -500px;
width: 1000px;
height: 600px;
border-style: solid;
border-width: 1px;
border-color: darkgray;">
</div>
<script type="text/javascript
"src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
<script type="text/javascript
"src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
<!--*************************************************************-->
<!--* Add the base CloudMade tiles object *******************-->
<!--* Remember your unique API key and **********************-->
<!--* choose your favourite map style ***********************-->
<!--* (http://maps.cloudmade.com/editor#) *******************-->
<!--*************************************************************-->
var cloudmade = new CM.Tiles.CloudMade.Web(
{key: '88f67b5b6f474c76b450eae619305a7a', styleId: 998});
<!--*************************************************************-->
<!--* Although we have added the base CloudMade tiles object *-->
<!--* we havent actually told our webpage to load it ********-->
<!--* Let's do that now! Remember that we need to reference *-->
<!--* our div id (map_canvas) in the options, so that this **-->
<!--* is placed in the box we have created for it (look above *-->
<!--* in the div section). Also remember to set the maps ****-->
<!--* center coordinates and zoom level *********************-->
<!--*************************************************************-->
var map = new CM.Map('map_canvas', cloudmade);
map.setCenter(new CM.LatLng(55, -95), 2);
<!--*************************************************************-->
<!--* Here we are adding the KML data layer to our map. *****-->
<!--* First we identify where it is by supplying a url. *****-->
<!--* We also add an Event Listener, which will grab our ****-->
<!--* kml/xml/georss file from the url, load it and overlay *-->
<!--* it for us *********************************************-->
<!--*************************************************************-->
var geoxml = new CM.GeoXml(
'http://earthquake.usgs.gov/earthquakes/catalogs/eqs1day-M0.xml'
);
CM.Event.addListener(geoxml, 'load', function() {
map.addOverlay(geoxml);
});
<!--*************************************************************-->
<!--* We need to specify which map controls we want *********-->
<!--* displayed. By default, no map controls are added ******-->
<!--* to our map ********************************************-->
<!--*************************************************************-->
map.addControl(new CM.LargeMapControl());
<!--*************************************************************-->
<!--* I don't like the standard position of the *************-->
<!--* OverviewMapControl (it sits flush with the left *******-->
<!--* border, but hovers x pixels over the bottom border. ***-->
<!--* We will create a new variable with which we can *******-->
<!--* reference and align our OverviewMapControl to the *****-->
<!--* bottom left corner ************************************-->
<!--*************************************************************-->
var bottomleft = new CM.ControlPosition(CM.BOTTOM_RIGHT, new CM.Size(870, 5));
map.addControl(new CM.OverviewMapControl(), bottomleft);
</script>
</body>
</html>
