Adding updated cloudmade example index.

stamen · Jan 19, 2012 · 8c81f18 · 8c81f18
1 parent 03a4425
commit 8c81f18
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/examples/cloudmade/index.html b/examples/cloudmade/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Modest Maps JS</title>
+<script type="text/javascript" src="../../modestmaps.js"></script>
+<script type="text/javascript" src="cloudmade.js"></script>
+<script type="text/javascript">
+    var map; // declared here so it can be accessed by javascript: links
+    function initMap() {
+        var src = document.getElementById('src');
+        eval(src.textContent || src.innerText);
+    }
+</script>
+</head>
+<body onload="initMap()">
+<h1>Modest Maps JS</h1>
+<p><a href="javascript:map.zoomIn()">zoom in</a> | <a href="javascript:map.zoomOut()">zoom out</a>
+<br><a href="javascript:map.panLeft()">pan left</a> | <a href="javascript:map.panRight()">pan right</a> | <a href="javascript:map.panDown()">pan down</a> | <a href="javascript:map.panUp()">pan up</a></p>
+<div id="map" style="background:#eee">
+</div>
+<p>The above div is a map initialized like so:</p>
+<pre id="src">
+// please use your own API key, see http://developers.cloudmade.com/ for more details
+
+var provider = new MM.CloudMadeProvider('1a914755a77758e49e19a26e799268b7','998');
+
+map = new MM.Map('map', provider, new MM.Point(640,480))
+
+map.setCenterZoom(new MM.Location(37.804656, -122.263606), 14);
+</pre>
+<p>Hands up who wants overlays?</p>
+<div id="log"></div>
+</body>
+</html>