Marker outside Map although they have same center #2372

thanosoncode · 2024-04-09T08:49:27Z

thanosoncode
Apr 9, 2024

Any ideas why Marker is outside Map although they have same lng and lat? I had the same issue when importing Map and Marker directly from react-map-gl

import React, { useLayoutEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = process.env.MAPBOX_ACCESS_TOKEN!;

const SomeMap = () => {
  const ref = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const map = new mapboxgl.Map({
      container: ref.current!,
      style: 'mapbox://styles/mapbox/dark-v10',
      center: [12.567898, 55.67583],
      zoom: 9,
      
    });

    new mapboxgl.Marker().setLngLat([12.567898, 55.67583]).addTo(map);
  }, []);

  return <div ref={ref}></div>;
};

export default SomeMap;