React-leaflet-vectorgrid NPM

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