search

mhasbie / react-leaflet-vectorgrid

React wrapper of Leaflet.VectorGrid. Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet.
MIT License
19 stars 10 forks source link

readme

react-leaflet-vectorgrid

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

React wrapper of Leaflet.VectorGrid for react-leaflet.

Display gridded vector data (sliced GeoJSON, TopoJSON or protobuf vector tiles) in Leaflet 1.0.0

Tested with Leaflet 1.3.4 and React-Leaflet 1.9.1, React-Leaflet 2.1.4

Demos

Version Demo Description
react-leaflet@1.9.1 JSFiddle, CodePen Sliced GeoJSON
react-leaflet@2.1.4 JSFiddle, CodePen Sliced GeoJSON

Installation

Install via NPM

npm install --save react-leaflet-vectorgrid

react-leaflet-vectorgrid requires lodash as peerDependency

(React, PropTypes, Leaflet, react-leaflet also should be installed)

npm install --save lodash

Usage example

Slicer

import { Map, TileLayer } from 'react-leaflet';
import VectorGrid from 'react-leaflet-vectorgrid';

const options = {
    type: 'slicer',
    data: {geojson},
    idField: 'OBJECTID',
    tooltip: 'NAME',
    popup: (layer) => `<div>${layer.properties.NAME}</div>`,
    style: {
        weight: 0.5,
        opacity: 1,
        color: '#ccc',
        fillColor: '#390870',
        fillOpacity: 0.6,
        fill: true,
        stroke: true
    },
    hoverStyle: {
        fillColor: '#390870',
        fillOpacity: 1
    },
    activeStyle: {
        fillColor: '#390870',
        fillOpacity: 1
    },
    zIndex: 401
};

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

  <VectorGrid {...options} onClick={this.onClick} />
</Map>

Options

Option Type Default Description
data Object {} Required when using type slicer. A valid GeoJSON FeatureCollection object.
type String 'slicer' Decides between using VectoGrid.Slicer and VectorGrid.Protobuf. Available options: slicer, protobuf.
idField String '' A unique identifier field in the vector feature.
tooltip String function undefined Show tooltip on vector features. Set to feature properties name to use that properties value as tooltip. Or pass a function that will return a string. e.g. function(feature) { return feature.properties.NAME; }
popup Function undefined Similar to tooltip, this props will be passed to leaflet bindPopup function to create popup for vector features.
style Object undefined Apply default style to all vector features. Use this props when not using vectorTileLayerStyles
hoverStyle Object undefined Style to apply to features on mouseover event.
activeStyle Object undefined Style to apply to features on click event. Can be use to show user selection when feature is clicked. Double click to clear selection.
zIndex Integer undefined Sets the VectorGrid z-index.
interactive Boolean true Whether VectorGrid fires Interactive Layer events.
onClick Function undefined Listens to VectorGrid click events. interactive option must be set to true.
onMouseover Function undefined Listens to VectorGrid mouseover events. interactive option must be set to true.
onMouseout Function undefined Listens to VectorGrid mouseout events. interactive option must be set to true.
onDblclick Function undefined Listens to VectorGrid dblclick events. interactive option must be set to true.

Protobuf

import { Map, TileLayer } from 'react-leaflet';
import VectorGrid from 'react-leaflet-vectorgrid';

const options = {
    type: 'protobuf',
    url: 'https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}'
    vectorTileLayerStyles: { ... },
    subdomains: 'abcd',
    key: 'abcdefghi01234567890'
};

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

  <VectorGrid {...options} />
</Map>

Options

Option Type Default Description
type String 'slicer' Decides between using VectoGrid.Slicer and VectorGrid.Protobuf. Available options: slicer, protobuf.
url String '' Required when using type protobuf. Pass a url template that points to vector tiles (usually .pbf or .mvt).
subdomains String 'abc' Akin to the subdomains option to L.TileLayer.
accessKey String '' Tile server access key.
accessToken String '' Tile server access token.
vectorTileLayerStyles Object undefined A data structure holding initial symbolizer definitions for the vector features. Refer Leaflet.VectorGrid doc for more info.

Usage with React-Leaflet v2

This is compatible with version 2 of React-Leaflet, but you have to wrap the VectorGrid using the withLeaflet higher-order component to give it access to the new context mechanism. For example:

import { Map, withLeaflet } from 'react-leaflet';
import VectorGridDefault from 'react-leaflet-vectorgrid';

// wrap the VectorGrid component using `withLeaflet` HOC
const VectorGrid = withLeaflet(VectorGridDefault);

// use <VectorGrid /> component as you would use it in react-leaflet v1

Credits

Credits goes to all the contributors of the original work and everyone who contributed to this project.

License

MIT License