Merge pull request #158 from jgravois/fix-cluster

readd support for Cluster.FeatureLayer and fix the plugin
Esri · Jun 23, 2020 · c3ade3c · c3ade3c
2 parents 339da25 + a70ad35
commit c3ade3c
Show file tree

Hide file tree

Showing 18 changed files with 159 additions and 118 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,7 +31,16 @@ site/build
 
 # Debugging Files
 debug/*
+!debug/cluster-sample.html
+!debug/comparisons.css
+!debug/comparisons.html
+!debug/custom-pane.html
+!debug/dojo-amd-loader.html
+!debug/ignore-flag.html
+!debug/requirejs-amd-loader.html
+!debug/reset-style.html
 !debug/sample.html
+!debug/script-tag.html
 
 # Built Files
 dist/**/*.js

diff --git a/debug/cluster-sample.html b/debug/cluster-sample.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>Simple FeatureLayer</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+    <!-- Load Leaflet from CDN-->
+    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+    <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
+
+    <!-- Load Esri Leaflet -->
+    <script src="../node_modules/esri-leaflet/dist/esri-leaflet-debug.js"></script>
+
+    <link rel="stylesheet" type="text/css"
+    href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
+    integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
+    crossorigin="">
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
+      integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
+      crossorigin="">
+    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
+      integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
+      crossorigin=""></script>
+    <script src="https://unpkg.com/esri-leaflet-cluster@2.1.0/dist/esri-leaflet-cluster.js"
+      integrity="6kP8f+Bh/wHsZ4mxFtTp7ePZRV90MlvKZQ+g6IJL6F31o6ntkU/P4UiIG01hHtSB"
+      crossorigin=""></script>
+
+    <!-- Load compiled Esri Leaflet Renderers -->
+    <script src="../dist/esri-leaflet-renderers-debug.js"></script>
+
+    <style>
+      body {margin:0;padding:0;}
+      #map {position: absolute;top:0;bottom:0;right:0;left:0;}
+    </style>
+  </head>
+  <body>
+
+    <div id="map"></div>
+
+    <script>
+      /*
+      make a copy of this file in the same folder if you'd like git to ignore your local changes
+      */
+      var map = L.map('map').setView([37.837, -122.479], 5);
+      L.esri.basemapLayer('Streets').addTo(map);
+
+      // draw the predefined Portland Heritage Tree symbols
+      L.esri.Cluster.featureLayer({
+        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
+      }).addTo(map);
+    </script>
+
+  </body>
+</html>
diff --git a/spec/comparisons.css → debug/comparisons.css b/spec/comparisons.css → debug/comparisons.css
diff --git a/spec/comparisons.html → debug/comparisons.html b/spec/comparisons.html → debug/comparisons.html
diff --git a/spec/custom-pane.html → debug/custom-pane.html b/spec/custom-pane.html → debug/custom-pane.html
diff --git a/spec/dojo-amd-loader.html → debug/dojo-amd-loader.html b/spec/dojo-amd-loader.html → debug/dojo-amd-loader.html
@@ -11,20 +11,21 @@
 
     <!-- Note that this will not work when running off the filesystem as dojo's AMD implementation does not support the filesystem you will need to run http-server in root to test-->
     <script>
-      
+
       dojoConfig = {
             baseUrl: '../',
             paths: {
                 'leaflet': 'node_modules/leaflet/dist/leaflet',
                 'esri-leaflet': 'node_modules/esri-leaflet/dist/esri-leaflet',
+                'esri-leaflet-cluster': 'node_modules/esri-leaflet-cluster/dist/esri-leaflet-cluster',
                 'esri-leaflet-renderers' : 'dist/esri-leaflet-renderers'
             }
       };
     </script>
     <!-- Load Dojo from CDN  -->
-   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script> 
+   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
     <script>
-              
+
       require.config({
             baseUrl: '../',
             paths: {

diff --git a/debug/ignore-flag.html b/debug/ignore-flag.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>Ignore Renderer Test</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+    <!-- Load Leaflet -->
+    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+    <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
+
+    <!-- Load Esri Leaflet -->
+    <script src="../node_modules/esri-leaflet/dist/esri-leaflet-debug.js"></script>
+
+    <!-- Load Esri Leaflet Renderers -->
+    <!-- This will hook into Esri Leaflet and draw the predefined Portland Neighborhoods -->
+    <script src="../dist/esri-leaflet-renderers-debug.js"></script>
+
+    <style>
+      body {margin:0;padding:0;}
+      #map {position: absolute;top:0;bottom:0;right:0;left:0;}
+    </style>
+  </head>
+  <body>
+
+    <div id="map"></div>
+
+    <script>
+      var map = L.map('map').setView([45.537, -122.653], 11);
+      L.esri.basemapLayer('Gray').addTo(map);
+
+      L.esri.featureLayer({
+        url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0',
+        ignoreRenderer: true
+      }).addTo(map);
+
+    </script>
+
+  </body>
+</html>
diff --git a/spec/requirejs-amd-loader.html → debug/requirejs-amd-loader.html b/spec/requirejs-amd-loader.html → debug/requirejs-amd-loader.html
@@ -10,19 +10,21 @@
 
 
     <!-- that will work when running off the filesystem as requirejs's' AMD implementation supports loading from the filesystem-->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
     <script>
-              
+
       require.config({
             baseUrl: '../',
             paths: {
                 'leaflet': 'node_modules/leaflet/dist/leaflet',
                 'esri-leaflet': 'node_modules/esri-leaflet/dist/esri-leaflet',
+                // technically the cluster plugin should be optional
+                'esri-leaflet-cluster': 'node_modules/esri-leaflet-cluster/dist/esri-leaflet-cluster',
                 'esri-leaflet-renderers' : 'dist/esri-leaflet-renderers'
             }
       });
-    </script>-->
-   
+    </script>
+
 
 
 

diff --git a/spec/reset-style.html → debug/reset-style.html b/spec/reset-style.html → debug/reset-style.html
@@ -30,7 +30,7 @@
 
       L.esri.basemapLayer('Gray').addTo(map);
       var neighborhoods = L.esri.featureLayer({
-        url: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Neighborhoods_pdx/FeatureServer/0',
+        url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Neighborhoods_pdx/FeatureServer/0',
         style: function(feature) {
           if (feature.properties.NAME === 'DOWNTOWN') {
             return {fillColor: '#C00'};

diff --git a/debug/sample.html b/debug/sample.html
@@ -28,11 +28,11 @@
       /*
       make a copy of this file in the same folder if you'd like git to ignore your local changes
       */
-      var map = L.map('map').setView([45.526, -122.667], 13);
+      var map = L.map('map').setView([37.837, -122.479], 5);
       L.esri.basemapLayer('Streets').addTo(map);
 
       // draw the predefined Portland Heritage Tree symbols
-      L.esri.featureLayer({url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'}).addTo(map);
+      L.esri.featureLayer({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'}).addTo(map);
     </script>
 
   </body>

diff --git a/spec/script-tag.html → debug/script-tag.html b/spec/script-tag.html → debug/script-tag.html
diff --git a/profiles/base.js b/profiles/base.js
@@ -11,7 +11,11 @@ var copyright = '/* ' + pkg.name + ' - v' + pkg.version + ' - ' + new Date().toS
 
 var config = {
   input: 'src/EsriLeaflet.js',
-  external: ['leaflet', 'esri-leaflet'],
+  external: [
+    'leaflet',
+    'esri-leaflet',
+    'esri-leaflet-cluster'
+  ],
   plugins: [
     nodeResolve({
       jsnext: true,

diff --git a/spec/ignore-flag.html b/spec/ignore-flag.html
diff --git a/spec/sample.html b/spec/sample.html
diff --git a/src/FeatureLayerHook.js b/src/FeatureLayerHook.js
@@ -1,5 +1,6 @@
-import L from 'leaflet';
-import Esri from 'esri-leaflet';
+import { Util, GeoJSON, geoJson } from 'leaflet';
+import * as EsriLeaflet from 'esri-leaflet';
+import * as EsriLeafletCluster from 'esri-leaflet-cluster';
 import classBreaksRenderer from './Renderers/ClassBreaksRenderer';
 import uniqueValueRenderer from './Renderers/UniqueValueRenderer';
 import simpleRenderer from './Renderers/SimpleRenderer';
@@ -8,9 +9,11 @@ function wireUpRenderers () {
   if (this.options.ignoreRenderer) {
     return;
   }
-  var oldOnAdd = L.Util.bind(this.onAdd, this);
-  var oldUnbindPopup = L.Util.bind(this.unbindPopup, this);
-  var oldOnRemove = L.Util.bind(this.onRemove, this);
+  var oldOnAdd = Util.bind(this.onAdd, this);
+  var oldUnbindPopup = Util.bind(this.unbindPopup, this);
+  var oldOnRemove = Util.bind(this.onRemove, this);
+
+  Util.bind(this.createNewLayer, this);
 
   this.onAdd = function (map) {
     this.metadata(function (error, response) {
@@ -64,21 +67,21 @@ function wireUpRenderers () {
 
   this._createPointLayer = function () {
     if (!this._pointLayer) {
-      this._pointLayer = L.geoJson();
+      this._pointLayer = geoJson();
       // store the feature ids that have already been added to the map
       this._pointLayerIds = {};
 
       if (this._popup) {
         var popupFunction = function (feature, layer) {
           layer.bindPopup(this._popup(feature, layer), this._popupOptions);
         };
-        this._pointLayer.options.onEachFeature = L.Util.bind(popupFunction, this);
+        this._pointLayer.options.onEachFeature = Util.bind(popupFunction, this);
       }
     }
   };
 
   this.createNewLayer = function (geojson) {
-    var fLayer = L.GeoJSON.geometryToLayer(geojson, this.options);
+    var fLayer = GeoJSON.geometryToLayer(geojson, this.options);
 
     // add a point layer when the polygon is represented as proportional marker symbols
     if (this._hasProportionalSymbols) {
@@ -200,12 +203,8 @@ function wireUpRenderers () {
   };
 }
 
-Esri.FeatureLayer.addInitHook(function () {
-  // the only method not shared with the clustered implementation
-  L.Util.bind(this.createNewLayer, this);
-  wireUpRenderers();
-});
+EsriLeaflet.FeatureLayer.addInitHook(wireUpRenderers);
 
-if (L.esri.Cluster) {
-  L.esri.Cluster.FeatureLayer.addInitHook(wireUpRenderers);
+if (typeof EsriLeafletCluster !== 'undefined') {
+  EsriLeafletCluster.FeatureLayer.addInitHook(wireUpRenderers);
 }
diff --git a/src/Renderers/Renderer.js b/src/Renderers/Renderer.js
@@ -1,10 +1,10 @@
-import L from 'leaflet';
+import { Class, Util, circleMarker } from 'leaflet';
 
 import pointSymbol from '../Symbols/PointSymbol';
 import lineSymbol from '../Symbols/LineSymbol';
 import polygonSymbol from '../Symbols/PolygonSymbol';
 
-export var Renderer = L.Class.extend({
+export var Renderer = Class.extend({
   options: {
     proportionalPolygon: false,
     clickable: true
@@ -15,7 +15,7 @@ export var Renderer = L.Class.extend({
     this._pointSymbols = false;
     this._symbols = [];
     this._visualVariables = this._parseVisualVariables(rendererJson.visualVariables);
-    L.Util.setOptions(this, options);
+    Util.setOptions(this, options);
   },
 
   _parseVisualVariables: function (visualVariables) {
@@ -54,9 +54,9 @@ export var Renderer = L.Class.extend({
 
   attachStylesToLayer: function (layer) {
     if (this._pointSymbols) {
-      layer.options.pointToLayer = L.Util.bind(this.pointToLayer, this);
+      layer.options.pointToLayer = Util.bind(this.pointToLayer, this);
     } else {
-      layer.options.style = L.Util.bind(this.style, this);
+      layer.options.style = Util.bind(this.style, this);
       layer._originalStyle = layer.options.style;
     }
   },
@@ -68,7 +68,7 @@ export var Renderer = L.Class.extend({
       return sym.pointToLayer(geojson, latlng, this._visualVariables, this.options);
     }
     // invisible symbology
-    return L.circleMarker(latlng, {radius: 0, opacity: 0});
+    return circleMarker(latlng, {radius: 0, opacity: 0});
   },
 
   style: function (feature) {