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
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
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>
import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import Deflate from 'react-leaflet-deflate';
const WrappedDeflate = withLeaflet(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'
/>
<WrappedDeflate
data={geojson}
minSize={10}
markerCluster={true}
/>
</Map>
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. |
- 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.
MIT License