Merge pull request #156 from Agriculture-Intelligence/master

CATCHALL: bump all deps to latest, consolidate all PR's into one

.eslintignore

@@ -15,6 +15,7 @@ yarn.lock
 # code coverage
 __coverage__
 
+src/tests/**
 test*.*
 
 test/unit/coverage/**

.eslintrc.json

@@ -38,8 +38,9 @@
     "no-prototype-builtins": "off",
     "no-restricted-globals": "off",
     "no-underscore-dangle": "off",
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
     "semi": "off",
-    "standard/no-callback-literal": "off"
+    "standard/no-callback-literal": "off",
+    "endOfLine": "auto"
   }
 }

.gitignore

@@ -2,11 +2,10 @@ node_modules
 bower_components
 .idea
 .dev
-dist/report.html
+dist
 yarn.lock
 .cache
 .dev-server
 .build
-dist
 __coverage__
 .gh-pages

README.md

@@ -1,4 +1,5 @@
 # Leaflet.glify ![Leaflet.glify logo](logo.svg)
+
 web gl renderer plugin for leaflet in typescript
 
 _Pronounced leaflet-G.L.-Ify, or leaflet-glify, or L.-G.L.-Ify, or L-glify, or elglify_
@@ -8,44 +9,39 @@ inspired by http://bl.ocks.org/Sumbera/c6fed35c377a46ff74c3 & need.
 [![Backers on Open Collective](https://opencollective.com/leafletglify/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/leafletglify/sponsors/badge.svg)](#sponsors)
 
 ## Objective
-* To provide a means of rendering a massive amount of data visually in a way that does not degrade user experience
-* Remaining as simple as possible with current fastest libs
-* Providing the same sort of user experience one would get using standard html and elements
+
+- To provide a means of rendering a massive amount of data visually in a way that does not degrade user experience
+- Remaining as simple as possible with current fastest libs
+- Providing the same sort of user experience one would get using standard html and elements
 
 ## Usage
+
 ### Browser
+
 ```html
 <script src="dist/glify-browser.js"></script>
 <script>
   // namespace
-  L.glify
+  L.glify;
 </script>
 ```
+
 ### Typescript
+
 ```ts
 import glify from 'leaflet.glify';
+// namespace
+glify
 ```
+
 ### Node
-```html
+```js
 const { glify } = require('leaflet.glify');
+// namespace
+glify
 ```
 
-## Simple Polygon Usage
-```ts
-L.glify.shapes({
-  map,
-  data: geoJson,
-  click: (e, feature): boolean | void => {
-    // do something when a shape is clicked
-    // return false to continue traversing
-  },
-  hover: (e, feature): boolean | void => {
-    // do something when a shape is hovered
-  }
-});
-```
-
-## Simple Points Usage
+### Simple Points Usage
 ```ts
 L.glify.points({
   map,
@@ -56,11 +52,11 @@ L.glify.points({
   },
   hover: (e, pointOrGeoJsonFeature, xy): boolean | void => {
     // do something when a point is hovered
-  }
+  },
 });
 ```
 
-## Simple Lines Usage
+### Simple Lines Usage
 ```ts
 L.glify.lines({
   map: map,
@@ -79,27 +75,42 @@ L.glify.lines({
 });
 ```
 
-## `L.glify.shapes` Options
-* `map` `{Object}` required leaflet map
-* `data` `{Object}` required geojson data
-* `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
-* `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.polygon`
-* `click` `{Function}` optional event handler for clicking a shape
-* `hover` `{Function}` optional event handler for hovering a shape
-* `color` `{Function|Object|String}` optional, default is 'random'
-  * When `color` is a `Function` its arguments are the `index`:`number` and the `feature`:`object` that is being colored, opacity can optionally be included as `{ a: number }`.
-    The result should be of interface `IColor`, example: `{r: number, g: number, b: number, a: number }`.
-* `opacity` `{Number}` a value from 0 to 1, default is 0.5.   Only used when opacity isn't included on color.
-* `className` `{String}` a class name applied to canvas, default is ''
-* `border` `{Boolean}` optional, default `false`. When set to `true`, a border with an opacity of `settings.borderOpacity` is displayed.
-* `borderOpacity` `{Number}` optional, default `false`. Border opacity for when `settings.boarder` is `true`.  Default is 1.
-* `preserveDrawingBuffer` `{Boolean}` optional, default `1`, adjusts the border opacity separate from `opacity`.
-  * CAUTION: May cause performance issue with large data sets.
-* `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
+### Simple Polygon Usage
+```ts
+L.glify.shapes({
+  map,
+  data: geoJson,
+  click: (e, feature): boolean | void => {
+    // do something when a shape is clicked
+    // return false to continue traversing
+  },
+  hover: (e, feature): boolean | void => {
+    // do something when a shape is hovered
+  }
+});
+```
+
+## API
+**`L.glify` methods**
+* [`points(options)`](#lglifypointsoptions-object)
+* [`lines(options)`](#lglifylinesoptions-object)
+* [`shapes(options)`](#lglifyshapesoptions-object)
+* [`longitudeFirst()`](#longitudefirst)
+* [`latitudeFirst()`](#latitudefirst)
 
-## `L.glify.points` Options
+**`L.glify` properties**
+* [`pointsInstances`](#pointsinstances)
+* [`linesInstances`](#linesinstances)
+* [`shapesInstances`](#shapesinstances)
+
+---
+### `L.glify.points(options: object)`
+Adds point data passed in `options.data` to the Leaflet map instance passed in `options.map`.
+#### Returns
+`L.glify.Points` instance
+#### Options
 * `map` `{Object}` required leaflet map
-* `data` `{Object}` required geojson data
+* `data` `{Object}` required geojson `FeatureCollection` object or an array of `[lat: number, lng: number]` arrays
 * `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
 * `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.point`
 * `click` `{Function}` optional event handler for clicking a point
@@ -116,10 +127,14 @@ L.glify.lines({
 * `preserveDrawingBuffer` `{Boolean}` optional, default `false`, perverse draw buffer on webgl context.
   * CAUTION: May cause performance issue with large data sets.
 * `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
-
-## `L.glify.lines` Options
+---
+### `L.glify.lines(options: object)`
+Adds line data passed in `options.data` to the Leaflet map instance passed in `options.map`.
+#### Returns
+`L.glify.Lines` instance
+#### Options
 * `map` `{Object}` required leaflet map
-* `data` `{Object}` required geojson data
+* `data` `{Object}` required geojson `FeatureCollection` object with `geometry.coordinates` arrays being in a `[lat: number, lng: number]` format
 * `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
 * `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.point`
 * `click` `{Function}` optional event handler for clicking a line
@@ -138,39 +153,104 @@ L.glify.lines({
   * When `weight` is a `Function` its arguments are gets the `index`:`number`, and the `feature`:`object` that is being drawn
   * CAUTION: Zoom of more than 18 will turn weight internally to 1 to prevent WebGL precision rendering issues.
 * `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
+---
+### `L.glify.shapes(options: object)`
+Adds polygon data passed in `options.data` to the Leaflet map instance passed in `options.map`.
+#### Returns
+`L.glify.Shapes` instance
+#### Options
+* `map` `{Object}` required leaflet map
+* `data` `{Object}` required geojson `FeatureCollection` object with `geometry.coordinates` arrays being in a `[lng: number, lat: number]` format *Note: `lat` and `lng` are expected in a different order than in `.points()` and `.lines()`*
+* `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
+* `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.polygon`
+* `click` `{Function}` optional event handler for clicking a shape
+* `hover` `{Function}` optional event handler for hovering a shape
+* `color` `{Function|Object|String}` optional, default is 'random'
+  * When `color` is a `Function` its arguments are the `index`:`number` and the `feature`:`object` that is being colored, opacity can optionally be included as `{ a: number }`.
+    The result should be of interface `IColor`, example: `{r: number, g: number, b: number, a: number }`.
+* `opacity` `{Number}` a value from 0 to 1, default is 0.5.   Only used when opacity isn't included on color.
+* `className` `{String}` a class name applied to canvas, default is ''
+* `border` `{Boolean}` optional, default `false`. When set to `true`, a border with an opacity of `settings.borderOpacity` is displayed.
+* `borderOpacity` `{Number}` optional, default `false`. Border opacity for when `settings.boarder` is `true`.  Default is 1.
+* `preserveDrawingBuffer` `{Boolean}` optional, default `1`, adjusts the border opacity separate from `opacity`.
+  * CAUTION: May cause performance issue with large data sets.
+* `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
+---
+### `longitudeFirst()`
+Sets the expecetd order of arrays in the `coordinates` array of GeoJSON passed to `options.data` to be `[lng, lat]`
+#### Returns
+The updated `L.glify` instance it was called on
 
-## `L.glify` methods/properties
-* `longitudeFirst()`
-* `latitudeFirst()`
-* `pointsInstances`
-* `linesInstances`
-* `shapesInstances`
-* `points(options)`
-* `shapes(options)`
-* `lines(options)`
+---
+### `latitudeFirst()`
+Sets the expecetd order of arrays in the `coordinates` array of GeoJSON passed to `options.data` to be `[lat, lng]`
+#### Returns
+The updated `L.glify` instance it was called on
 
+---
+### `pointsInstances`  
+All of the `L.glify.Points` instances
+
+---
+### `linesInstances`
+All of the `L.glify.Lines` instances
+
+---
+### `shapesInstances`
+All of the `L.glify.Shapes` instances
 
-## Building
 
-There are two ways to package this application: Parcel and WebPack.
+## Building
 
-You can build the parcel version by running ``yarn run build-browser``
-You can build the webpack version by running ``yarn run build-browser-webpack``
+You can build the library by running `yarn run build` or `npm run build`
 
 ## Developing
-Use `yarn serve`
+
+Use `yarn serve` or `npm run serve`
 
 ## Testing
-Use `yarn test`
+
+Use `yarn test` or `npm run test`
 
 ## Update & Remove Data
-L.glify instances can be updated using the `update(data, index)` method.
+`L.glify` instances can be updated using the `update(data, index)` method.
 * `data` `{Object}` Lines and Shapes require a single GeoJSON feature. Points require the same data structure as the original object and therefore also accept an array of coordinates.
 * `index` `{number}` An integer indicating the index of the element to be updated.
 
 An object or some elements of an object are removed using the `remove(index)` method.
-* `index` `{number|Array}` optional - An integer or an array of integers specifying the indices of the elements to be removed.
+
+- `index` `{number|Array}` optional - An integer or an array of integers specifying the indices of the elements to be removed.
+
+- `index` `{number|Array}` optional - An integer or an array of integers specifying the indices of the elements to be removed.
   If `index` is not defined, the entire object is removed.
+
+### Example
+```ts
+let newPoints = L.glify.points({
+  map: leafletMap,
+  data: geojsonFeatureCollection,
+  size: 30
+});
+
+// Update the third feature
+newPoints.update({
+  "type": "FeatureCollection",
+  "features": [{
+    "type": "Feature",
+    "properties": {},
+    "geometry": {
+      "type": "Point",
+      "coordinates": [
+        34.072204277521394
+        -118.44255208969116
+      ]
+    }
+  }]
+}, 2);
+
+// Now remove it
+newPoints.remove(2);
+```
 
 ## Contributors
 

example.ts

@@ -6,9 +6,6 @@ import glify from './src/index';
 const map = L.map('map')
   .setView([50.00, 14.44], 7);
 
-L.tileLayer('http://{s}.sm.mapstack.stamen.com/(toner-background,$fff[difference],$fff[@23],$fff[hsl-saturation@20],toner-lines[destination-in])/{z}/{x}/{y}.png')
-  .addTo(map);
-
 Promise.all([
   wget<number[][]>('data/86T.json'),
   wget<FeatureCollection>('data/CZDistricts.json'),

jest.config.json

@@ -4,15 +4,12 @@
   "coverageDirectory": "__coverage__",
   "coverageProvider": "v8",
   "globalSetup": "",
-  "globals": {
-    "ts-jest": {
-      "tsconfig": "tsconfig.json"
-    }
-  },
   "preset": "ts-jest/presets/js-with-ts",
   "setupFiles": ["jest-webgl-canvas-mock"],
   "testEnvironment": "jsdom",
   "transform": {
-    "^.+\\.glsl": "jest-raw-loader"
-  }
+    "^.+\\.tsx?$": ["ts-jest", { "tsconfig": "tsconfig.json" }],
+    "^.+\\.glsl": "@glen/jest-raw-loader"
+  },
+  "testMatch": ["**/tests/**/*.test.ts"]
 }