Allow up-front geojson with deferred positioning. Fixes #1

cutting-room-floor · Dec 15, 2011 · 8c8bcaa · 8c8bcaa
1 parent 0d60b8f
commit 8c8bcaa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>mmg: simple GeoJSON for Modest Maps</title>
@@ -6,6 +7,7 @@
     <script type='text/javascript' src='lib/modestmaps.js'></script>
     <script type='text/javascript' src='lib/wax.mm.min.js'></script>
     <script type='text/javascript' src='src/mmg.js'></script>
+    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
   </head>
   <body>
     <div class='column'>
@@ -33,32 +35,28 @@ <h2>mmg</h2>
           var m = new MM.Map('map', new wax.mm.connector(tj))
             .setCenterZoom(new MM.Location(0, 0), 2);
 
-          var mg = mmg();
-          m.addLayer(mg);
-          mg.geojson(random_geojson);
+          m.addLayer(mmg().geojson(random_geojson));
 
-          var pt = {
-            "type": "FeatureCollection",
-            "features": [{
-              "type": "Feature",
-              "geometry": {
-                "type": "Point",
-                "coordinates": [-40.0, 30.0]
-              },
-              "properties": {
-                "name": "Tom"
-              }
-            }]
-          };
+          var pt = { 'type': 'FeatureCollection',
+            'features': [{ 'type': 'Feature',
+            'geometry': {
+              'type': 'Point',
+              'coordinates': [-40.0, 30.0]
+            },
+            'properties': { 'name': 'Tom' }
+          }]};
 
-          var mg2 = mmg();
-          m.addLayer(mg2);
-          mg2.factory(function(x) {
+          var tomLayer = mmg().factory(function(x) {
             var d = document.createElement('div');
             d.className = 'my-custom';
             d.innerHTML = x.properties.name;
+            d.onclick = function() {
+              alert('hi, ' + this.innerHTML);
+            };
             return d;
           }).geojson(pt);
+
+          m.addLayer(tomLayer);
         });
     </script>
   </body>

diff --git a/src/mmg.js b/src/mmg.js
@@ -55,18 +55,16 @@ function mmg() {
 
     // reposition a single marker element
     function repositionMarker(marker) {
-        if (marker.coord) {
-            var pos = l.map.coordinatePoint(marker.coord);
-            // offset by the layer parent position if x or y is non-zero
-            if (position.x || position.y) {
-                pos.x -= position.x;
-                pox.y -= position.y;
-            }
-            marker.style.left = ~~(pos.x + 0.5) + "px";
-            marker.style.top = ~~(pos.y + 0.5) + "px";
-        } else {
-            // TODO: throw an error?
+        // remember the tile coordinate so we don't have to reproject every time
+        if (!marker.coord) marker.coord = l.map.locationCoordinate(marker.location);
+        var pos = l.map.coordinatePoint(marker.coord);
+        // offset by the layer parent position if x or y is non-zero
+        if (position.x || position.y) {
+            pos.x -= position.x;
+            pox.y -= position.y;
         }
+        marker.style.left = ~~(pos.x + 0.5) + "px";
+        marker.style.top = ~~(pos.y + 0.5) + "px";
     }
 
     /**
@@ -80,12 +78,10 @@ function mmg() {
         }
         // convert the feature to a Location instance
         marker.location = fLocation(feature);
-        // remember the tile coordinate so we don't have to reproject every time
-        marker.coord = l.map.locationCoordinate(marker.location);
         // position: absolute
         marker.style.position = 'absolute';
         // update the marker's position
-        repositionMarker(marker);
+        if (l.map) repositionMarker(marker);
         // append it to the DOM
         parent.appendChild(marker);
         // add it to the list