Feature request: add support for VectorGrid

[stereobooster]

Trying to get Leaflet.VectorGrid support. Not successful so far.

Maybe you can give me some advices and I will do PR.

Related: Leaflet/Leaflet.VectorGrid#37

[stereobooster]

Found solution

// @flow

import L from 'leaflet';
import {} from 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js'
import PropTypes from 'prop-types';
import { childrenType, GridLayer } from 'react-leaflet';

export default class VectorgridLayer extends GridLayer {
  static propTypes = {
    children: childrenType,
    opacity: PropTypes.number,
    url: PropTypes.string.isRequired,
    zIndex: PropTypes.number,
  };

  createLeafletElement(props: Object): Object {
    const { url, ...options } = props;

    return L.vectorGrid.protobuf(url, options);
  }

  updateLeafletElement(fromProps: Object, toProps: Object) {
    super.updateLeafletElement(fromProps, toProps);
    if (toProps.url !== fromProps.url) {
      this.leafletElement.vectorGrid.protobuf(toProps.url);
    }
  }
}

Example:

<Map>
  <VectorgridLayer
    url= "https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}"
    attribution='© <a href="https://www.mapbox.com/about/maps/" target="_blank">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
  />
</Map>

[stereobooster]

Also if anybody needs MapBoxGL integration:

// @flow

import L from 'leaflet'
import {} from 'mapbox-gl-leaflet'
import PropTypes from 'prop-types'
import { childrenType, GridLayer } from 'react-leaflet'

export default class MapBoxGLLayer extends GridLayer {
  static propTypes = {
    children: childrenType,
    opacity: PropTypes.number,
    accessToken: PropTypes.string.isRequired,
    style: PropTypes.string,
    zIndex: PropTypes.number,
  }

  createLeafletElement(props: Object): Object {
    return L.mapboxGL(props)
  }
}

depends on:

<script src='https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css' rel='stylesheet' />

yarn add mapbox-gl-leaflet

Compared Leaflet.VectorGrid, OpenLayers and MapBoxGL. Only MapBoxGL feels fast.

[bardiaombre]

@stereobooster on your mapbox-gl, i cannot access childrenType as of react-leaflet 1.1. any solution to how to fix it.

[JensC]

@bardiaombre yes, I have the same problem. I can not update to react-leaflet v2 since it depends on React 16.x. Any solution would be great.

[Naseer-Ahmad]

Getting error in V3.1.0 "Attempted import error: 'GridLayer' is not exported from 'react-leaflet'."