Hello everyone, I'm trying to fix a bug on a project where I'm connecting differents cities around the world by their coord.
The problem, as the images shows, is that one city always (or almost always) shows an extra horizontal line like going around the world. But if i change the longitude to a value higher than -64 it desapears (second image).
Expected Behavior
From one city must be a unique line connecting to another city and I don't understand why changing coordinates from -70 to -64 this horizontal line desappers without touching any code, just the value olf longitude.
// If i change longitude to -64 the extra horizontal line shown in the image desappears (It's the idea but now my point it isn't on the right place...
const routes = [
{latitude: -33.4018874, longitude: -70.6836888},
Description
Hello everyone, I'm trying to fix a bug on a project where I'm connecting differents cities around the world by their coord. The problem, as the images shows, is that one city always (or almost always) shows an extra horizontal line like going around the world. But if i change the longitude to a value higher than -64 it desapears (second image).
Expected Behavior
From one city must be a unique line connecting to another city and I don't understand why changing coordinates from -70 to -64 this horizontal line desappers without touching any code, just the value olf longitude.
Steps to Reproduce
import React from 'react';
import MapComponent from '.';
export default { title: 'Molecules/Map' }
const initialViewport = { width: '100vw', height: '100vh', latitude: -34.60354460048582, longitude: -58.381602588161755, zoom: 11 }
// If i change longitude to -64 the extra horizontal line shown in the image desappears (It's the idea but now my point it isn't on the right place... const routes = [ {latitude: -33.4018874, longitude: -70.6836888},
]
const lens = { lensType: 'Sunglasses', name: 'Lens', lensPlace: 'Manila', color: 'Navy blue', lensDescripton: 'Amazing', url: 'http://google.com.ar', frame_material: 'Metal' }
export const Default = () => { return
}
export const MapWithMarker = () => { return <MapComponent viewport={initialViewport} markers={routes} lens={lens} /> }
Environment
Framework version: "react-map-gl": "^6.1.17",
Map library:
"react-map-gl": "^6.1.17", "react-map-gl-geocoder": "^2.2.0"
Browser:All
OS:All
Logs
No response