CODEWITHSUNDEEP
reactjsgeojsonmapbox-gl-js
Soyol A
Soyol A

Reputation: 11

React MapboxGL rendering issue with function component

I'm very new at programming and react. Currently trying to bring a layer to MapboxGL Map but I become error msg it says:

'mapContainer' is not defined no-undef

What am I doing wrong?

import React, {useEffect} from 'react';
import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'PUBLIC TOKEN'

 const getMap = () => {
return new mapboxgl.Map({
  container: mapContainer,
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [9, 47],
  zoom: 10
});



  const Map = () => {
    useEffect(() => {
      const map = getMap();

  map.on('move', () => {
    this.setState({
      lng: map.getCenter().lng.toFixed(4),
      lat: map.getCenter().lat.toFixed(4),
      zoom: map.getZoom().toFixed(0)
    });
  });

  map.on('load', () => {
    map.addLayer({
      id: 'streets',
      type: 'line',
      source: {
        type: 'geojson',
        data:
          'http://someWFSAPIdata=application/json'
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#08363e',
        'line-width': 0.8
      }
    });
  });
}, []);

And rendering as followed

 return (
    <div>
      <div ref={el => (this.mapContainer = el)} className='mapContainer' />
      <h1>Hello there geoReact</h1>
    </div>
  );

Since I'm using functional component no longer need to render but I'm not sure what is wrong with it.

Thanks a lot

Upvotes: 0

Views: 366

Answers (1)

Soyol A
Soyol A

Reputation: 11

I found this explanation which was very helpful for my case

https://sparkgeo.com/blog/build-a-react-mapboxgl-component-with-hooks/

Upvotes: 1

Related Questions