Develop Reference

splitting the world map into grids with h3

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWhtZXRiYXlyYWtjaSIsImEiOiJja3lqN2lzemwxcDZnMzBxcDZ3OHVrdjU5In0.jgPDOZKWtnkHlZiinlNK6Q';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-103.5917, 40.6699],
zoom: 3
});
map.on('load', () => {
map.addSource('earthquakes', {
type: 'geojson',
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
map.addSource('urban-areas', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson',
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'earthquakes',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'earthquakes',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 14
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'earthquakes',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#ccc',
'circle-radius': 10,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
map.addLayer(
{
'id': 'urban-areas-fill',
'type': 'fill',
'source': 'urban-areas',
'layout': {},
'paint': {
'fill-color': '#f08',
'fill-opacity': 0.4
}
}
);
map.on('click', 'clusters', (e) => {
const features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
const clusterId = features[0].properties.cluster_id;
map.getSource('earthquakes').getClusterExpansionZoom(
clusterId,
(err, zoom) => {
if (err) return;
map.easeTo({
center: features[0].geometry.coordinates,
zoom: zoom
});
}
);
});
map.on('click', 'unclustered-point', (e) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const mag = e.features[0].properties.mag;
const tsunami = e.features[0].properties.tsunami === 1 ? 'yes' : 'no';
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(
`magnitude: ${mag}<br>Was there a tsunami?: ${tsunami}`
)
.addTo(map);
});
map.on('mouseenter', 'clusters', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'clusters', () => {
map.getCanvas().style.cursor = '';
});
map.on("click", function (e) {
// Convert a lat/lng point to a hexagon index at resolution 10
const h3Index = h3.geoToH3(e.lngLat.lng, e.lngLat.lat, 10);
// Get the center of the hexagon
const hexCenterCoordinates = h3.h3ToGeo(h3Index);
// Get the vertices of the hexagon
const hexBoundary = h3.h3ToGeoBoundary(h3Index);
hexBoundary.push(hexBoundary[0]);
});
});
</script>
I found node.js examples for what I'm trying to do, but I don't know node.js. I need to run what is done here in html with js.
I want to create a new point to h3index code in map.on click.
how can i make these dots to be hexagon instead of round?
I've been trying for a long time and I couldn't.
example : https://www.marketplace.ovr.ai

Mapbox GL snap GPS coordinates do road

I use Mapbox to show on map the path that the user traveled (with my app on phone). My application saves the GPS position regularly, which I then show on the map with the help of Mapbox GL.
<script>
mapboxgl.accessToken = 'pk.XXX';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [aa.AAA, bb.BBB],
zoom: 18
});
var popup = new mapboxgl.Popup()
.setText("XXX YYY")
.addTo(map);
var marker = new mapboxgl.Marker()
.setLngLat([aa.AAA, bb.BBB])
.addTo(map)
.setPopup(popup);
map.on('load', function () {
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[xx.XXX,yy.YYY],
[xx.XXX,yy.YYY],
[xx.XXX,yy.YYY]
}
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
});
</script>
I would like Mapbox to snap the position to the road on the map. Something like "snap-to-road" in Google Maps.
I know that Mapbox has something called "map matching". Only I want to list many intermediate points (not just the beginning and the end), and I would like everyone with them to be snaped to the road on the map.
Is something like this possible? Maybe there are some other mapping solutions that can do that?

Take a look at my solution below. It uses Mapbox map matching, then extracts the tracepoints from the response object and draws them on the map.
To make it work on your end, just replace <ACCESS_TOKEN> with your Mapbox access token.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Map Matched Coordinates</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.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',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-117.17292,32.71256],
zoom: 15
});
map.on('load', function () {
// map matching request
var matched_coordinates = [];
// Create
let xhr = new XMLHttpRequest();
// GET REQUEST
xhr.open('GET', 'https://api.mapbox.com/matching/v5/mapbox/driving/' +
'-117.17282,32.71204;-117.17288,32.71225;-117.17293,32.71244;-117.17292,32.71256;-117.17298,32.712603;-117.17314,32.71259;-117.17334,32.71254' +
'?access_token=<ACCESS_TOKEN>' +
'&geometries=geojson');
// After Response is received
xhr.onload = function() {
if (xhr.status != 200) {
// NOT SUCCESSFUL
} else {
// SUCCESSFUL
var response = JSON.parse(xhr.response);
var tracepoints = response["tracepoints"];
for(var i = 0; i < tracepoints.length; i++){
matched_coordinates.push(tracepoints[i]["location"]);
}
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': matched_coordinates
}
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
}
}
xhr.send();
});
</script>
</body>
</html>

Mapbox - Trying to add a route between several markers

I am trying to learn JS and creating maps with the Mapbox GL JS and Directions. I managed to add markers to a map, and now I would like to add a route between the markers (1 -> 2 -> 3 -> 4).
After playing around for several time now, I got stuck. The markers are added, but no route is shown.
Would be create if you could help me :)
Thanks, Ben
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.marker {
background-image: url('mapbox-icon.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'xxx';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-122.662323, 45.523751],
zoom: 11
});
// code from the next step will go here!
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.662323, 45.523751]
},
properties: {
title: 'Mapbox',
description: 'Washington, D.C.'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.692323, 45.523751]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.612323, 45.523751]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.682323, 45.523751]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
}]
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
map.on('load', () => {
for (i = 0; i < geojson.length; i++) {
for(j = i+1; j < geojson.length; j++) {
var geomFrom = geojson[i];
var geomTo = geojson[j];
$.get(`https://api.mapbox.com/directions/v5/mapbox/driving/` + geomFrom[0] + ',' + geoFrom[1] + ';' + geomTo[0] + ',' + geomTo[1] + `?access_token=${mapboxgl.accessToken}&geometries=geojson`, data => {
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: data.routes[0].geometry,
},
},
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': '#ff7e5f',
'line-width': 8,
},
})
})
};
};
});
</script>
</body>
</html>

There are many issues I have found in the code, but long story short, the source you are creating is wrongly created. To simplify the explanation I had to remove the double for loop and the call to the service to show you how you should create the source for the path.
I have shaped this fiddle creating a path in Portland.
Here is the relevant js code for the layer you have to create:
map.addLayer({
id: 'route',
type: 'line',
source: {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[
-122.68035572839027,
45.52729517240144
],
[
-122.67657260381876,
45.527330174436116
],
[
-122.67657129671815,
45.52666556739695
],
[
-122.67085005715236,
45.52677044480427
],
[
-122.66645605237485,
45.52862702776275
],
[
-122.66560830926798,
45.52866212597536
],
[
-122.66532421497476,
45.52712020010674
],
[
-122.6654770006126,
45.52158881104725
],
[
-122.66684678096325,
45.51749007039993
]
],
},
}
},
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#888',
'line-width': 8
}
})
Now knowing how this layer needs to be created, you can surely bring back your loops and the call to the service, but as long you are double looping you'll be creating a layer per loop, which is definitely NOT desirable nor recommendable.
I also noted the coords of the your geojson source are repeated and the coords do not correspond to the places indicated, but I ignored them for the sample in the fiddle.
If this answer solves your question about how to add a route between several markers, please mark it as answer accepted, in this way it will also help other users to know it was the right solution

Mapbox GL JS change builidng color on click

i have to change the color or borders of buildings on click.
HTML & JS
Like the examples to hover countries, but with click and not countries -> buildings.
If it's easier with another plugin, please say so. 3D is not a 'must have'.
My Code:
<script>
mapboxgl.accessToken = 'hidden';
var map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/light-v9',
center: [7.3337859, 50.8403206],
zoom: 19.8,
pitch: 60,
bearing: -70,
hash: true,
container: 'map'
});
// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.on('load', function() {
// Insert the layer beneath any symbol layer.
var layers = map.getStyle().layers;
var labelLayerId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
'fill-extrusion-height': [
"interpolate", ["linear"], ["zoom"],
15, 0,
15.05, ["get", "height"]
],
'fill-extrusion-base': [
"interpolate", ["linear"], ["zoom"],
15, 0,
15.05, ["get", "min_height"]
],
'fill-extrusion-opacity': .6
}
}, labelLayerId);
map.on('click', '3d-buildings', function(e) {
console.log(e.features[0]);
//map.setPaintProperty('3d-buildings', 'fill-extrude-color', '#FF0000');
map.setPaintProperty('3d-buildings', 'fill-color', '#faafee');
});
});
Thanks :)

You need to add a layer on which to display the selected buildings. For example:
map.addSource('currentBuildings', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": []
}
});
map.addLayer({
"id": "highlight",
"source": "currentBuildings",
'type': 'line',
'minzoom': 15,
'paint': {
'line-color': '#f00',
'line-width': 3
}
}, labelLayerId);
map.on('click', '3d-buildings', function(e) {
map.getSource('currentBuildings').setData({
"type": "FeatureCollection",
"features": e.features[0]]
});
});
[ https://jsfiddle.net/o50vy8jc/ ]

Adding graphic to MapView after async operation

I'm trying to pull some json data from Geoserver utilizing ESRI's Arcgis Javascript 4.4 API. All of the components log to the console, but the view.graphics.add() throws this error:
Uncaught TypeError: b.spatialReference.equals is not a function
at e._projectGeometry (MapView.js:505)
at e.doRender (MapView.js:503)
at e.b.processRender (MapView.js:293)
at b.renderChild (MapView.js:500)
at b.e.renderChildren (MapView.js:290)
at b.e.doRender (MapView.js:286)
at b.processRender (MapView.js:293)
at n.renderChild (MapView.js:427)
at n.e.renderChildren (MapView.js:290)
at n.e.doRender (MapView.js:286)
I'm trying to understand why what I am attempting is not working as expected, and any help would be appreciated. Code is below:
function fetchJson(url) {
return xhr.get({
url: url,
handleAs:"json",
})
}
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "view",
map: map,
zoom: 11,
center: [-84.34, 33.93],
padding: {
left: 320
}
});
view.then(function () {
fetchJson(samplejsonlink)
.then(function (data) {
console.log(data.features[0].geometry.coordinates)
var polyline = {
type: "polyline",
paths: data.features[0].geometry.coordinates,
spatialReference: {wkid : 4326}
}
console.log(polyline);
var polylineSymbol = {
type: "simple-line",
color: [226, 119, 40],
width: 4
};
console.log(polylineSymbol);
var polylineAtt = {
Name: "ExampleName",
};
console.log(polylineAtt)
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol,
attributes: polylineAtt
})
console.log(polylineGraphic);
view.graphics.add(polylineGraphic);
})
})

Your codes are working when I use this coordinates as paths. Maybe your coordinates from data.features[0].geometry.coordinates is not match the Polyline coordinates format.
view.then(function () {
var polyline = {
type: "polyline",
paths: [
[-111.30, 52.68],
[-98, 49.5],
[-93.94, 29.89]
],
spatialReference: { wkid: 4326 }
}
console.log(polyline);
var polylineSymbol = {
type: "simple-line",
color: [226, 119, 40],
width: 4
};
console.log(polylineSymbol);
var polylineAtt = {
Name: "ExampleName",
};
console.log(polylineAtt)
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol,
attributes: polylineAtt
})
console.log(polylineGraphic);
view.graphics.add(polylineGraphic);
});