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
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
import { Map, TileLayer } from 'react-leaflet';
import Deflate from 'react-leaflet-deflate';
const geojson = {...};
<Map center={[2.935403, 101.448205]} 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 { Map, TileLayer, withLeaflet } from 'react-leaflet';
import DeflateDefault from 'react-leaflet-deflate';
const Deflate = withLeaflet(DeflateDefault);
const geojson = {...};
<Map center={[2.935403, 101.448205]} 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
Credits
- oliverroick and the other contributors to for the original work on
Leaflet.Deflate
. - clintharris for updating
react-leaflet-deflate
to reference Leaflet.Deflate
as an external dependency, support property changes, and work with react-leaflet
v2.
License
MIT License