react-leaflet-deflate

    2.2.1 • Public • Published

    react-leaflet-deflate

    version react-leaflet compatibility travis build dependencies peer dependencies issues downloads MIT License

    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.

    License

    MIT License

    Install

    npm i react-leaflet-deflate

    DownloadsWeekly Downloads

    101

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    159 kB

    Total Files

    6

    Last publish

    Collaborators

    • m_hasbie