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

$3

``bash
npm install --save react-leaflet-vectorgrid
`

react-leaflet-vectorgrid requires lodash as peerDependency

(React, PropTypes, Leaflet, react-leaflet also should be installed)
`bash
npm install --save lodash
`

Usage example

$3

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

const options = {
type: 'slicer',
data: {geojson},
idField: 'OBJECTID',
tooltip: 'NAME',
popup: (layer) => ,
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
};


`

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

$3

`javascript
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'
};


`

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

$3

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:

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

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

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