react-leaflet-vectorgrid
v2.2.1
Published
React wrapper of Leaflet.VectorGrid. Display gridded vector data (sliced GeoJSON, TopoJSON or protobuf vector tiles).
Downloads
4,578
Maintainers
Readme
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 |
| --- | --- | --- |
| [email protected] | JSFiddle
, CodePen
| Sliced GeoJSON |
| [email protected] | 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='© <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='© <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