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 19.2.0, Leaflet 1.9.4, React-Leaflet 5.0.0, React-Leaflet 4.0.0, Leaflet.Deflate 2.1.0

Demos

| Version | Demo | | --- | --- | | [email protected] | CodePen | | [email protected] | CodePen | | [email protected] | 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 v5

import { MapContainer, TileLayer } from 'react-leaflet';
import Deflate from 'react-leaflet-deflate';

const geojson = {...};

<MapContainer center={[2.935403, 101.448205]} zoom={10}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <Deflate
    data={geojson}
    minSize={10}
    markerCluster={true}
  />
</MapContainer>

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.markercluster. 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 reference Leaflet.Deflate as an external dependency, support property changes, and work with react-leaflet v2.

License

MIT License