0
263
ViewsHow can I make custom waypoints on water with a click in mapbox
I have a map on my website that just shows the map and the location of me(later this is going to change to the location of an little boat). I want to mark a path in the water so the boat can travel in that exact path, so for example from point A to B to C etc. but I couldn't figure out how to do that with dropbox. So basically an delivery route but then on water. can anyone help me! this is what I have so far:
this is my map.html
<meta charset="UTF-8">
<title>Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute ; top: 56px; bottom: 0; width: 100%; }
#buttons { position: absolute; bottom: 0; margin: 0 0 10px 25px}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body >
<div id="map"></div>
<div >
<button type="button" class="btn btn-primary" id="buttons">asdasd</button>
</div>
</body>
<script src="../js/map.js">
</script>
</html>
and this is my map.js:
mapboxgl.accessToken = 'my_token';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-96, 37.8], // starting position
zoom: 3 // starting zoom
});
const geolocate = new mapboxgl.GeolocateControl()
map.addControl(geolocate)
map.on('load', function()
{
geolocate.trigger();
});
1 answers
Answer question0
you just have to store at regular intervals the position of the boat (store it in a simple variable, write it in a file, use an API, use localStorage, everything depends on the use). Then you just have to add a layer of type "line" which will use the different points recorded to draw lines between each point.
Here is a working example https://codepen.io/cladjidane/pen/MWrJjjw
mapboxgl.accessToken =
'pk.eyJ1IjoiY2xhZGppZGFuZSIsImEiOiJjbDA4NmVra3gwMG1jM2dvM3V1djh2NnFwIn0.m8Swm9zWKqf0ozaNcZtISQ'
// Init map
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.02991,37.33265],
zoom: 12,
})
// Definition of the configuration for GeolocateControl
let geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 0,
},
trackUserLocation: true,
});
map.addControl(geolocate)
// Once the map is loaded
map.on('load', function () {
geolocate.trigger();
// We create a data source - GeoJSON format
const position_boat = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [],
},
},
],
}
// We add to the map this source
map.addSource('route', {
type: 'geojson',
data: position_boat,
})
// All the magic happens here:
// We push in our source the table of coordinates updated with the method "geolocate".
geolocate.on('geolocate', function (position) {
let newCoordinates = [position.coords.longitude, position.coords.latitude]
position_boat.features[0].geometry.coordinates.push(newCoordinates)
map.getSource('route').setData(position_boat)
})
// We add the layer that displays the source on the map
map.addLayer({
id: 'route',
type: 'line',
source: 'route',
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': 'red',
'line-width': 8,
},
})
})