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)
Hey @Stefj There are a few things wrong with the code you have.
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.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).