Markers do not align to the point.

[prakashsvmx]

const sourcePoint =[55.1953125,24.686];
const destPoint = [78.662109375,13.23];

const data =  {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      sourcePoint,
      destPoint,
    ]
  }
};

export default class MapBoxMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        zoom: 2,
        latitude: sourcePoint[1],
        longitude: sourcePoint[0],
        bearing: 0,
        pitch: 0,
        width: 360,
        height: 360,
        fitBounds:true,
        interactive:false,
      }
    };
  }
  render() {
    const {viewport} = this.state;
    return (

      <MapGL
        style={{ width: '100%', height: '400px' }}
        accessToken={TOKEN}
        onViewportChange={(viewport) => this.setState({ viewport })}
        {...viewport}
      >


        <Source id="route" type="geojson" data={data} />
        <Layer
          id="route"
          type="line"
          source="route"
          layout={{
            'line-join': 'round',
            'line-cap': 'round'
          }}
          paint={{
            'line-color': '#888',
            'line-width': 2
          }}
        />


        <Marker
          latitude={destPoint[1]}
          longitude={destPoint[0]}
        >
          <div>Chennai 👋</div>
        </Marker>

        <Marker
          latitude={sourcePoint[1]}
          longitude={sourcePoint[0]}
        >
          <div>Dubai 👋</div>
        </Marker>
      </MapGL>

[JaLe29]

Same for me, also not working.

and... marker is floating over the map while I am scrolling

video: https://recordit.co/f8qEwFDqeC

[JaLe29]

@prakashsvmx
I have this issue also after code splitting (using react lazy). Try to include css styles

import 'mapbox-gl/dist/mapbox-gl.css'

[stepankuzmin]

Hi @prakashsvmx @JaLe29

Could you please provide a reproducible example for this issue? For example on https://codesandbox.io

[MicaellyUS]

Has anyone managed to solve it?

[MicaellyUS]

The problem was corrected by making the following changes to index.html:

at the head: <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

at the body: <script> mapboxgl.accessToken = "INSERT KEY"; var map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", // stylesheet location center: [-74.5, 40], // starting position [lng, lat] zoom: 9, // starting zoom }); </script>