Mapbox showing the location from my Internet service provider(ISP) IP address and not from the IP address of my desktop connected to my home network over WIFI, however, it does track the correct position of my mobile device connected to the same home network.
How would I go about fixing this issue?
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet'/>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css" type="text/css"/>
<title>Mapbox Test</title>
</head>
<body>
<div id='map' ></div>
<script src="js/basic_map.js" defer></script>
</body>
</html>
basic_map.js:
// mapbox access Key
mapboxgl.accessToken = ACCESS_TOKEN;
// Get My Current Location
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { enableHighAccuracy: true});
function successLocation(position)
{
center = [position.coords.longitude, position.coords.latitude];
zoom = 15;
setupMap(center, zoom);
}
function errorLocation()
{
// Fallback: Cape Town
center = [18.4241, -33.9249];
zoom = 10;
setupMap(center, zoom);
}
function setupMap(center,zoom)
{
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: center,
zoom: zoom
});
map.on('load', function()
{
// Add Navigation Buttons
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
// Add Marker
const marker = new mapboxgl.Marker()
.setLngLat(center)
.addTo(map);
});
}