Vfrdtyky

following the answer in this page :
Render mapbox vector tiles inside react-leaflet?

When i export MapBoxGLLayer and import it to my main class,

like

import MapBoxGLLayer from './MapBoxGLLayer';

and try to access it in my render function, like:

<Map>

  <MapBoxGLLayer

    accessToken={MAPBOX_ACCESS_TOKEN}

    style='https://style.example.com/style.json'

  />

</Map>

i'm getting this error which is pretty consistent.

MapLayer.js:77 Uncaught TypeError: Cannot read property 'layerContainer' of undefined

at VectorgridLayer.get (MapLayer.js:77)

at VectorgridLayer.componentDidMount (MapLayer.js:38)

There is no leaflet to the props.

I don't know what am I doing wrong here.

Taking hints from the answer you mentioned, I was able to get it working.

Your MapBoxGLLayer.js

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);

  }

}



export default withLeaflet(MapBoxGLLayer);  

The missing thing was the withLeaflet HOC.

Usage:

npm i mapbox-gl-leaflet  

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

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>

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



// Import the MapBoxGLLayer component mentioned above.

class App extends Component {

  state = {

    center: [51.505, -0.091],

    zoom: 13

  };



  render() {

    return (

      <div>

        <Map center={this.state.center} zoom={this.state.zoom}>

          <MapBoxGLLayer

            accessToken={MAPBOX_ACCESS_TOKEN}

            style="mapbox://styles/mapbox/streets-v9"

          />

        </Map>

      </div>

    );

  }

}  

You can find the working example here:https://codesandbox.io/s/ooypokn26y
Add your own mapbox token to see it working.

It seems to be a bug in mapbox-gl-leaflet version 0.0.3 that is the "latest" in npm and was released two years ago.

onRemove: function (map) {

    if (this._map.options.zoomAnimation) {

        L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);

    }



    map.getPanes().tilePane.removeChild(this._glContainer);

    this._glMap.remove();

    this._glMap = null;

}

The object this.map._proxy is not defined. Solution is to disable zoom animations with zoomAnimation={false} in the React Map Component. Then the branch is not taken in mapbox-gl-leaflet and you won't get this error.

This problem is solved in the master branch of mapbox-gl-leaflet in GitHub:
https://github.com/mapbox/mapbox-gl-leaflet/blob/954875e2e4269db313c99d522689bc08f4aadad2/leaflet-mapbox-gl.js

So try to update you libs.