Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rowanwins/leaflet-simplestyle
Extends L.geoJSON to support the simplestyle spec with 1kb
https://github.com/rowanwins/leaflet-simplestyle
Last synced: 11 days ago
JSON representation
Extends L.geoJSON to support the simplestyle spec with 1kb
- Host: GitHub
- URL: https://github.com/rowanwins/leaflet-simplestyle
- Owner: rowanwins
- License: other
- Created: 2019-12-16T03:22:43.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T00:04:53.000Z (over 2 years ago)
- Last Synced: 2024-10-22T17:57:35.096Z (17 days ago)
- Language: JavaScript
- Homepage: https://rowanwins.github.io/leaflet-simplestyle/example/basic.html
- Size: 127 KB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# leaflet-simplestyle
Extends [`L.geoJSON`](https://leafletjs.com/reference-1.3.4.html#geojson) to support the [simplestyle](https://github.com/mapbox/simplestyle-spec) spec.
[Check out the demo](https://rowanwins.github.io/leaflet-simplestyle/example/basic.html)
### Installing
````
npm install leaflet-simplestyle
````
### Usage
**Step 1.** Include the library after you've included leafletjs.
```
require('leaflet-simplestyle')
// or
// or via CDN
```
**Step 2.** Set the `useSimpleStyle` option to `true` when adding your [`L.geoJSON`](https://leafletjs.com/reference-1.3.4.html#geojson) layer.
You can also chose whether to support the [Maki Icon Library](https://github.com/mapbox/maki) using the `useMakiMarkers` property, this enables support for the `marker-symbol` property, however it does require calling the Mapbox API. If `useMakiMarkers=false` an inline SVG icon is still available which adjusts size and color.
````
const rect = {
"type": "Feature",
"properties": {
"fill": "yellow"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
10.45007,
-10.359502
],
...
[
10.45007,
-10.359502
]
]
]
}
},
L.geoJSON(rect, {
useSimpleStyle: true,
useMakiMarkers: true
}).addTo(map);
````
### Methods
- `useSimpleStyle()`, adds simple styling to a `L.geoJSON` object
- `discardSimpleStyle()`, Removes simple styling from a `L.geoJSON` object
- `toggleMakiMarkers()`, Toggles the maki marker styling on a `L.geoJSON` object
For example
````
const myLayer = L.geoJSON(rect, {
useSimpleStyle: false
}).addTo(map);
myLayer.useSimpleStyle()
````
### Acknowledgements
This borrows some of the code in the excellent [mapbox.js](https://github.com/mapbox/mapbox.js) library.