I'm using MapBox API to create different maps. I have around 25 markers with latitude and longitude information for each marker. I'm able to plot the markers on the map. Now I want to draw the road connecting these markers. Can someone let me know how to do this using MapBox API.
Below is the html code that I am using to plot the markers.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.my-icon {
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: white;
}
.icon-dc {
background: #3ca0d3;
}
.icon-sf {
background: #63b6e5;
}
</style>
<div id='map-two' class='map'> </div>
<script>
L.mapbox.accessToken = '<your access token>';
var mapTwo = L.mapbox.map('map-two', 'mapbox.light')
.setView([12.9716,77.5946], 20);
var myLayer = L.mapbox.featureLayer().addTo(mapTwo);
var geojson = [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [77.5048747113, 13.0408676171]
},
properties: {
icon: {
className: 'my-icon icon-dc', // class name to style
html: '★', // add content inside the marker
iconSize: null // size of icon, use null to set the size in CSS
}
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [77.5045504332, 13.0386169339]
},
properties: {
icon: {
className: 'my-icon icon-sf', // class name to style
html: '★', // add content inside the marker
iconSize: null // size of icon, use null to set the size in CSS
}
}
}
];
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.divIcon(feature.properties.icon));
});
myLayer.setGeoJSON(geojson);
mapTwo.scrollWheelZoom.disable();
</script>
</body>
</html>
Please let me know if there is any other way to plot the route between the markers.
Thanks.
You can do this with the mapbox directions API . Via a GET request you are able to calculate a route between two points eg A and B. The snippet done with jQuery could look like the following:
$.get('https://api.mapbox.com/directions/v5/mapbox/cycling/' + lngA + ',' + latA + ';' + lngB + ',' + latB + '?access_token=<your-access-token>',
function(data) {
var coords = polyline.decode(data.routes[0].geometry); // Get the geometry of the request and convert it from a Google string to coordinates
var line = L.polyline(coords).addTo(mapTwo);
});
Regarding to your question you want to connect each marker with each other! So I have created a function to calculate the route and add this function into a double loop, to rout from each marker to each marker:
function calculateRoute(geomFrom, geomTo) {
var lngFrom = geomFrom.geometry.coordinates[0]
var latFrom = geomFrom.geometry.coordinates[1]
var lngTo = geomTo.geometry.coordinates[0]
var latTo = geomTo.geometry.coordinates[1]
$.get('https://api.mapbox.com/directions/v5/mapbox/cycling/' + lngFrom + ',' + latFrom + ';' + lngTo + ',' + latTo + '?access_token=pk.eyJ1IjoicHJheWVyIiwiYSI6ImI3OGRjZjcyY2JiZTUzODMwZWUxZDdiNjRiMWE4NjI5In0.zETX-x6-XPpAv3zt4MiFwg',
function( data ) {
var coords = polyline.decode(data.routes[0].geometry);
var line = L.polyline(coords).addTo(mapTwo);
});
};
This calculates the route between each markers in a geoJSON. Here you got a little << FIDDLE >> , based on your questions code. I hope this was usefull and I could help you !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.