How to use Mapbox effectively in code splitting environment

help
1

I am confused on how to organize the mapbox code within react component. As for now here how I use it

import { Component } from 'react'

Meteor.startup(function() {
  Mapbox.load({
    gl: true
  });
});

Tracker.autorun(function () {
  if (Mapbox.loaded()) {
    if (!mapboxgl.supported()) {
      alert('Your browser does not support Mapbox GL');
    } else {
      mapboxgl.accessToken = Meteor.settings.public.accessToken;
      var map = new mapboxgl.Map({
        container: 'map',
        zoom: 13,
        style: 'mapbox://styles/mapbox/streets-v8',
        hash: false,
        center: [101.511249, 3.156924]
      });
      
      map.on('style.load', function () {
        console.log(Right);
        map.addControl(new mapboxgl.Navigation({position: 'bottom-left'}));   
        map.addSource("markers", {
            "type": "geojson",
            "data": Right.props.data
        });

        map.addLayer({
            "id": "markers",
            "type": "symbol",
            "source": "markers",
            "layout": {
                "icon-image": "marker-15",
                "text-field": "{title}",
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 0.6],
                "text-anchor": "top"
            }
        });
      });

      map.on('click', function (e) {
          var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
          if (features.length) {
              map.flyTo({center: features[0].geometry.coordinates});
          }
      });


      // Use the same approach as above to indicate that the symbols are clickable
      // by changing the cursor style to 'pointer'.
      map.on('mousemove', function (e) {
          var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
          map.getCanvas().style.cursor = features.length ? 'pointer' : '';
      });
    }
  }
});

export default class Right extends Component {
  render() {
    return (
      <div className="column for-map">
        <div id="map" className="map_canvas mapbox"></div>
      </div>
    );
  }
};

my problem is how do I get this.props.data inherited from parent component and use it within Tracker. Did I do wrong in organize the react component

1 Like