react-leaflet-deflate
React wrapper of Leaflet.Deflate for react-leaflet.
Substitutes polygons and lines with markers when their screen size falls below a defined threshold.
Tested with React 16.5.2, Leaflet 1.3.4, React-Leaflet 1.9.1, React-Leaflet 2.0.1, Leaflet.Deflate 1.0.0-alpha.3
Demos
Version | Demo |
---|---|
react-leaflet@1.9.1 |
CodePen |
react-leaflet@2.x |
CodePen |
Installation
Install via NPM
npm install --save react-leaflet-deflate
react-leaflet-deflate
requires leaflet.markercluster
as peerDependency
(React, Leaflet, react-leaflet also should be installed)
npm install --save leaflet.markercluster
Usage example
react-leaflet v1
;; const geojson = ...; <Map center=2935403 101448205 zoom=10> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> <Deflate data=geojson minSize=10 markerCluster=true /></Map>
react-leaflet v2
;; // Import as DeflateDefault varconst Deflate = ; // wrap and pass to our Deflate variable. The rest of the code is the same as react-leaflet v1 example. const geojson = ...; <Map center=2935403 101448205 zoom=10> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> <Deflate data=geojson minSize=10 markerCluster=true /></Map>
Options
Option | Type | Default | Description |
---|---|---|---|
data |
object |
{} |
Required. A valid GeoJSON object. |
minSize |
int |
20 |
Defines the minimum width and height in pixels for a path to be displayed in its actual shape. |
markerOptions |
object or function |
{} |
Optional. Customize the markers of deflated features using Leaflet marker options. |
markerCluster |
boolean |
false |
Indicates whether markers should be clustered. Requires Leaflet.MarkerCluser . |
markerClusterOptions |
object |
{} |
Optional. Customize the appearance and behaviour of clustered markers using Leaflet.markercluster options. |
pointToLayer |
function |
{} |
Leaflet geojson pointToLayer options. |
style |
function |
{} |
Style to apply to polygons or lines. Leaflet geojson style options. |
onEachFeature |
function |
{} |
Function to execute on each geojson feature. Leaflet geojson onEachFeature options. |
filter |
function |
{} |
Filter function to apply to geojson features. Leaflet geojson filter options. |
Credits
- oliverroick and the other contributors to for the original work on
Leaflet.Deflate
. - clintharris for updating
react-leaflet-deflate
to referenceLeaflet.Deflate
as an external dependency, support property changes, and work withreact-leaflet
v2.
License
MIT License