CODEWITHSUNDEEP
reactjsreact-hooksmapbox-gl-js
Kyle
Kyle

Reputation: 190

Geojson Data Not Displaying in Mapbox GL JS

The geojson data I'm importing in a React ref hook isn't displaying. I have the .geojson file in my project folder. I expect to see red circles representing the coordinates of the geojson data. I tried wrapping it in a map.on, and substituted different kinds of events like 'load' and 'style.load' but still nothing shows up. The data does however show up when I upload it to MapboxStudio, so I expect it's something wrong with my code and not the geoJSON data.

export default function App() {
  const mapContainer = React.useRef<any>(null);
  // const map = React.useRef<mapboxgl.Map | null>(null);
  const [lng, setLng] = React.useState<number>(-74.0632);
  const [lat, setLat] = React.useState<number>(40.7346);
  const [zoom, setZoom] = React.useState<number>(12);
  
  React.useEffect(() => {
    // if (map) return;
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: zoom
    });
    map.on('style.load', function () {
      // if (!map) return;
      map.addSource('propertyData', {
        type: 'geojson',
        data: './jersey_city_HA.geojson'
      });
      map.addLayer({
        id: 'property-layer',
        source: 'propertyData',
        type: 'circle',
        paint: {
          'circle-radius': 8,
          'circle-color': 'red'
        }
      });
    });
  });

Upvotes: 0

Views: 1059

Answers (1)

Kyle
Kyle

Reputation: 190

I solved this by replacing the path to the local data with the url to the same data but on my GitHub. 🤷🏼‍♂️

Upvotes: 1

Related Questions