My goal is to have my markers standing like pillars at 90 degrees to the Mapbox map.

Like this:

I got this from .gl

Currently I have this code to add a Marker but it doesn't work.

      const customMarker = document.createElement("div");
      const backGroundColor = theme == "dark" ? "bg-white/90" : "bg-black/90";
      customMarker.className = "w-2 h-20 rounded-full" + " " + backGroundColor;

      if (!device.location?.longitude || !device.location?.latitude) return;

      new mapboxgl.Marker({
        element: customMarker,
        pitchAlignment: "map",
        rotationAlignment: "map"
      })
        .setLngLat([device.location?.longitude, device.location?.latitude] as [
          number,
          number
        ])
        .setRotation(45)
        .addTo(mapRef.current!);

This renders the markers like this:

My goal is to have my markers standing like pillars at 90 degrees to the Mapbox map.

Like this:

I got this from https://github/vasturiano/globe.gl

Currently I have this code to add a Marker but it doesn't work.

      const customMarker = document.createElement("div");
      const backGroundColor = theme == "dark" ? "bg-white/90" : "bg-black/90";
      customMarker.className = "w-2 h-20 rounded-full" + " " + backGroundColor;

      if (!device.location?.longitude || !device.location?.latitude) return;

      new mapboxgl.Marker({
        element: customMarker,
        pitchAlignment: "map",
        rotationAlignment: "map"
      })
        .setLngLat([device.location?.longitude, device.location?.latitude] as [
          number,
          number
        ])
        .setRotation(45)
        .addTo(mapRef.current!);

This renders the markers like this:

• reactjs
• mapbox
• mapbox-gl-js
• mapbox-marker

1 Answer 1

Setting the rotationAlignment property to "horizon" should give you the expected result. Orient markers toward the horizon.