Fixed whitespace, added descriptions

stamen · Jan 5, 2012 · 21d1741 · 21d1741
1 parent cb1a32d
commit 21d1741
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 34 deletions.
diff --git a/examples/spotlight/index.html b/examples/spotlight/index.html
@@ -1,41 +1,44 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>ModestMaps: Spotlight Effect with HTML Canvas</title>
-    <script type="text/javascript" src="../../modestmaps.js"></script>
-    <script type="text/javascript" src="spotlight.js"></script>
-    <script type="text/javascript">
-        var map, layer;
-        function initMap() {
-            var tiles = new MM.TemplatedMapProvider("http://spaceclaw.stamen.com/toner/{Z}/{X}/{Y}.png");
-            map = new MM.Map("map", tiles);
+    <head>
+        <title>ModestMaps: Spotlight Effect with HTML Canvas</title>
+        <script type="text/javascript" src="../../modestmaps.js"></script>
+        <script type="text/javascript" src="spotlight.js"></script>
+        <script type="text/javascript">
+            var map, layer;
+            function initMap() {
+                var tiles = new MM.TemplatedMapProvider("http://spaceclaw.stamen.com/toner/{Z}/{X}/{Y}.png");
+                map = new MM.Map("map", tiles);
 
-            layer = new SpotlightLayer();
-            layer.spotlight.radius = 40;
-            map.addLayer(layer);
+                layer = new SpotlightLayer();
+                layer.spotlight.radius = 40;
+                map.addLayer(layer);
 
-            map.setCenterZoom(new MM.Location(37.7819, -122.3365), 12);
+                map.setCenterZoom(new MM.Location(37.7819, -122.3365), 12);
 
-            var locations = [
-                new MM.Location(37.804, -122.252),
-                new MM.Location(37.764, -122.419)
-            ];
-            locations.forEach(function(loc) {
-                layer.addLocation(loc);
-            });
-        }
-    </script>
-    <style type="text/css">
-        #map {
-            width: auto;
-            height: 600px;
-        }
-    </style>
-  </head>
-  <body onload="initMap()">
-    <h1>Spotlight effect</h1>
+                var locations = [
+                    new MM.Location(37.804, -122.252),
+                    new MM.Location(37.764, -122.419)
+                ];
+                locations.forEach(function(loc) {
+                    layer.addLocation(loc);
+                });
+            }
+        </script>
+        <style type="text/css">
+            #map {
+                width: auto;
+                height: 600px;
+            }
+        </style>
+    </head>
+    <body onload="initMap()">
+        <h1>Spotlight effect</h1>
 
-    <div id="map">
-    </div>
-  </body>
+        <p>The spotlights on this map are pinned to two geographic locations. Check
+        out the <a href="markers.html">Crimespotting-inspired example</a>.</p>
+
+        <div id="map">
+        </div>
+    </body>
 </html>
diff --git a/examples/spotlight/markers.html b/examples/spotlight/markers.html
@@ -182,6 +182,15 @@
     </head>
     <body onload="initMap()">
         <h1>ModestMaps JS: GeoJSON Markers + Spotlight Effect</h1>
+
+        <p>This example mimics the behavior of <a href="http://sanfrancisco.crimespotting.org">Crimespotting</a>
+        (inspired by <a href="http://arstechnica.com/apple/reviews/2005/04/macosx-10-4.ars/20#system-preferences">the Mac OS X feature</a>),
+        highlighting reports of the same type whenever you mouse over one.</p>
+
+        <p><strong>This example requires a web browser with
+        <a href="http://en.wikipedia.org/wiki/Canvas_element">HTML canvas</a>
+        support.</strong></p>
+
         <div id="map">
         </div>
     </body>