Merge pull request #10 from oliverroick/leaflet-1.0.0

Leaflet 1.0.0
oliverroick · Oct 3, 2016 · 4165655 · 4165655
2 parents 2cb4a9a + 976208d
commit 4165655
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 42 deletions.
diff --git a/README.rst b/README.rst
@@ -12,6 +12,12 @@ Substitutes polygons and lines with markers when their screen size falls below a
 Usage
 =====
 
+Include `L.Deflate.js` from UNPKG:
+
+.. code-block:: html
+
+    <script src="https://unpkg.com/[email protected]/dist/L.Deflate.js"></script>
+
 Initialize with the `minSize` option and add to map. `minSize` defines the minimum width and height in pixels for a path to be displayed in its actual shape. It defaults to `20`.
 
 .. code-block:: javascript
@@ -55,13 +61,12 @@ Cluster Markers
 
 With a little help from `Leaflet.Markercluster <https://github.com/Leaflet/Leaflet.markercluster>`_ and  `Leaflet.Markercluster.LayerSupport <https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport>`_ you can cluster markers on your map.
 
-**Note:** You first have to check in your FeatureGroup with the MarkerClusterGroup and then add it to the map. 
-
 .. code-block:: javascript
 
     var map = L.map("map");
 
     var featureGroup = L.featureGroup();
+    featureGroup.addTo(map);
     L.Deflate({minSize: 10, featureGroup: featureGroup}).addTo(map);
 
     var polygon = L.polygon([
@@ -77,7 +82,10 @@ With a little help from `Leaflet.Markercluster <https://github.com/Leaflet/Leafl
     var markerGroup = L.markerClusterGroup.layerSupport()
     markerGroup.addTo(map);
     markerGroup.checkIn(featureGroup);
-    featureGroup.addTo(map);
+
+    // Dirty hack; otherwise the cluster won't appear on the map.
+    map.zoomIn(0);
+    map.zoomOut(0);
 
 Developing
 ==========

diff --git a/dist/L.Deflate.js b/dist/L.Deflate.js
diff --git a/example/event.html b/example/event.html
@@ -0,0 +1,42 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+        <script src="../src/L.Deflate.js"></script>
+        <style>
+            #map {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+            }
+        </style>
+    </head>
+
+    <div id="map"></div>
+
+    <script>
+
+    window.onload = function () {
+        var map = L.map("map").setView([51.505, -0.09], 7);
+
+        L.Deflate({minSize: 20}).addTo(map);
+
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        var polygon = L.polygon([
+            [51.509, -0.08],
+            [51.503, -0.06],
+            [51.51, -0.047]
+        ]);
+        polygon.on('click', function() {
+          alert('Yes, you clicked.')
+        });
+        polygon.addTo(map);
+    }
+    </script>
+
+</html>
diff --git a/example/featuregroup.html b/example/featuregroup.html
@@ -1,7 +1,7 @@
 <html>
     <head>
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
-        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
+        <script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
 
         <script src="../src/L.Deflate.js"></script>
         <style>
@@ -42,7 +42,7 @@
             color: 'red',
             fillColor: '#f03',
             fillOpacity: 0.5
-        }).addTo(map);;
+        }).addTo(map);
 
         var polyline = L.polyline([
             [51.52, -0.05],

diff --git a/example/index.html b/example/index.html
@@ -1,7 +1,7 @@
 <html>
     <head>
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
-        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
+        <script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
         <script src="../src/L.Deflate.js"></script>
         <style>
             #map {
@@ -151,7 +151,9 @@
             [51.509, -0.08],
             [51.503, -0.06],
             [51.51, -0.047]
-        ]).addTo(map);
+        ])
+        .bindPopup('A popup')
+        .addTo(map);
 
         var circle = L.circle([51.508, -0.11], 500, {
             color: 'red',

diff --git a/example/markercluster.html b/example/markercluster.html
@@ -1,11 +1,14 @@
 <html>
     <head>
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
-        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.css" />
-        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.Default.css" />
-        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
-        <script src="https://rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/leaflet.markercluster.js"></script>
-        <script src="https://cdn.rawgit.com/ghybs/Leaflet.MarkerCluster.LayerSupport/3d4c4f24a008d6983a8f98b1c823f9a05ad62f80/leaflet.markercluster.layersupport-src.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-rc.1/dist/MarkerCluster.css" />
+        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-rc.1/dist/MarkerCluster.Default.css" />
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+        <script src="https://rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-rc.1/dist/leaflet.markercluster.js"></script>
+        <script src="https://rawgit.com/ghybs/Leaflet.MarkerCluster.LayerSupport/v1.0.1/leaflet.markercluster.layersupport-src.js"></script>
+
+
+
         <script src="../src/L.Deflate.js"></script>
         <style>
             #map {
@@ -23,17 +26,15 @@
     <script>
 
     window.onload = function () {
-            var map = L.map("map").setView([51.505, -0.09], 7);
+        var map = L.map("map").setView([51.505, -0.09], 12);
         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
         var featureGroup = L.featureGroup();
-
+        featureGroup.addTo(map);
         L.Deflate({minSize: 20, featureGroup: featureGroup}).addTo(map);
 
-        // Only this polygon is added the featureGroup, this is the only
-        // feature affected by Leaflet.Deflate
         var polygon = L.polygon([
             [51.509, -0.08],
             [51.503, -0.06],
@@ -60,7 +61,11 @@
         var markerGroup = L.markerClusterGroup.layerSupport()
         markerGroup.addTo(map);
         markerGroup.checkIn(featureGroup);
-        featureGroup.addTo(map);
+
+        // Dirty hack; otherwise the cluster won't appear on the map.
+        // Need to figure out what's going on.
+        map.zoomIn(0);
+        map.zoomOut(0);
     }
     </script>
 </html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -11,5 +11,9 @@ gulp.task('dist', function() {
 gulp.task('test', function () {
     return gulp
     .src('tests/testrunner.html')
-    .pipe(mochaPhantomJS());
+    .pipe(mochaPhantomJS({
+        phantomjs: {
+            'ssl-protocol': 'tlsv1'
+        }
+    }));
 });
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "Leaflet.Deflate",
   "author": "Oliver Roick",
-  "version": "0.2.0",
-  "description": "Extends Leaflet.Map to automatically substitute polygons and lines with markers when their screen size falls below a defined threshold.",
+  "version": "0.3.0",
+  "description": "Deflates lines and polygons to a marker when their screen size becomes too small in lower zoom levels.",
   "license": "Apache 2.0",
   "repository": "git://github.com/oliverroick/Leaflet.Deflate",
   "main": "src/Leaflet.Deflate.js",
@@ -11,15 +11,16 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "gulp": "^3.8.11",
-    "gulp-mocha-phantomjs": "0.8.1",
-    "mocha-phantomjs": "^3.6.0",
-    "phantomjs": "1.9.7-15",
-    "gulp-uglify": "^1.2.0",
-    "mocha": "^2.2.4",
-    "should": "^6.0.0"
+    "gulp": "3.9.1",
+    "gulp-mocha-phantomjs": "0.12.0",
+    "mocha-phantomjs": "4.1.0",
+    "phantomjs": "2.1.7",
+    "gulp-uglify": "2.0.0",
+    "mocha": "3.1.0",
+    "should": "11.1.0"
   },
   "scripts": {
     "test": "gulp test"
-  }
+  },
+  "main": "dist/L.Deflate.js"
 }
diff --git a/src/L.Deflate.js b/src/L.Deflate.js
@@ -45,14 +45,12 @@ L.Deflate = function(options) {
                 marker.bindPopup(feature._popup._content)
             }
 
-            var events = feature._leaflet_events;
+            var events = feature._events;
             for (var event in events) {
                 if (events.hasOwnProperty(event)) {
-                    if (event.indexOf('idx') === -1) {
-                        var listeners = events[event];
-                        for (var i = 0, len = listeners.length; i < len; i++) {
-                            marker.on(event, listeners[i].action) 
-                        }
+                    var listeners = events[event];
+                    for (var i = 0, len = listeners.length; i < len; i++) {
+                        marker.on(event, listeners[i].fn) 
                     }
                 }
             }

diff --git a/tests/test.js b/tests/test.js
@@ -263,8 +263,8 @@ describe('Leaflet.Deflate', function() {
             polygon.on('click', callback);
             polygon.addTo(map);
 
-            polygon.marker._leaflet_events.should.have.property('click');
-            polygon.marker._leaflet_events['click'][0].action.should.equal(callback);
+            polygon.marker._events.should.have.property('click');
+            polygon.marker._events['click'][0].fn.should.equal(callback);
         });
     });
 });
diff --git a/tests/testrunner.html b/tests/testrunner.html
@@ -5,8 +5,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
 
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
-        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+        <link rel="stylesheet" href="http://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
+        <script src="http://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
         <script src="../src/L.Deflate.js"></script>
     </head>
     <body>