README and demo updates

sarahbellum · Oct 8, 2017 · 47f62d5 · 47f62d5
1 parent 3436b43
commit 47f62d5
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 246 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,7 +4,8 @@ module.exports = {
   },
   "globals": {
     "define": false,
-    "require": false
+    "require": false,
+    "Papa": false
   },
   "rules": {
     "no-debugger": "error",

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Canvas-Flowmap-Layer
 
-The Canvas-Flowmap-Layer extends the ArcGIS API for JavaScript (Esri JSAPI) to map the flow of objects from an origin point to a destination point by using a Bezier curve. Esri graphics are translated to pixel space so that rendering for the points and curves are mapped to an [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement).  
+The Canvas-Flowmap-Layer extends the ArcGIS API for JavaScript v3.x (Esri JSAPI) to map the flow of objects from an origin point to a destination point by using a Bezier curve. Esri graphics are translated to pixel space so that rendering for the points and curves are mapped to an [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement).  
 
 **Demos** 
 
@@ -88,11 +88,11 @@ The Canvas-Flowmap-Layer has default symbology established for origin points, de
 
 Symbol configurations are defined using property objects inspired by the [ArcGIS REST API renderer objects ](http://resources.arcgis.com/en/help/arcgis-rest-api/#/Renderer_objects/02r30000019t000000/) specification. Simple, unique value, and class breaks are all supported but instead use canvas stroke and line style property names.
 
-The provided demo pages show some examples of these symbol configuration objects (see config.js files).
+The [custom symbology examples](#custom-symbology-examples) in the API documentation below provide a starting point on how some of these configuration objects should be structured.
 
 ## API
 
-This extends the ArcGIS API for JavaScript (v3.x) [esri/layers/GraphicsLayer](https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html). All properties, methods, and events provided by the `GraphicsLayer` are available in the `CanvasFlowmapLayer`, with custom features described below.
+This extends the ArcGIS API for JavaScript v3.x [esri/layers/GraphicsLayer](https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html). All properties, methods, and events provided by the `GraphicsLayer` are available in the `CanvasFlowmapLayer`, with custom features described below.
 
 ### Constructor Summary
 
@@ -105,9 +105,9 @@ var canvasFlowmapLayer = new CanvasFlowmapLayer({
 
   // CanvasFlowmapLayer custom constructor properties -- see property table below
 
-  // - required property
-  //that informs the layer of your unique origin/destination attributes and geometry
-  originAndDestinationFieldIds: {/* all kinds of important stuff here...see docs below */},
+  // - a required property
+  // it informs the layer of your unique origin/destination attributes and geometry
+  originAndDestinationFieldIds: { /* all kinds of important stuff here...see docs below */ },
 
   // - some optional properties
   pathDisplayMode: 'selection',
@@ -173,6 +173,107 @@ map.addLayer(canvasFlowmapLayer);
 }
 ```
 
+##### custom symbology examples:
+
+<details>
+  <summary>
+    `destinationCircleProperties` example to set categorical (unique values) symbols for destination circle strokes and fills
+  </summary>
+
+```javascript
+destinationCircleProperties: {
+  type: 'uniqueValue',
+  field: '<field / column / property name>',
+  uniqueValueInfos: [{
+    value: '<attribute value A>',
+    symbol: {
+      globalCompositeOperation: 'destination-over',
+      radius: 10,
+      fillStyle: 'rgba(87, 216, 255, 0.65)',
+      lineWidth: 0.5,
+      strokeStyle: 'rgb(61, 225, 255)',
+      shadowBlur: 0
+    }
+  }, {
+    value: '<attribute value B>',
+    symbol: {
+      globalCompositeOperation: 'destination-over',
+      radius: 8,
+      fillStyle: 'rgba(153, 98, 204, 0.70)',
+      lineWidth: 0.5,
+      strokeStyle: 'rgb(181, 131, 217)',
+      shadowBlur: 0
+    }
+  }]
+}
+```
+
+</details>
+
+<details>
+  <summary>
+    `pathProperties` example to set a simple (single) symbol for line width and color
+  </summary>
+
+```javascript
+pathProperties: {
+  type: 'simple',
+  symbol: {
+    strokeStyle: 'rgba(207, 241, 17, 0.8)',
+    shadowBlur: 1.5,
+    lineWidth: 0.5,
+    shadowColor: 'rgb(207, 241, 17)',
+    lineCap: 'round'
+  }
+}
+```
+
+</details>
+
+<details>
+  <summary>
+    `pathProperties` example to set class break symbols for line widths and colors
+  </summary>
+
+```javascript
+pathProperties: {
+  type: 'classBreaks',
+  field: '<field / column / property name>',
+  defaultSymbol: {
+    strokeStyle: 'rgba(237, 248, 177, 1)',
+    lineWidth: 0.5,
+    lineCap: 'round'
+  },
+  classBreakInfos: [{
+    classMinValue: 0,
+    classMaxValue: 999999,
+    symbol: {
+      strokeStyle: 'rgba(237, 248, 177, 1)',
+      lineWidth: 0.5,
+      lineCap: 'round'
+    }
+  }, {
+    classMinValue: 999999,
+    classMaxValue: 4999999,
+    symbol: {
+      strokeStyle: 'rgba(127, 205, 187, 1)',
+      lineWidth: 1.5,
+      lineCap: 'round'
+    }
+  }, {
+    classMinValue: 5000000,
+    classMaxValue: 10000000,
+    symbol: {
+      strokeStyle: 'rgba(44, 127, 184, 1)',
+      lineWidth: 3,
+      lineCap: 'round'
+    }
+  }]
+}
+```
+
+</details>
+
 ### Method Summary
 
 | Method | Arguments | Description |

diff --git a/demos/comparison/config.js b/demos/comparison/config.js
diff --git a/demos/comparison/index.html b/demos/comparison/index.html
@@ -5,10 +5,13 @@
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
   <meta name="description" content="Canvas Flowmap Layer with the Esri ArcGIS API for JavaScript v3.">
+
   <title>Canvas Flowmap Layer with JSAPI v3</title>
-  <link rel="stylesheet" href="//js.arcgis.com/3.20/esri/themes/calcite/esri/esri.css">
-  <link rel="stylesheet" href="//s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.0-rc.1/css/calcite-web.min.css">
-
+
+  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/esri/esri.css">
+
+  <link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.0-rc.7/css/calcite-web.min.css">
+
   <style>
     html,
     body,
@@ -130,25 +133,21 @@ <h4>Canvas Flowmap Layer</h4>
 
 
   <!-- load 3rd-party CSV parsing libary  -->
-  <script src="//unpkg.com/papaparse/papaparse.min.js"></script>
+  <script src="https://unpkg.com/papaparse@4/papaparse.min.js"></script>
 
   <!-- set Dojo configuration options -->
   <script>
     var dojoConfig = {
       async: true,
-      debug: true, // only for development
       packages: [{
-        name: 'local-resources',
-        location: location.pathname.replace(/\/[^/]+$/, '')
-      }, {
         name: 'Canvas-Flowmap-Layer',
         location: location.pathname.replace(/[^\/]+$/, '') + '../../src'
       }]
     };
 
   </script>
   <!-- load Esri JSAPI -->
-  <script src="//js.arcgis.com/3.20compact/"></script>
+  <script src="https://js.arcgis.com/3.22compact/"></script>
 
   <!-- load this app's code -->
   <script src="script.js"></script>