CODEWITHSUNDEEP
javascriptreactjsmapboxmapbox-gl-js
wanggchungg
wanggchungg

Reputation: 41

Cannot get map markers to render in Mapbox React map

Trying to render some markers to my mapbox map, but cannot seem to get the markers to render. I suspect it's in the .addTo method, but I cannot figure what else I would pass in. I've tried this.mapContainer, document.getElementById('app') (my main div), and this.map, but none of them render the markers. Wondering if it is the argument I'm passing into .addTo or something else. 

    componentDidMount() {
      const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
      });

      //get geojson data
      fetch('/geojson')
      .then(res => res.json())
      .then(data => {
        this.createMarkers(map, data);
      })
   }

    createMarkers(map, jsonData) {
      jsonData.features.forEach(marker => {
      let el = document.createElement('div');
      el.className = 'marker';

      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
        .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
        .addTo(map);
      })
    }

    render() {
      return (
        <div>
          <div ref={el => this.mapContainer = el} className="mapContainer" />
        </div> 
      )
    }

Upvotes: 1

Views: 991

Answers (1)

wanggchungg
wanggchungg

Reputation: 41

Fixed: in my CSS, had to have it as .mapboxgl-marker, not just marker

Upvotes: 1

Related Questions