# react-leaflet-vectorgrid [![version](https://img.shields.io/npm/v/react-leaflet-vectorgrid.svg?style=plastic)](http://npm.im/react-leaflet-vectorgrid) [![react-leaflet compatibility](https://img.shields.io/npm/dependency-version/react-leaflet-vectorgrid/peer/react-leaflet.svg?style=plastic)](https://github.com/mhasbie/react-leaflet-vectorgrid) [![travis build](https://img.shields.io/travis/mhasbie/react-leaflet-vectorgrid.svg?style=plastic)](https://travis-ci.org/mhasbie/react-leaflet-vectorgrid) [![dependencies](https://img.shields.io/david/mhasbie/react-leaflet-vectorgrid.svg?style=plastic)](https://david-dm.org/mhasbie/react-leaflet-vectorgrid) [![peer dependencies](https://img.shields.io/david/peer/mhasbie/react-leaflet-vectorgrid.svg?style=plastic)](https://david-dm.org/mhasbie/react-leaflet-vectorgrid?type=peer) [![issues](https://img.shields.io/github/issues/mhasbie/react-leaflet-vectorgrid.svg?style=plastic)](https://github.com/mhasbie/react-leaflet-vectorgrid/issues) [![downloads](https://img.shields.io/npm/dt/react-leaflet-vectorgrid.svg?style=plastic)](http://npm-stat.com/charts.html?package=react-leaflet-vectorgrid&from=2018-01-01) [![MIT License](https://img.shields.io/npm/l/react-leaflet-vectorgrid.svg?style=plastic)](http://opensource.org/licenses/MIT) React wrapper of [Leaflet.VectorGrid](https://github.com/Leaflet/Leaflet.VectorGrid) for [react-leaflet](https://github.com/PaulLeCam/react-leaflet). Display gridded vector data (sliced [GeoJSON](http://geojson.org/), [TopoJSON](https://github.com/mbostock/topojson/wiki) or [protobuf vector tiles](https://github.com/mapbox/vector-tile-spec)) in [Leaflet](http://www.leafletjs.com) 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`](https://jsfiddle.net/m_hasbie/rnx44us3/), [`CodePen`](https://codepen.io/m_hasbie/full/jzpbwj/) | Sliced GeoJSON | | react-leaflet@2.1.4 | [`JSFiddle`](http://jsfiddle.net/m_hasbie/Lkp96dj3/), [`CodePen`](https://codepen.io/m_hasbie/full/jvgyPq/) | Sliced GeoJSON | ## Installation ### Install via NPM ```bash npm install --save react-leaflet-vectorgrid ``` `react-leaflet-vectorgrid` requires `lodash` as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies) (React, PropTypes, Leaflet, react-leaflet also should be installed) ```bash npm install --save lodash ``` ## Usage example ### Slicer ```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) => `

${layer.properties.NAME}

`, 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](http://geojson.org/geojson-spec.html). `type` | `String` | `'slicer'`| Decides between using [VectoGrid.Slicer](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#vectorgrid-slicer) and [VectorGrid.Protobuf](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#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 ```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](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#vectorgrid-slicer) and [VectorGrid.Protobuf](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#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](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids) 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](https://react-leaflet.js.org/docs/en/context.html) 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](https://github.com/Leaflet/Leaflet.VectorGrid/graphs/contributors) and [everyone who contributed to this project](https://github.com/mhasbie/react-leaflet-vectorgrid/graphs/contributors). # License MIT License

react-leaflet-vectorgrid

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past