React-leaflet-deflate NPM

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

Example

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

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='&copy; <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';	// Import as DeflateDefault var
const Deflate = withLeaflet(DeflateDefault);		// wrap and pass to our Deflate variable. The rest of the code is the same as react-leaflet v1 example.

const geojson = {...};

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