Skip to content

Commit ca0fd2e

Browse files
robertleeplummerjrrobertleeplummerjr
authored
Merge pull request #156 from Agriculture-Intelligence/master
CATCHALL: bump all deps to latest, consolidate all PR's into one
2 parents b0606b3 + 6acf1c6 commit ca0fd2e

30 files changed

+10073
-12330
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ yarn.lock
1515
# code coverage
1616
__coverage__
1717

18+
src/tests/**
1819
test*.*
1920

2021
test/unit/coverage/**

‎.eslintrc.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@
3838
"no-prototype-builtins": "off",
3939
"no-restricted-globals": "off",
4040
"no-underscore-dangle": "off",
41-
"prettier/prettier": "error",
41+
"prettier/prettier": ["error", { "endOfLine": "auto" }],
4242
"semi": "off",
43-
"standard/no-callback-literal": "off"
43+
"standard/no-callback-literal": "off",
44+
"endOfLine": "auto"
4445
}
4546
}

‎.gitignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ node_modules
22
bower_components
33
.idea
44
.dev
5-
dist/report.html
5+
dist
66
yarn.lock
77
.cache
88
.dev-server
99
.build
10-
dist
1110
__coverage__
1211
.gh-pages

‎README.md‎

Lines changed: 142 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Leaflet.glify ![Leaflet.glify logo](logo.svg)
2+
23
web gl renderer plugin for leaflet in typescript
34

45
_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.
89
[![Backers on Open Collective](https://opencollective.com/leafletglify/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/leafletglify/sponsors/badge.svg)](#sponsors)
910

1011
## Objective
11-
* To provide a means of rendering a massive amount of data visually in a way that does not degrade user experience
12-
* Remaining as simple as possible with current fastest libs
13-
* Providing the same sort of user experience one would get using standard html and elements
12+
13+
- To provide a means of rendering a massive amount of data visually in a way that does not degrade user experience
14+
- Remaining as simple as possible with current fastest libs
15+
- Providing the same sort of user experience one would get using standard html and elements
1416

1517
## Usage
18+
1619
### Browser
20+
1721
```html
1822
<script src="dist/glify-browser.js"></script>
1923
<script>
2024
// namespace
21-
L.glify
25+
L.glify;
2226
</script>
2327
```
28+
2429
### Typescript
30+
2531
```ts
2632
import glify from 'leaflet.glify';
33+
// namespace
34+
glify
2735
```
36+
2837
### Node
29-
```html
38+
```js
3039
const { glify } = require('leaflet.glify');
40+
// namespace
41+
glify
3142
```
3243

33-
## Simple Polygon Usage
34-
```ts
35-
L.glify.shapes({
36-
map,
37-
data: geoJson,
38-
click: (e, feature): boolean | void => {
39-
// do something when a shape is clicked
40-
// return false to continue traversing
41-
},
42-
hover: (e, feature): boolean | void => {
43-
// do something when a shape is hovered
44-
}
45-
});
46-
```
47-
48-
## Simple Points Usage
44+
### Simple Points Usage
4945
```ts
5046
L.glify.points({
5147
map,
@@ -56,11 +52,11 @@ L.glify.points({
5652
},
5753
hover: (e, pointOrGeoJsonFeature, xy): boolean | void => {
5854
// do something when a point is hovered
59-
}
55+
},
6056
});
6157
```
6258

63-
## Simple Lines Usage
59+
### Simple Lines Usage
6460
```ts
6561
L.glify.lines({
6662
map: map,
@@ -79,27 +75,42 @@ L.glify.lines({
7975
});
8076
```
8177

82-
## `L.glify.shapes` Options
83-
* `map` `{Object}` required leaflet map
84-
* `data` `{Object}` required geojson data
85-
* `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
86-
* `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.polygon`
87-
* `click` `{Function}` optional event handler for clicking a shape
88-
* `hover` `{Function}` optional event handler for hovering a shape
89-
* `color` `{Function|Object|String}` optional, default is 'random'
90-
* 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 }`.
91-
The result should be of interface `IColor`, example: `{r: number, g: number, b: number, a: number }`.
92-
* `opacity` `{Number}` a value from 0 to 1, default is 0.5. Only used when opacity isn't included on color.
93-
* `className` `{String}` a class name applied to canvas, default is ''
94-
* `border` `{Boolean}` optional, default `false`. When set to `true`, a border with an opacity of `settings.borderOpacity` is displayed.
95-
* `borderOpacity` `{Number}` optional, default `false`. Border opacity for when `settings.boarder` is `true`. Default is 1.
96-
* `preserveDrawingBuffer` `{Boolean}` optional, default `1`, adjusts the border opacity separate from `opacity`.
97-
* CAUTION: May cause performance issue with large data sets.
98-
* `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
78+
### Simple Polygon Usage
79+
```ts
80+
L.glify.shapes({
81+
map,
82+
data: geoJson,
83+
click: (e, feature): boolean | void => {
84+
// do something when a shape is clicked
85+
// return false to continue traversing
86+
},
87+
hover: (e, feature): boolean | void => {
88+
// do something when a shape is hovered
89+
}
90+
});
91+
```
92+
93+
## API
94+
**`L.glify` methods**
95+
* [`points(options)`](#lglifypointsoptions-object)
96+
* [`lines(options)`](#lglifylinesoptions-object)
97+
* [`shapes(options)`](#lglifyshapesoptions-object)
98+
* [`longitudeFirst()`](#longitudefirst)
99+
* [`latitudeFirst()`](#latitudefirst)
99100

100-
## `L.glify.points` Options
101+
**`L.glify` properties**
102+
* [`pointsInstances`](#pointsinstances)
103+
* [`linesInstances`](#linesinstances)
104+
* [`shapesInstances`](#shapesinstances)
105+
106+
---
107+
### `L.glify.points(options: object)`
108+
Adds point data passed in `options.data` to the Leaflet map instance passed in `options.map`.
109+
#### Returns
110+
`L.glify.Points` instance
111+
#### Options
101112
* `map` `{Object}` required leaflet map
102-
* `data` `{Object}` required geojson data
113+
* `data` `{Object}` required geojson `FeatureCollection` object or an array of `[lat: number, lng: number]` arrays
103114
* `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
104115
* `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.point`
105116
* `click` `{Function}` optional event handler for clicking a point
@@ -116,10 +127,14 @@ L.glify.lines({
116127
* `preserveDrawingBuffer` `{Boolean}` optional, default `false`, perverse draw buffer on webgl context.
117128
* CAUTION: May cause performance issue with large data sets.
118129
* `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
119-
120-
## `L.glify.lines` Options
130+
---
131+
### `L.glify.lines(options: object)`
132+
Adds line data passed in `options.data` to the Leaflet map instance passed in `options.map`.
133+
#### Returns
134+
`L.glify.Lines` instance
135+
#### Options
121136
* `map` `{Object}` required leaflet map
122-
* `data` `{Object}` required geojson data
137+
* `data` `{Object}` required geojson `FeatureCollection` object with `geometry.coordinates` arrays being in a `[lat: number, lng: number]` format
123138
* `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
124139
* `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.point`
125140
* `click` `{Function}` optional event handler for clicking a line
@@ -138,39 +153,104 @@ L.glify.lines({
138153
* When `weight` is a `Function` its arguments are gets the `index`:`number`, and the `feature`:`object` that is being drawn
139154
* CAUTION: Zoom of more than 18 will turn weight internally to 1 to prevent WebGL precision rendering issues.
140155
* `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
156+
---
157+
### `L.glify.shapes(options: object)`
158+
Adds polygon data passed in `options.data` to the Leaflet map instance passed in `options.map`.
159+
#### Returns
160+
`L.glify.Shapes` instance
161+
#### Options
162+
* `map` `{Object}` required leaflet map
163+
* `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()`*
164+
* `vertexShaderSource` `{String|Function}` optional glsl vertex shader source, defaults to use `L.glify.shader.vertex`
165+
* `fragmentShaderSource` `{String|Function}` optional glsl fragment shader source, defaults to use `L.glify.shader.fragment.polygon`
166+
* `click` `{Function}` optional event handler for clicking a shape
167+
* `hover` `{Function}` optional event handler for hovering a shape
168+
* `color` `{Function|Object|String}` optional, default is 'random'
169+
* 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 }`.
170+
The result should be of interface `IColor`, example: `{r: number, g: number, b: number, a: number }`.
171+
* `opacity` `{Number}` a value from 0 to 1, default is 0.5. Only used when opacity isn't included on color.
172+
* `className` `{String}` a class name applied to canvas, default is ''
173+
* `border` `{Boolean}` optional, default `false`. When set to `true`, a border with an opacity of `settings.borderOpacity` is displayed.
174+
* `borderOpacity` `{Number}` optional, default `false`. Border opacity for when `settings.boarder` is `true`. Default is 1.
175+
* `preserveDrawingBuffer` `{Boolean}` optional, default `1`, adjusts the border opacity separate from `opacity`.
176+
* CAUTION: May cause performance issue with large data sets.
177+
* `pane` `{String}` optional, default is `overlayPane`. Can be set to a custom pane.
178+
---
179+
### `longitudeFirst()`
180+
Sets the expecetd order of arrays in the `coordinates` array of GeoJSON passed to `options.data` to be `[lng, lat]`
181+
#### Returns
182+
The updated `L.glify` instance it was called on
141183

142-
## `L.glify` methods/properties
143-
* `longitudeFirst()`
144-
* `latitudeFirst()`
145-
* `pointsInstances`
146-
* `linesInstances`
147-
* `shapesInstances`
148-
* `points(options)`
149-
* `shapes(options)`
150-
* `lines(options)`
184+
---
185+
### `latitudeFirst()`
186+
Sets the expecetd order of arrays in the `coordinates` array of GeoJSON passed to `options.data` to be `[lat, lng]`
187+
#### Returns
188+
The updated `L.glify` instance it was called on
151189

190+
---
191+
### `pointsInstances`
192+
All of the `L.glify.Points` instances
193+
194+
---
195+
### `linesInstances`
196+
All of the `L.glify.Lines` instances
197+
198+
---
199+
### `shapesInstances`
200+
All of the `L.glify.Shapes` instances
152201

153-
## Building
154202

155-
There are two ways to package this application: Parcel and WebPack.
203+
## Building
156204

157-
You can build the parcel version by running ``yarn run build-browser``
158-
You can build the webpack version by running ``yarn run build-browser-webpack``
205+
You can build the library by running `yarn run build` or `npm run build`
159206

160207
## Developing
161-
Use `yarn serve`
208+
209+
Use `yarn serve` or `npm run serve`
162210

163211
## Testing
164-
Use `yarn test`
212+
213+
Use `yarn test` or `npm run test`
165214

166215
## Update & Remove Data
167-
L.glify instances can be updated using the `update(data, index)` method.
216+
`L.glify` instances can be updated using the `update(data, index)` method.
168217
* `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.
169218
* `index` `{number}` An integer indicating the index of the element to be updated.
170219

171220
An object or some elements of an object are removed using the `remove(index)` method.
172-
* `index` `{number|Array}` optional - An integer or an array of integers specifying the indices of the elements to be removed.
221+
222+
- `index` `{number|Array}` optional - An integer or an array of integers specifying the indices of the elements to be removed.
223+
224+
- `index` `{number|Array}` optional - An integer or an array of integers specifying the indices of the elements to be removed.
173225
If `index` is not defined, the entire object is removed.
226+
227+
### Example
228+
```ts
229+
let newPoints = L.glify.points({
230+
map: leafletMap,
231+
data: geojsonFeatureCollection,
232+
size: 30
233+
});
234+
235+
// Update the third feature
236+
newPoints.update({
237+
"type": "FeatureCollection",
238+
"features": [{
239+
"type": "Feature",
240+
"properties": {},
241+
"geometry": {
242+
"type": "Point",
243+
"coordinates": [
244+
34.072204277521394
245+
-118.44255208969116
246+
]
247+
}
248+
}]
249+
}, 2);
250+
251+
// Now remove it
252+
newPoints.remove(2);
253+
```
174254

175255
## Contributors
176256

‎example.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import glify from './src/index';
66
const map = L.map('map')
77
.setView([50.00, 14.44], 7);
88

9-
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')
10-
.addTo(map);
11-
129
Promise.all([
1310
wget<number[][]>('data/86T.json'),
1411
wget<FeatureCollection>('data/CZDistricts.json'),

‎jest.config.json‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@
44
"coverageDirectory": "__coverage__",
55
"coverageProvider": "v8",
66
"globalSetup": "",
7-
"globals": {
8-
"ts-jest": {
9-
"tsconfig": "tsconfig.json"
10-
}
11-
},
127
"preset": "ts-jest/presets/js-with-ts",
138
"setupFiles": ["jest-webgl-canvas-mock"],
149
"testEnvironment": "jsdom",
1510
"transform": {
16-
"^.+\\.glsl": "jest-raw-loader"
17-
}
11+
"^.+\\.tsx?$": ["ts-jest", { "tsconfig": "tsconfig.json" }],
12+
"^.+\\.glsl": "@glen/jest-raw-loader"
13+
},
14+
"testMatch": ["**/tests/**/*.test.ts"]
1815
}

0 commit comments

Comments
 (0)