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
| Version | Demo | Description |
|---|---|---|
| react-leaflet@1.9.1 | JSFiddle, CodePen | Sliced GeoJSON |
| react-leaflet@2.1.4 | JSFiddle, CodePen | Sliced GeoJSON |
npm install --save react-leaflet-vectorgridreact-leaflet-vectorgrid requires lodash as peerDependency
(React, PropTypes, Leaflet, react-leaflet also should be installed)
npm install --save lodashimport{Map,TileLayer}from'react-leaflet';importVectorGridfrom'react-leaflet-vectorgrid';constoptions={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};<Mapcenter={[2.935403,101.448205]}zoom={4}><TileLayerurl="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/><VectorGrid{...options}onClick={this.onClick}/></Map>| 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 VectorGridclick events. interactive option must be set to true. |
onMouseover | Function | undefined | Listens to VectorGridmouseover events. interactive option must be set to true. |
onMouseout | Function | undefined | Listens to VectorGridmouseout events. interactive option must be set to true. |
onDblclick | Function | undefined | Listens to VectorGriddblclick events. interactive option must be set to true. |
import{Map,TileLayer}from'react-leaflet';importVectorGridfrom'react-leaflet-vectorgrid';constoptions={type: 'protobuf',url: 'https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}'vectorTileLayerStyles: { ... },subdomains: 'abcd',key: 'abcdefghi01234567890'
};<Mapcenter={[2.935403,101.448205]}zoom={4}><TileLayerurl="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/><VectorGrid{...options}/></Map>| 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. |
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';importVectorGridDefaultfrom'react-leaflet-vectorgrid';// wrap the VectorGrid component using `withLeaflet` HOCconstVectorGrid=withLeaflet(VectorGridDefault);// use <VectorGrid /> component as you would use it in react-leaflet v1Credits goes to all the contributors of the original work and everyone who contributed to this project.
MIT License