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 e.g 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 !
Related
Mapbox GL JS w/ w3w grid
Hi, I'm just playing around with the What3Words grid on Mapbox code from the tutorial. (https://developer.what3words.com/tutorial/displaying-the-what3words-grid-on-a-mapbox-map)
I'm trying to make the tiles from the grid interactive, kind of like in the w3w website (clickable, hover effect, getting data from them, etc), but the grid doesn't seem to work when the data source is loaded as a 'fill' layer on Mapbox, it only works as a 'line' layer type. Every single example I find online uses Polygons (or MultiPolygons) from a fill layer type, but I can't see nothing around with bounding boxes.
(Basically trying to achieve something like this, but with every tile instead of the states: https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/)
I don't really know what's going on, why can't I add the source data as a fill layer? Is there a way to load the data as Polygons instead of bounding boxes?
Thanks.
Code (from the tutorial):
<html>
<head>
<script src="https://assets.what3words.com/sdk/v3.1/what3words.js?key=YOUR_API_KEY"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Create the Mapbox
mapboxgl.accessToken = "YOUR_MAPBOX_TOKEN";
let map = new mapboxgl.Map({
container: "map", // container id
style: "mapbox://styles/mapbox/streets-v9", // stylesheet location
center: [-0.195499, 51.52086], // starting position [lng, lat]
zoom: 18 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl());
</script>
<script>
function drawGrid() {
const zoom = map.getZoom();
const loadFeatures = zoom > 17;
if (loadFeatures) { // Zoom level is high enough
var ne = map.getBounds().getNorthEast();
var sw = map.getBounds().getSouthWest();
// Call the what3words Grid API to obtain the grid squares within the current visble bounding box
what3words.api
.gridSectionGeoJson({
southwest: {
lat: sw.lat, lng: sw.lng
},
northeast: {
lat: ne.lat, lng: ne.lng
}
}).then(function(data) {
// Get the grid source from the map (it won't exist initally)
var grid = map.getSource('grid');
if (grid === undefined) {
// Create a source of type 'geojson' which loads the GeoJSON returned from the what3words API
map.addSource('grid', {
type: 'geojson',
data: data
});
// Create a new layer, which loads data from the newly created data source
map.addLayer({
id: 'grid_layer',
type: "line",
source: 'grid',
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": '#777',
"line-width": .5
}
});
} else {
// The source and map layer already exist, so just update the source data to be the new
// GeoJSON returned from the what3words API
map.getSource('grid').setData(data);
}
}).catch(console.error);
}
// If we have reached the required zoom level, set the 'grid_layer' to be visible
var grid_layer = map.getLayer('grid_layer');
if (typeof grid_layer !== 'undefined') {
map.setLayoutProperty('grid_layer', 'visibility', loadFeatures ? 'visible' : 'none');
}
}
// When the map is either loaded or moved, check to see if the grid should be draw
// if the appropriate zoom level has been met, and if so draw it on.
map
.on('load', drawGrid)
.on('move', drawGrid);
</script>
</body>
</html>
Using latest leaflet library, I generated a plot in python from a GraDs file and supposedly I have the correct corners or bounds, but when overlaying in leaflet does not fit.
here is the simple code
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<style type="text/css">
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id = "map"></div>
<script>
// Creating map options
var mapOptions = {
center: [14, -85],
zoom: 5
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
// var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// map.addLayer(layer); // Adding layer to the map
var esriImages = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
var esriLabels = new L.TileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}');
var esri = L.layerGroup([esriImages, esriLabels]);
//default basemap
map.addLayer(esri);
// Creating Image overlay
var imageUrl = 'https://i.imgur.com/KNTRLHR.png';
var imageBounds = [[30,-115], [6,-59.03836]];
var overlay = L.imageOverlay(imageUrl, imageBounds,{ opacity:.7});
overlay.addTo(map);
map.on('click', function(e) {
// var popup = L.popup()
// .setLatLng(e.latlng)
// .setContent('<p>Hello, world!</p>')
// .openOn(map);
console.log ('click en ',e.latlng);
});
</script>
</body>
</html>
The representation of the image is like this as per NOAA site but is poor quality and also if i overlay does not fit.
What is the issue or how to fix it.
Thanks for any help
Edited: 2020.10.17 04Z
i know it is possible to draw circle or rectangle on tile images when using leaflet.js. here is one link http://jsfiddle.net/tridip/p6ssbvqj/
leaflet has function called circle() polygon() etc
my interface is like that i have 4 button one is circle,rectangle,load image, save image.
when page will load first time then i will show a image by leaflet.js and when user click on circle or rectangle button then i have to allow user to draw a circle or rectangle on image. the question which jquery or any javascript library i should use which will allow to draw a circle or rectangle on image ?
next i need to store those coordinate of circle or rectangle at client side because later i could save those info in db.
3rd one when i will reload images again i need to show drawn circle or rectangle on same image and in same location where user has drawn.
please guide me how to achieve it. i have never done before so no idea i have. please help me. thanks
EDIT 1
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
1) What is the meaning of L.FeatureGroup()?
What does L.FeatureGroup() do?
2) What does the code below do?
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
what the above code is doing. it seems that the above code is trying to draw control on map programmatically. may be i am not right.
because if the above line is related to draw control on map programmatically then there should be coordinate or something relavent should be there but i have not
found anything in the above code. so please tell me what the above code is doing ?
3) if i need to draw any shape on map then do i need to first add any layer on map because as per your code you first add layer by this line
map.addLayer(drawnItems);
4) the below code is clear
if (type === 'marker') {
coords = JSON.stringify(layer._latlng);
}
the above code storing lat and lang as coordinate in variable but you have missded to show another set of code where i will provide
lat and lang details as coordinate then code will draw same shape in right position as per lat & lang value.
please read my all 4 point and please write answer to drive out my confusion. specially point 1 & 2 related code is not clear to me
and next give me code where i will pass shape name and latlang then leaflet api will draw shape accordingly.
thanks
As gusper noted, Leaflet.draw is a ready-made library for interactive drawing on Leaflet maps. Here's their demo slightly modified to display the coordinates of shapes drawn on the map.
If necessary, you can store these coordinates in a DB, and then use the native Leaflet functions to re-draw these shapes from the list of coordinates.
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
}),
map = new L.Map('map', {
layers: [osm],
center: new L.LatLng(-37.7772, 175.2756),
zoom: 15
});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function(e) {
var type = e.layerType;
var layer = e.layer;
var coords;
console.log(e);
if (type === 'marker') {
coords = JSON.stringify(layer._latlng);
}
if (type === 'circle') {
coords = JSON.stringify(layer._latlng) + " " + layer._mRadius;
}
if (type === 'rectangle') {
coords = JSON.stringify(layer._latlngs);
}
if (type === 'polygon') {
coords = JSON.stringify(layer._latlngs);
}
if (type === 'polyline') {
coords = JSON.stringify(layer._latlngs);
}
document.getElementById("coords").innerHTML = coords;
drawnItems.addLayer(layer);
});
<head>
<title>Leaflet Draw</title>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
<link rel="stylesheet" href="leaflet.draw.ie.css" />
<![endif]-->
<script src="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
</head>
<body>
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="coords" style="position: fixed; bottom: 0; right: 0; width: 50%; height: 20%; z-index: 99; background-color: white; text-wrap: "></div>
I am implementing a script but need some help on two issues that I am unable to figure out. The idea is to allow someone to create a running route and store the route into a database via the coordinates.
The code is as follows:
(credits to: Post 19 Here and This Fiddle here)
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools (B)</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
window.onload = function() {
var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Set lat/lon values for this property',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(a) {
console.log(a);
var div = document.createElement('div');
div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
document.getElementsByTagName('body')[0].appendChild(div);
});
};
</script>
</head>
<body>
<div id="map" style="height:300px;"></div>
</body>
</html>
First problem I am trying to solve:
div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
How can I add each of these lat & long coordinates (as the person creates their route) into a PHP array in order to insert them into a database. I am struggling with this as it is displaying them on the fly.
Second problem I am trying to solve:
div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
If the user drops the pin is there a way to delete the latest coords should they make a mistake?
I have tried different methods (I am no good with JS);
div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4) + ', <a onClick="$(this).closest("div").remove();">Delete</a>';
But can't seem to get it working.
Any help on these problems would be appreciated. Many thanks.
It would be easier to hold the co-ordinates in a javascript object/array so they can be added/removed and saved easily.
I would also use a more appropriate html element to display them to the user, eg an unordered/ordered list:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools (B)</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
//Create an object to hold the values and encapsulate adding, removing and saving
function List(ul, save){
this.items = [];
this.ul = ul;
this.save = save;
}
//add item to list
List.prototype.add=function(item){
this.items.push(item);
this.rebuildDom();
};
//remove item from list
List.prototype.removeAt=function(index){
this.items.splice(index, 1);
this.rebuildDom();
};
//update the contents of the <ul> list to display current list items
List.prototype.rebuildDom=function(){
var html='';
for(var i = 0; i < this.items.length; i++){
//note change here, each item is now an array, so it must be
//joined into a string for display
html += '<li>'+this.items[i].join(' , ') +'<span class="remove" data-id="'+i+'">X</span></li>'
}
$('#'+this.ul).html(html);
};
//upload the data via ajax
List.prototype.upload=function(){
var data = {data: this.items};
$.post('/save.php', data, function(response){
console.log(response);
})
};
List.prototype.init = function(){
var _this = this;
//remove items from list when remove is clicked
$('#'+this.ul).on('click', 'span.remove', function(){
var index = $(this).data('id');
_this.removeAt(index);
});
//bind to click event of save button, and upload data
$('#'+this.save).click(function(ev){
ev.preventDefault();
_this.upload();
});
};
var list = new List('items', 'save');
list.init();
var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Set lat/lon values for this property',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(a) {
console.log(a);
//note item is now an array containing both values, not a string
var item = [a.latLng.lat().toFixed(4) , a.latLng.lng().toFixed(4)];
//add item to our list
list.add(item);
});
});
</script>
<style>
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#map{
height: 400px;
border-bottom: 1px solid #666666;
margin-bottom: 20px;
}
h3{
font-family: inherit;
}
#items{
list-style: none;
width: 300px;
border: 1px solid #d8d8d8;
}
#items li{
background-color: #666666;
padding: 5px;
margin: 5px;
color:#ffffff;
}
#items li span.remove{
float: right;
background-color: red;
color: #ffffff;
margin: -5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="map" ></div>
<button id="save">Save</button>
<h3>Co-ordinates of your route:</h3>
<ul id="items"></ul>
</body>
</html>
Live example:
https://jsfiddle.net/rmsjf5oy/2/
To retrieve the data in php, you can simply access the $_POST super global:
//save.php
if(isset($_POST['data']){
$co-ordinates = $_POST['data'];
// $co-ordinates is now a php array like
// [
// ['51.4886', '-0.0666'],
// ['51.4886', '-0.0666'],
// ['51.4886', '-0.0666']
// ]
//do something with the data then send a message back to the javascript
header('Content-Type: application/json');
echo json_encode(['success'=>true, 'message'=>'Thanks, got the data']);
}
Look in the js console in your browser to see the response, or do something other than console.log(response); in the upload method to do something else with the data, such as show it in a div
First problem
You can't send JS data to PHP unless you make a server call. Once the page is rendered - PHP shuts down and that's it, while JS keeps running in the browser (read about server-side vs client-side programming).
You probably want to make an AJAX call to send the lat/long data back to the server in order to insert them into the database.
Second problem
(please try to have a separate question for each next time)
$(this).parent().remove(); should work.
I'm trying to find some hints where I should search for this topic but I've nothing found - and I spent many hours on this.
I'm also trying to get the current coordinates out of the current displayed viewport from the OpenLayers map to add only these vectors that are in the current bounding box of the current viewport.
For OpenLayers 2:
Map.getExtent()
...will return a Bounds, which you can then use to get the lat/long coordinates in any number of ways: http://dev.openlayers.org/apidocs/files/OpenLayers/BaseTypes/Bounds-js.html#OpenLayers.Bounds
Ideally, you'd turn the vectors into Geometry objects and check them against Map.getExtent() using Bounds.intersectBounds() to see if they're in the current viewport.
For OpenLayers 3:
ol.Map.getView().calculateExtent(map.getSize())
...will return an array of coordinates, representing the bounding box of the extent.
For openlayers 5.3.
olmap.getView().calculateExtent(olmap.getSize());
Runnable code for openlayers 5.3 follows:
(V6.5.0 has the same API document concerning the use of getView and getSize, the code above should also work with it.)
// import modules
const Map = ol.Map;
const View = ol.View;
const TileLayer = ol.layer.Tile;
const VectorLayer = ol.layer.Vector;
const fromLonLat = ol.proj.fromLonLat;
const OSM = ol.source.OSM;
const VectorSource = ol.source.Vector;
const Overlay = ol.Overlay;
const Style = ol.style.Style;
const Fill = ol.style.Fill;
const Text = ol.style.Text;
// basic base layer: raster
var rasterLayer = new TileLayer({
source: new OSM()
});
// create main map with a base map
var mapcenter = [100.5330981, 13.7364029];
var olmap = new Map({
layers: [rasterLayer] /* more layers can be added here, or later steps */ ,
target: document.getElementById("map1"),
view: new View({
center: fromLonLat(mapcenter),
zoom: 17
})
});
// add eng-chula marker
const engchula = [100.5330981, 13.7364029];
var marker1 = new Overlay({
position: fromLonLat(engchula),
positioning: "center-center",
element: document.getElementById("marker1"),
stopEvent: false
});
// 'Eng-chula' label
var engchula1 = new Overlay({
position: fromLonLat(engchula),
element: document.getElementById("engchula1")
});
// add overlay(s) to 'olmap'
olmap.addOverlay(marker1);
olmap.addOverlay(engchula1);
// Demo the use of .getSize()
var sizes = olmap.getSize(); //units:pixels; columns x rows
console.log("getSize (pixels): " + sizes); //2 numbers
// get `extent` through getView()
var extent = olmap.getView().calculateExtent(olmap.getSize());
console.log("Extent, LL_x: " + extent[0]); //left
console.log("Extent, LL_y: " + extent[1]); //bottom
console.log("Extent, UR_x: " + extent[2]); //right
console.log("Extent, UR_y: " + extent[3]); //top
/*
Status:ok
*/
#map1 {
width: 70%;
height: 500px;
}
#marker1 {
width: 25px;
height: 25px;
border: 2px solid #088;
border-radius: 10px;
background-color: firebrick;
opacity: 0.75;
}
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<H3>Openlayers v5.3.0 Web Map with Geojson Data</H3>
<div id="map1" class="map"></div>
<i>:</i>
<p id="p1">Find "<b>Eng_Chula</b>", then click it.</p>
<div style="display: none;">
<!-- Clickable label for Eng-Chula -->
<a class="overlay" id="engchula1" target="_blank" href="https://www.eng.chula.ac.th/th/">Eng_Chula</a>
<div id="marker1" title="Marker1"></div>
</div>
</body>
Based on the answers here, but if you'd like your results to be in longitude-latitude coordinates.
function getBounds() {
const extent = olMap.getView().calculateExtent(olMap.getSize())
return transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
}