Render mapbox vector tiles inside react-leaflet?

Question

Is there a way to use vector tiles from react-leaflet?

I am aware of Leaflet.VectorGrid, but it is not written for react-leaflet?

Answer 1

For react-leaflet v2, export the MapBoxGLLayer component wrapped with HOC withLeaflet() to get it working.

Steps:

1.Install mapbox-gl-leaflet.

npm i mapbox-gl-leaflet 

2.Add mapbox-gl js and css to index.html

3.Add this component.

import L from "leaflet";
import {} from "mapbox-gl-leaflet";
import PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";

class MapBoxGLLayer extends GridLayer {
  createLeafletElement(props) {
    return L.mapboxGL(props);
  }
}

/*
* Props are the options supported by Mapbox Map object
* Find options here:https://www.mapbox.com/mapbox-gl-js/api/#new-mapboxgl-map-options-
*/
MapBoxGLLayer.propTypes = {
  accessToken: PropTypes.string.isRequired,
  style: PropTypes.string
};

MapBoxGLLayer.defaultProps = {
  style: "mapbox://styles/mapbox/streets-v9"
};

export default withLeaflet(MapBoxGLLayer);   

4.Use the MapBoxGLLayer component.

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      

        
      
    );
  }
}

Find the working code here (Add your own mapbox token): https://codesandbox.io/s/ooypokn26y