GeoJSON Objects Not Appearing on Mapbox Map in React App

Question

I am working on a React.js application where I need to display GeoJSON objects on a Mapbox map. The map initializes correctly, but the GeoJSON objects do not appear. Here is the relevant part of my code:

useEffect(() => {
  if (map.current) return; // Prevent reinitializing

  map.current = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-97.328, 35.204],
    zoom: zoomLevel
  });

  console.log("THIS APPEARS IN CONSOLE");

  // Wait to do anything until after the map is loaded
  map.current.on('load', () => {
    console.log("THIS DOES NOT APPEAR IN CONSOLE");

    // Add the GeoJSON data as a source
    map.current.addSource('featureData', {
      type: 'geojson',
      data: 'features.geojson' // Update this path to your GeoJSON file
    });

    console.log("NEITHER DOES THIS")

    // Add a layer to display the features
    map.current.addLayer({
      id: 'initialfeatures',
      type: 'symbol',
      source: 'featureData',
      layout: {
        'icon-image': 'airport-15',
        'icon-allow-overlap': true,
        'icon-size': 2
      }
    });
  });
}, []);

And here is an example of my geojson file (it only has 4 objects in it for this test).

  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [35.22242612285483, -97.43936146979259]
      },
      "properties": {
        "object": "traffic signal"

Here are some things I tried: Ensuring the mapContainerRef is correctly referenced. Checking for errors before the 'load' event. Ensured that my geojson file is in the right location (it's in the "public" folder, housed in the same folder as the src folder) Verifying the Mapbox access token. Inspecting network requests for any failed requests (NOTE: the request to load my file was not in network)

Answer 1

Hey @Stefj There are a few things wrong with the code you have.

1. Your source data is not properly formatted.
2. You are using the symbol type for your addLayer and using the icon-image property which requires an image sprite but you don't have a sprite defined in your style spec.
3. The coordinates in your data source are reversed and Mapbox will error when trying to use a latitude that doesn't exist (latitude should be between 90 and -90)

For #1 - The object you feed the data: prop in your addSource call should look like this..

{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-97.43936146979259, 35.22242612285483]
    },
    "properties": {
      "title": "Mapbox HQ",
      "marker-symbol": "monument"
    }
}

And should not include 'Feature Collection' and 'features'. See more about the spec for GeoJSON sources

I've setup an example using your code, and instead of using an image sprite I created a circle layer with a paint property to draw a point where you wanted your icon-image. Have a look at that demo here

I'm not sure why you didn't see those console log statements inside the map.current.on('load) block. They showed up fine for me (see the demo).