Red marker not showing on Mapbox map after flyTo – location updates, but marker is invisible

Nobody has claimed this yet.

Hey everyone — I’m pretty new to web dev and working on a Next.js app with React and Mapbox GL.

I’ve got a basic map setup that starts centered on a default location. When the user clicks a button, it uses the browser’s geolocation to get their current position, flies the map there, and is supposed to show a big red marker at that location.

So far, I’ve:

Initialized the map and added zoom controls

Created a custom red marker element (using a styled div)

Used navigator.geolocation.getCurrentPosition to get the user's location

Verified that the map flies to the right spot

Verified that the marker gets updated with .setLngLat()

Confirmed in DevTools that the marker’s DOM element exists, has the right styles, and is being added to the map

The problem is: the marker just doesn’t show up visually on the map, even though everything else seems to be working. I've tried tweaking styles like z-index, opacity, and size, but still nothing appears on the map itself.

navigator.geolocation.getCurrentPosition(
(position) => {
const { longitude, latitude } = position.coords;

map.flyTo({ center: [longitude, latitude], zoom: 14 });
marker.setLngLat([longitude, latitude]);
},
(error) => {
alert("Could not get your location");
},
{ enableHighAccuracy: true }
);

If anyone’s run into something like this or has tips on what I might be missing (especially around how Mapbox GL handles custom markers), I’d really appreciate the help.

The issue names no mapbox-gl-js file, test, or repository entry point, and provides no repository-level reproduction beyond an application snippet. Start by checking whether the behavior can be reproduced in mapbox-gl-js itself; the issue needs a minimal reproduction and a defined expected marker-rendering outcome before work can be considered done.

Written by the indexing model from the issue text.