react-leaflet-vectorgrid

react-leaflet-vectorgrid

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
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