Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Markers do not align to the point.

See original GitHub issue

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>

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

JaLe29commented, Jan 23, 2020

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

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

0reactions

MicaellyUScommented, Oct 9, 2020

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>