Merge pull request #44 from kneemer/smart-maps

added support for 'smart maps' renderers
Esri · Mar 24, 2015 · 041eb37 · 041eb37
2 parents b605674 + 9a1aaf8
commit 041eb37
Show file tree

Hide file tree

Showing 11 changed files with 398 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,9 +3,13 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 This change log adheres to standards from [Keep a CHANGELOG](http://keepachangelog.com).
 
-## [0.0.1-beta.3][Unreleased] - Unreleased
+## [0.0.1-beta.4][Unreleased] - Unreleased
 
-## [0.0.1-beta.2] - 2015-03-02
+## 0.0.1-beta.3 - 2015-03-24
+* Render from the new visualVariables objects in the renderer JSON
+* Still backwards compatible with classic renderers
+
+## 0.0.1-beta.2 - 2015-03-02
 * Fix to work with Browserify
 * Update to work with esri-leaflet 1.0.0-rc.5
 * Still backwards compatible with esri-leaflet 1.0.0-rc.4
@@ -14,5 +18,6 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * First Beta release
 * Works with esri-leaflet 1.0.0-rc.4
 
-[Unreleased]: https://github.com/Esri/esri-leaflet-renderers/compare/v0.0.1-beta.2...HEAD
+[Unreleased]: https://github.com/Esri/esri-leaflet-renderers/compare/v0.0.1-beta.3...HEAD
+[0.0.1-beta.3]: https://github.com/Esri/esri-leaflet-renderers/compare/v0.0.1-beta.2...v0.0.1-beta.3
 [0.0.1-beta.2]: https://github.com/Esri/esri-leaflet-renderers/compare/v0.0.1-beta.1...v0.0.1-beta.2
diff --git a/spec/Renderers/SmartClassBreaksRendererSpec.js b/spec/Renderers/SmartClassBreaksRendererSpec.js
@@ -0,0 +1,142 @@
+describe('SmartClassBreaksRenderer', function () {
+  describe("should create renderer with size variables from JSON", function () {
+    var renderer, pointFeatureOne, pointFeatureTwo;
+
+    beforeEach(function () {
+      sizeInfoJson = {
+        "visualVariables":[{
+          "type":"sizeInfo",
+          "field":"FIELD_ONE",
+          "minSize":1,
+          "maxSize":37.5,
+          "minDataValue":0,
+          "maxDataValue":113
+        }],
+        "type":"classBreaks",
+        "field":"DIAMETER",
+        "minValue":-9007199254740991,
+        "classBreakInfos":[{
+          "symbol":{
+            "color":[227, 139, 79, 204],
+            "size":9,
+            "angle":0,
+            "xoffset":0,
+            "yoffset":0,
+            "type":"esriSMS",
+            "style":"esriSMSCircle",
+            "outline":{
+              "color":[255, 255, 255, 255],
+              "width":0.75,
+              "type":"esriSLS",
+              "style":"esriSLSSolid"
+            }
+          },
+          "classMaxValue":9007199254740991
+        }] 
+      };
+      pointFeatureOne = {
+        "type":"Point",
+        "properties":{
+          "FID":1,
+          "FIELD_ONE":2,
+          "FIELD_TWO":36
+        }
+      };
+      pointFeatureTwo = {
+        "type":"Point",
+        "properties":{
+          "FID":2,
+          "FIELD_ONE":50,
+          "FIELD_TWO":36
+        }
+      };
+      renderer = L.esri.Renderers.classBreaksRenderer(sizeInfoJson);
+    });
+
+    it("size info visual variables should create one base symbol", function () {
+      expect(renderer._symbols.length).to.be.eq(1);
+      expect(renderer._symbols[0].val).to.be.eq(9007199254740991);
+    });
+
+    it("should get different circle marker sizes for different feature values", function() {
+      var sizeOne = renderer.pointToLayer(pointFeatureOne, [0,0]).options.radius;
+      var sizeTwo = renderer.pointToLayer(pointFeatureTwo, [0,0]).options.radius;
+      expect(sizeOne).not.to.be.eq(sizeTwo);
+    });
+  });
+  describe("should create renderer with color variables from JSON", function () {
+    var renderer, polygonFeatureOne, polygonFeatureTwo;
+
+    beforeEach(function () {
+      colorInfoJson = {
+        "visualVariables":[{
+          "type":"colorInfo",
+          "field":"FIELD_ONE",
+          "stops":[
+            {
+            "value":4.6,
+            "color":[255, 252, 212, 204]
+          },{
+            "value":5.95,
+            "color":[224, 178, 193, 204]
+          },{
+            "value":7.3,
+            "color":[193, 104, 173, 204]
+          },{
+            "value":8.65,
+            "color":[123, 53, 120, 204]
+          },{
+            "value":10,
+            "color":[53, 2, 66, 204]
+          }
+          ]
+        }],
+        "type":"classBreaks",
+        "field":"FIELD_ONE",
+        "minValue":-9007199254740991,
+        "classBreakInfos":[{
+          "symbol":{
+            "color":[170, 170, 170, 204],
+            "outline":{
+              "color":[153, 153, 153, 255],
+              "width":0.375,
+              "type":"esriSLS",
+              "style":"esriSLSSolid"
+            },
+            "type":"esriSFS",
+            "style":"esriSFSSolid"
+          },
+          "classMaxValue":9007199254740991
+        }]
+      };
+      polygonFeatureOne = {
+        "type":"Polygon",
+        "properties":{
+          "FID":1,
+          "FIELD_ONE":6,
+          "FIELD_TWO":10
+        }
+      };
+      polygonFeatureTwo = {
+        "type":"Polygon",
+        "properties":{
+          "FID":2,
+          "FIELD_ONE":8,
+          "FIELD_TWO":36
+        }
+      };
+      renderer = L.esri.Renderers.classBreaksRenderer(colorInfoJson);
+    });
+
+    it("color info visual variables should create one base symbol", function () {
+      expect(renderer._symbols.length).to.be.eq(1);
+      expect(renderer._symbols[0].val).to.be.eq(9007199254740991);
+    });
+
+    it("should get different polygon fills for different feature values", function() {
+      var fillOne = renderer.style(polygonFeatureOne).fillColor;
+      var fillTwo = renderer.style(polygonFeatureTwo).fillColor;
+      expect(fillOne).not.to.be.eq(fillTwo);
+    });
+  });
+});
diff --git a/spec/comparisons.html b/spec/comparisons.html
@@ -12,8 +12,8 @@
     <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script>
     <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-renderers/v0.0.1-beta.2/esri-leaflet-renderers.js"></script>
 
-    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
-    <script src="http://js.arcgis.com/3.11/"></script>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
+    <script src="http://js.arcgis.com/3.13/"></script>
   </head>
   <body>
 

diff --git a/src/EsriLeafletRenderers.js b/src/EsriLeafletRenderers.js
@@ -1,5 +1,5 @@
 var EsriLeafletRenderers = {
-  VERSION: '0.0.1-beta.2'
+  VERSION: '0.0.1-beta.3'
 };
 
 // attach to the L.esri global if we can

diff --git a/src/FeatureLayerHook.js b/src/FeatureLayerHook.js
@@ -55,6 +55,8 @@ Esri.FeatureLayer.addInitHook(function() {
   this._createPointLayer = function(){
     if(!this._pointLayer){
       this._pointLayer = L.geoJson();
+      //store the feature ids that have already been added to the map
+      this._pointLayerIds = {};
 
       if(this._popup){
         var popupFunction = function (feature, layer) {
@@ -75,8 +77,15 @@ Esri.FeatureLayer.addInitHook(function() {
       if(!(isNaN(centroid[0]) || isNaN(centroid[0]))){
         this._createPointLayer();
 
-        var pointjson = this.getPointJson(geojson, centroid);
-        this._pointLayer.addData(pointjson);
+        var featureId = geojson.id.toString();
+        //only add the feature if it does not already exist on the map
+        if(!this._pointLayerIds[featureId]){
+          var pointjson = this.getPointJson(geojson, centroid);
+
+          this._pointLayer.addData(pointjson);
+          this._pointLayerIds[featureId] = true;
+        }
+
         this._pointLayer.bringToFront();
       }
     }

diff --git a/src/Renderers/ClassBreaksRenderer.js b/src/Renderers/ClassBreaksRenderer.js
@@ -3,6 +3,9 @@ EsriLeafletRenderers.ClassBreaksRenderer = EsriLeafletRenderers.Renderer.extend(
   initialize: function(rendererJson, options){
     EsriLeafletRenderers.Renderer.prototype.initialize.call(this, rendererJson, options);
     this._field = this._rendererJson.field;
+    if (this._rendererJson.normalizationType && this._rendererJson.normalizationType === 'esriNormalizeByField'){
+      this._normalizationField = this._rendererJson.normalizationField;
+    }
     this._createSymbols();
   },
 
@@ -32,6 +35,15 @@ EsriLeafletRenderers.ClassBreaksRenderer = EsriLeafletRenderers.Renderer.extend(
 
   _getSymbol: function(feature){
     var val = feature.properties[this._field];
+    if (this._normalizationField){
+      var normValue = feature.properties[this._normalizationField];
+      if (!isNaN(normValue) && normValue !== 0) {
+        val = val / normValue;
+      } else {
+        return this._defaultSymbol;
+      }
+    }
+
     if(val > this._maxValue){
       return this._defaultSymbol;
     }

diff --git a/src/Renderers/Renderer.js b/src/Renderers/Renderer.js
@@ -9,13 +9,24 @@ EsriLeafletRenderers.Renderer = L.Class.extend({
     this._rendererJson = rendererJson;
     this._pointSymbols = false;
     this._symbols = [];
+    this._visualVariables = this._parseVisualVariables(rendererJson.visualVariables);
     L.Util.setOptions(this, options);
   },
 
+  _parseVisualVariables: function(visualVariables){
+    var visVars = {};
+    if (visualVariables) {
+      for (var i = 0; i < visualVariables.length; i++){
+        visVars[visualVariables[i].type] = visualVariables[i];
+      }
+    }
+    return visVars;
+  },
 
   _createDefaultSymbol: function(){
     if(this._rendererJson.defaultSymbol){
       this._defaultSymbol = this._newSymbol(this._rendererJson.defaultSymbol);
+      this._defaultSymbol._isDefault = true;
     }
   },
 
@@ -46,18 +57,18 @@ EsriLeafletRenderers.Renderer = L.Class.extend({
 
   pointToLayer: function(geojson, latlng){
     var sym = this._getSymbol(geojson);
-    if(sym){
-      return sym.pointToLayer(geojson, latlng);
+    if(sym && sym.pointToLayer){
+      return sym.pointToLayer(geojson, latlng, this._visualVariables);
     }
     //invisible symbology
-    return L.circleMarker(latlng, {radius: 0});
+    return L.circleMarker(latlng, {radius: 0, opacity: 0});
   },
 
   style: function(feature){
     //find the symbol to represent this feature
     var sym = this._getSymbol(feature);
     if(sym){
-      return sym.style(feature);
+      return sym.style(feature, this._visualVariables);
     }else{
       //invisible symbology
       return {opacity: 0, fillOpacity: 0};

diff --git a/src/Symbols/LineSymbol.js b/src/Symbols/LineSymbol.js
@@ -48,7 +48,22 @@ EsriLeafletRenderers.LineSymbol = EsriLeafletRenderers.Symbol.extend({
     }
   },
 
-  style: function(){
+  style: function(feature, visualVariables){
+    if(!this._isDefault && visualVariables){
+      if(visualVariables.sizeInfo){
+        var calculatedSize = this.pixelValue(this.getSize(feature, visualVariables.sizeInfo));
+        if (calculatedSize) {
+          this._styles.weight = calculatedSize;
+        }
+      }
+      if(visualVariables.colorInfo){
+        var color = this.getColor(feature, visualVariables.colorInfo);
+        if(color){
+          this._styles.color = this.colorValue(color);
+          this._styles.opacity = this.alphaValue(color);
+        }
+      }
+    }
     return this._styles;
   }
 });