[Markers] My markers move strangly, I don't understand why

[kevin-riou-technis]

Hey,

I try to setup react-mapbox in my project, but I got something strange with a simple code, if any of you know how to fix it I love to get the answer, don't want to do mapbox natively or move to leaflet 😉

My code is this one:

import React, { FC, useState } from 'react';
import Map, { Marker } from 'react-map-gl';

import { InteractiveMapMarker } from './InteractiveMap.types';

// Don't pay attention to this interface, it's for the use case
interface InterfaceMapProps {
  markers: InteractiveMapMarker[]
}

export const InteractiveMap: FC<InterfaceMapProps> = () => {
  const [lng, setLng] = useState(3.6298);
  const [lat, setLat] = useState(46.9711);
  const [zoom, setZoom] = useState(3.76);

  return <>
    <Map
        customAttribution="rfs"
        initialViewState={{
          longitude: lng,
          latitude: lat,
          zoom: zoom,
          pitch: 0,
        }}
        mapboxAccessToken="<verified_access_token>"
        mapStyle="mapbox://styles/mapbox/streets-v12"
        style={{
          width: 700,
          height: 400
        }}
      >
        <Marker anchor="bottom" latitude={48.849460} longitude={2.369660} pitchAlignment='viewport' style={{ height: 30, width: 30 }} >
          <img height={30} src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Map_marker.svg/1200px-Map_marker.svg.png" width={30} />
        </Marker>
      </Map>
  </>;
};

| The component is mounted in a div with flex styles

And the result is here (In a vite-storybook):
Video on youtube

Does one of you already found this ?
Kev

[kevin-riou-technis]

I found the solution, I need to import mapbox-gl css manually

import 'mapbox-gl/src/css/mapbox-gl.css';

I close this discussion 😉