{"id":13554080,"url":"https://github.com/sarahbellum/Canvas-Flowmap-Layer","last_synced_at":"2025-04-03T06:31:06.530Z","repository":{"id":77333364,"uuid":"70850086","full_name":"sarahbellum/Canvas-Flowmap-Layer","owner":"sarahbellum","description":"A map layer for mapping the flow of objects. Extends Esri JSAPI and renders on the HTML canvas.","archived":false,"fork":false,"pushed_at":"2021-02-05T18:12:27.000Z","size":2973,"stargazers_count":131,"open_issues_count":3,"forks_count":76,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-11-04T02:32:44.216Z","etag":null,"topics":["cartography","esri-javascript-api","esri-js","flow","html5-canvas","map","mapping","maps"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sarahbellum.png","metadata":{"files":{"readme":"README-JSAPI-3.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-10-13T21:34:54.000Z","updated_at":"2024-06-04T03:43:38.000Z","dependencies_parsed_at":"2023-07-24T21:17:05.241Z","dependency_job_id":null,"html_url":"https://github.com/sarahbellum/Canvas-Flowmap-Layer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarahbellum%2FCanvas-Flowmap-Layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarahbellum%2FCanvas-Flowmap-Layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarahbellum%2FCanvas-Flowmap-Layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarahbellum%2FCanvas-Flowmap-Layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sarahbellum","download_url":"https://codeload.github.com/sarahbellum/Canvas-Flowmap-Layer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246947887,"owners_count":20859336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cartography","esri-javascript-api","esri-js","flow","html5-canvas","map","mapping","maps"],"created_at":"2024-08-01T12:02:39.248Z","updated_at":"2025-04-03T06:31:05.207Z","avatar_url":"https://github.com/sarahbellum.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# Canvas-Flowmap-Layer for Esri JSAPI v3\n\n## Table of Contents\n\n- [Demos](#demos)\n- [Developer API](#developer-api)\n  - [Constructor](#constructor)\n  - [Properties](#properties)\n  - [Methods](#methods)\n  - [Events](#events)\n\n## Demos\n\n- [Simple demo](https://sarahbellum.github.io/Canvas-Flowmap-Layer/demos-jsapi-3/main)\n- [Feature comparison, sandbox demo](https://sarahbellum.github.io/Canvas-Flowmap-Layer/demos-jsapi-3/comparison/)\n\n## Developer API\n\nThis extends the Esri JSAPI v3 [`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 customizations and extentions described below.\n\n### Constructor\n\n```javascript\n// an example of constructing a new layer\nvar canvasFlowmapLayer = new CanvasFlowmapLayer({\n  // 1. a required property\n  // inform the layer of your unique origin/destination attributes and geometry fields\n  originAndDestinationFieldIds: {\n    // all kinds of important stuff here...see docs below\n  },\n\n  // 2. some optional properties\n  pathDisplayMode: 'selection',\n  animationStarted: true,\n  animationDuration: 2000,\n  animationEasingFamily: 'Cubic',\n  animationEasingType: 'In'\n\n  // 3. JSAPI GraphicsLayer constructor properties can also be used\n  id: 'myCanvasFlowmapLayer',\n  visible: true\n});\n\n// construct an array of esri/Graphic yourself and add them to the layer\ncanvasFlowmapLayer.addGraphics([pointGraphic1, pointGraphic2, ..., pointGraphic100]);\n\n// add the layer to your JSAPI map\nmap.addLayer(canvasFlowmapLayer);\n```\n\n**Convenience options available in constructor _only_:**\n\n| Property | Description |\n| --- | --- |\n| `animationDuration` | See `setAnimationDuration()` method description below. |\n| `animationEasingFamily` | See `setAnimationEasing()` method description below. |\n| `animationEasingType` | See `setAnimationEasing()` method description below. |\n\n### Properties\n\n| Property | Description |\n| --- | --- |\n| `originAndDestinationFieldIds` | **Required**. `Object`. This object informs the layer of your unique origin and destination attributes (fields). Both origins and destinations need to have their own unique ID attribute and geometry definition. [See example below](#originanddestinationfieldids-example) which includes minimum required object properties. |\n| `originCircleProperties` | _Optional_. `Object`. This object defines the symbol properties of the origin point as rendered on the canvas. |\n| `destinationCircleProperties` | _Optional_. `Object`. This object defines the symbol properties of the destination point as rendered on the canvas. |\n| `pathProperties` | _Optional_. `Object`. This object defines the symbol properties of the non-animated Bezier curve that is drawn on the canvas connecting an origin point to a destination point. |\n| `animatePathProperties` | _Optional_. `Object`. This defines the symbol properties of the animated Bezier curve that is drawn on the canvas directly on top of the non-animated Bezier curve. [See Line Animation info above](#line-animation). |\n| `pathDisplayMode` | _Optional_. `String`. Valid values: `'selection'` or `'all'`. Defaults to `'all'`. |\n| `wrapAroundCanvas` | _Optional_. `Boolean`. Defaults to `true`. Ensures that canvas features will be drawn beyond +/-180 longitude. |\n| `animationStarted` | _Optional_. `Boolean`. Defaults to `false`. This can be set during construction, but you should use the `playAnimation` and `stopAnimation` methods to control and change animations after layer construction. |\n| `originHighlightCircleProperties` | _Optional_. `Object`. This object defines the symbol properties of the origin point as rendered on the canvas when highlighted. |\n| `destinationHighlightCircleProperties` | _Optional_. `Object`. This object defines the symbol properties of the destination point as rendered on the canvas when highlighted. |\n\n**`originAndDestinationFieldIds` example:**\n\n```javascript\n// you must fill in each of these values for these required properties,\n// using the schema of your own data\n{\n  originUniqueIdField: 'start_id',\n  originGeometry: {\n    x: 'start_longitude',\n    y: 'start_latitude',\n    spatialReference: {\n      wkid: 4326\n    }\n  },\n  destinationUniqueIdField: 'end_id',\n  destinationGeometry: {\n    x: 'end_lon',\n    y: 'end_lat',\n    spatialReference: {\n      wkid: 4326\n    }\n  }\n}\n```\n\n**custom symbology examples:**\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    `destinationCircleProperties` example to set categorical (unique values) symbols for destination circle strokes and fills\n  \u003c/summary\u003e\n\n```javascript\ndestinationCircleProperties: {\n  type: 'uniqueValue',\n  field: '\u003cfield / column / property name\u003e',\n  uniqueValueInfos: [{\n    value: '\u003cattribute value A\u003e',\n    symbol: {\n      globalCompositeOperation: 'destination-over',\n      radius: 10,\n      fillStyle: 'rgba(87, 216, 255, 0.65)',\n      lineWidth: 0.5,\n      strokeStyle: 'rgb(61, 225, 255)',\n      shadowBlur: 0\n    }\n  }, {\n    value: '\u003cattribute value B\u003e',\n    symbol: {\n      globalCompositeOperation: 'destination-over',\n      radius: 8,\n      fillStyle: 'rgba(153, 98, 204, 0.70)',\n      lineWidth: 0.5,\n      strokeStyle: 'rgb(181, 131, 217)',\n      shadowBlur: 0\n    }\n  }]\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    `pathProperties` example to set a simple (single) symbol for line width and color\n  \u003c/summary\u003e\n\n```javascript\npathProperties: {\n  type: 'simple',\n  symbol: {\n    strokeStyle: 'rgba(207, 241, 17, 0.8)',\n    shadowBlur: 1.5,\n    lineWidth: 0.5,\n    shadowColor: 'rgb(207, 241, 17)',\n    lineCap: 'round'\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    `pathProperties` example to set class break symbols for line widths and colors\n  \u003c/summary\u003e\n\n```javascript\npathProperties: {\n  type: 'classBreaks',\n  field: '\u003cfield / column / property name\u003e',\n  defaultSymbol: {\n    strokeStyle: 'rgba(237, 248, 177, 1)',\n    lineWidth: 0.5,\n    lineCap: 'round'\n  },\n  classBreakInfos: [{\n    classMinValue: 0,\n    classMaxValue: 999999,\n    symbol: {\n      strokeStyle: 'rgba(237, 248, 177, 1)',\n      lineWidth: 0.5,\n      lineCap: 'round'\n    }\n  }, {\n    classMinValue: 999999,\n    classMaxValue: 4999999,\n    symbol: {\n      strokeStyle: 'rgba(127, 205, 187, 1)',\n      lineWidth: 1.5,\n      lineCap: 'round'\n    }\n  }, {\n    classMinValue: 5000000,\n    classMaxValue: 10000000,\n    symbol: {\n      strokeStyle: 'rgba(44, 127, 184, 1)',\n      lineWidth: 3,\n      lineCap: 'round'\n    }\n  }]\n}\n```\n\n\u003c/details\u003e\n\n### Methods\n\n| Method | Arguments | Description |\n| --- | --- | --- |\n| `addGraphics( inputGraphics )` | `inputGraphics`: `Array` of Esri graphics. | This method will prove to be one of your best friends. It is the main \"entry point\" for adding to the layer the origin-destination graphics you are responsible for creating from your own data source. |\n| `selectGraphicsForPathDisplay( selectionGraphics, selectionMode )`  | `selectionGraphics`: `Array` of Esri graphics that were already added to the layer. \u003cbr/\u003e \u003cbr/\u003e `selectionMode`: `String`. Valid values: `'SELECTION_NEW'`, `'SELECTION_ADD'`, or `'SELECTION_SUBTRACT'`. | This informs the layer which Bezier curves should be drawn on the map. \u003cbr/\u003e\u003cbr/\u003e For example, you can most easily use this in conjunction with a `click` or `mouse-over` event listener. |\n| `selectGraphicsForPathDisplayById( uniqueOriginOrDestinationIdField, idValue, originBoolean, selectionMode )` |  | This is a convenience method if the unique origin or destination value is already known and you do not wish to rely on a `click` or `mouse-over` event listener. |\n| `clearAllPathSelections()` |  | This informs the layer to unselect (and thus hide) all Bezier curves. |\n| `playAnimation()` |  | This starts and shows Bezier curve animations. |\n| `stopAnimation()` |  | This stops and hides any Bezier curve animations. |\n| `setAnimationDuration( duration )` | `duration`: _Optional_. `Number` in milliseconds. | This changes the animation duration. |\n| `setAnimationEasing( easingFamily, easingType )` | `easingFamily`: `String`. \u003cbr/\u003e\u003cbr/\u003e `easingType`: `String`. \u003cbr/\u003e\u003cbr/\u003e See `getAnimationEasingOptions()` method for info on valid values. | This changes the animation easing function with the help of the [tween.js library](https://github.com/tweenjs/tween.js). |\n| `getAnimationEasingOptions()` |  | Returns information on valid `easingFamily` and `easingType` values based on the [tween.js library](https://github.com/tweenjs/tween.js). |\n| `selectGraphicsForHighlight( selectionGraphics, selectionMode )` | `selectionGraphics`: `Array` of Esri graphics that were already added to the layer. \u003cbr/\u003e\u003cbr/\u003e `selectionMode`: `String`. Valid values: `'SELECTION_NEW'`, `'SELECTION_ADD'`, or `'SELECTION_SUBTRACT'`. | This informs the layer which origin/destination points should be \"highlighted\" when drawn on the map, which just applies the highlight symbology instead of the default symbology to the points. \u003cbr/\u003e\u003cbr/\u003e For example, you can most easily use this in conjunction with a `click` or `mouse-over` event listener. |\n| `clearAllHighlightSelections()` |  | This informs the layer to \"un-highlight\" (and thus remove highlight symbology) all Bezier curves. |\n\n### Events\n\n| Event | Description |\n| --- | --- |\n| `click` | Extends [GraphicsLayer `click`](https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html#event-click) and adds the following properties to the event object: \u003cbr/\u003e\u003cbr/\u003e `isOriginGraphic`: `true` if an origin graphic has been clicked, but `false` if a destination graphic has been clicked. \u003cbr/\u003e\u003cbr/\u003e `sharedOriginGraphics`: `Array` of Esri graphics that share the same origin. \u003cbr/\u003e\u003cbr/\u003e `sharedDestinationGraphics`: `Array` of Esri graphics that share the same destination. |\n| `mouse-over` | Extends [GraphicsLayer `mouse-over`](https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html#event-mouse-over) and adds the following properties to the event object: \u003cbr/\u003e\u003cbr/\u003e `isOriginGraphic`: `true` when the mouse first entered an origin graphic, but `false` when the mouse first entered a destination graphic. \u003cbr/\u003e\u003cbr/\u003e `sharedOriginGraphics`: `Array` of Esri graphics that share the same origin. \u003cbr/\u003e\u003cbr/\u003e `sharedDestinationGraphics`: `Array` of Esri graphics that share the same destination. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarahbellum%2FCanvas-Flowmap-Layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarahbellum%2FCanvas-Flowmap-Layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarahbellum%2FCanvas-Flowmap-Layer/lists"}