Fix summary tiles, almost feature parity with original pull request. …

…Missing: hide summary tiles / geometry tiles on certain zoom levels.

app.js

@@ -91,6 +91,31 @@ $(function() {
     //     }
     // );
     // map.addLayer(owlTiles);
+    // var summaryIcon = L.divIcon({
+    //     html: '<h3>' + json.num_changesets + '</h3>',
+    //     className: 'summary-tile',
+    //     iconSize: [256, 256]
+    // });
+    // layer._markers.addLayer(L.marker(point, {icon: summaryIcon}));
+    var markersLayer = L.layerGroup();
+    map.addLayer(markersLayer);
+
+    var markers = new L.TileLayer.Marker(
+        'http://localhost:3000/summary/{z}/{x}/{y}'
+    );
+    markers.on('load', function() {
+        markersLayer.clearLayers();
+        _.each(markers._tiles, function(t) {
+            var count = t.data.num_changesets || 0;
+            var icon = L.divIcon({
+                html: '<h3>' + count + '</h3>',
+                className: 'summary-tile',
+                iconSize: [256, 256]
+            });
+            markersLayer.addLayer(L.marker(t.location, {icon: icon}));
+        });
+    });
+    map.addLayer(markers);
 
     // Active state handling.
     $('.nav-container a').click(function() {

geojson-tiles.js

@@ -1,7 +1,6 @@
 // Load tiled GeoJSON and merge into single geojson hash.
 // Requires jQuery for jsonp.
 L.TileLayer.GeoJSON = L.TileLayer.Data.extend({
-    _data: [],
     // Retrieve data.
     data: function() {
         var geojson = {"type":"FeatureCollection","features":[]};

index.html

@@ -14,7 +14,7 @@
     <script src='vendor/underscore-min.js'></script>
     <script src='data-tiles.js'></script>
     <script src='geojson-tiles.js'></script>
-    <script src='summary-tiles.js'></script>
+    <script src='marker-tiles.js'></script>
     <script src='app.js'></script>
   </head>
 

marker-tiles.js

@@ -0,0 +1,12 @@
+// Load data and track location of tiles.
+L.TileLayer.Marker = L.TileLayer.Data.extend({
+    _addTile: function(tilePoint, container) {
+        console.log(tilePoint, this._getTilePos(tilePoint), this._getTilePos(tilePoint).subtract({x: 125, y: 125}));
+        var tile = {
+            data: null,
+            location: this._map.layerPointToLatLng(this._getTilePos(tilePoint).add({x: 125, y: 125}))
+        };
+        this._tiles[tilePoint.x + ':' + tilePoint.y] = tile;
+        this._loadTile(tile, tilePoint);
+    }
+});