I'm using the Mapbox Direction API, and I don't know how to pass the distance object to a variable, I'm using the following code from the example pro I can't find how to pass the distance to a variable:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display navigation directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
<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">
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicmxnZGl2ZWt0ZXIiLCJhIjoiY2wyN3ZoOTR6MDNjdTNicGN5eWRqbTF4NiJ9.DPZKvv406prhkZYzZDKVjw';
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
</script>
</body>
</html>
Related
In the brochure, I am making an earthquake map from data that comes from the USGS earthquakes. My question is how can I click and get the magnitude of each of the earthquakes as a popup? The script is as follows:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" type="text/css">
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" type="text/javascript"></script>
<script src="https://unpkg.com/esri-leaflet#2.1.4/dist/esri-leaflet.js"></script>
<script src="/js/leaflet.ajax.min.js" type="text/javascript"></script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0
}
#mapa {
height: 100%;
width: 100%;
}
</style>
<title>Simbologia</title>
</head>
<body>
<div id="mapa"></div>
<script type="text/javascript">
var mapa = L.map("mapa", {
center: [0, 0],
zoom: 2
});
var capaOrtoFoto = L.esri.basemapLayer("Imagery");
capaOrtoFoto.addTo(mapa);
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
L.Util.ajax(url).then(
function (datosGeoJOSN) {
var capaTerremotos = L.geoJSON(datosGeoJOSN, {
pointToLayer: function (entidad, latlng) {
return L.circleMarker(latlng);
}
});
capaTerremotos.addTo(mapa);
capaTerremotos.bindPopup().openPopup();
});
</script>
</body>
</html>
How can I make the "bindPopup" function call the magnitude of the earthquake?
Use feature.properties.mag to access the magnitude in your response:
fetch(url)
.then(data => data.json())
.then(data => {
L.geoJSON(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng).bindPopup(`Magnitude: ${feature.properties.mag}`).openPopup();
}
}).addTo(mapa);
})
Also you can use fetch API which requires no script importing to make the request.
Moreover the version of leaflet, esri-leaflet that you are using seem old.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" type="text/css">
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" type="text/javascript"></script>
<script src="https://unpkg.com/esri-leaflet#3.0.4/dist/esri-leaflet.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0
}
#mapa {
height: 100%;
width: 100%;
}
</style>
<title>Simbologia</title>
</head>
<body>
<div id="mapa"></div>
<script type="text/javascript">
var mapa = L.map("mapa", {
center: [0, 0],
zoom: 2
});
var capaOrtoFoto = L.esri.basemapLayer("Imagery");
capaOrtoFoto.addTo(mapa);
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
fetch(url)
.then(data => data.json())
.then(data => {
L.geoJSON(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng).bindPopup(`Magnitude: ${feature.properties.mag}`).openPopup();
}
}).addTo(mapa);
})
</script>
</body>
</html>
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'TOKEN';
var map = new mapboxgl.Map({
container: '<your HTML element id>',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
I have this code working with my custom style, but anytime I try to modify it, the page turns blank. If I change the center, the zoom, or the width or the height, nothing shows up. I'm not sure what I'm doing wrong. It's my first Mapbox attempt.
Thanks!
Can you post the modified code that is not working please? The code that you have provided is incomplete.
Please try out the below code to display a map. Please ensure to replace <ACCESS_TOKEN> with your access token:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '<ACCESS_TOKEN>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
I am trying to use the JS version of mapbox in my web application. BUt when changing the example lat-long to delhi's latlong its showing wrong location.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViZXhwZXJ0c3VqZWV0IiwiYSI6ImNqdmh4MXM0dDAwMWs0NXFyNHkxc2o1eGwifQ.jgbBoS14uvv8i_lMrCQF5A';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [28.6466773,76.813073], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
As High Performance Mark mentioned, MapBox uses swapped co-ordinates that means they are not using:
[lat, lng]
they are using
[lng, lat]
Try to change it and then try again.
My web app contains two basemaps to display. I created a leaflet control layer to manage their visibility :
var baseMaps = {
"Bing Satellite": bingLayer,
"OpenCycleMap": tileLayer
};
L.control.layers(baseMaps).addTo(map);
The issue is the icon which should be within the control doesn't show up. When I inspect, the console renders a 404 error : Failed to load resource: the server responded with a status of 404 (Not Found) on layers-2px.png.
I'm using cdn to call leaflet so I have no clue about the issue!!
Here is the rendering in the map :
Your assistance would be appreciated.
I put a working example.
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Control.Layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var gray = L.layerGroup();
// more than one service can be grouped together and passed to the control together
L.esri.basemapLayer("DarkGray").addTo(gray);
L.esri.basemapLayer("GrayLabels").addTo(gray);
var states = L.esri.featureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
style: function (feature) {
return {color: '#bada55', weight: 2 };
}
});
var map = L.map('map', {
center: [39, -97.5],
zoom: 4,
layers: [gray, states]
});
var baseLayers = {
"Grayscale": gray,
"Streetmap": L.esri.basemapLayer("Streets")
};
var overlays = {
"U.S. States": states
};
// http://leafletjs.com/reference-1.0.3.html#control-layers
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
You can modify the background-image property of the following css selectors by setting your custom image:
.leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-layers-toggle {
background-image: url('http://ovrdc.github.io/parcel-viewer/assets/images/layers-bl.png');
background-size: 80%;
margin-top: 0px;
width: 36px;
height: 36px;
}
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Control.Layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
.leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-layers-toggle {
background-image: url('http://ovrdc.github.io/parcel-viewer/assets/images/layers-bl.png');
background-size: 80%;
margin-top: 0px;
width: 36px;
height: 36px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var gray = L.layerGroup();
// more than one service can be grouped together and passed to the control together
L.esri.basemapLayer("DarkGray").addTo(gray);
L.esri.basemapLayer("GrayLabels").addTo(gray);
var states = L.esri.featureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
style: function (feature) {
return {color: '#bada55', weight: 2 };
}
});
var map = L.map('map', {
center: [39, -97.5],
zoom: 4,
layers: [gray, states]
});
var baseLayers = {
"Grayscale": gray,
"Streetmap": L.esri.basemapLayer("Streets")
};
var overlays = {
"U.S. States": states
};
// http://leafletjs.com/reference-1.0.3.html#control-layers
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
I'm displaying polygons with Mapbox GL JS from GeoJSON, where each feature has an extra field in properties called color. The value of that field defines the color of a polygon.
I have about 680 features, but when I'm running the JavaScript I get the following error:
Geometry exceeds allowed extent, reduce your vector tile buffer size
There is complete code of my app:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'mapbox-token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.07231699675322, 4.66336863727521],
zoom: 12
});
map.on('load', function () {
map.addSource('fulfillment', {
'type': 'geojson',
'data': 'https://gist.githubusercontent.com/vero4karu/b5019c0117876711b6570f188ee9fae8/raw/54c9612d325eaca7e79fda74c405eb019ffdabf4/fulfillment.geojson'
});
map.addLayer({
"id": "fulfillment-polygon",
"type": "fill",
"source": "fulfillment",
"paint": {
"fill-color": {
property: 'color',
type: 'identity'
},
"fill-opacity": 0.5
}
});
});
</script>
</body>
</html>
mapbox-gl-js version: v0.39.1