Currently, I have developing angular app which has map box integrated, I have followed the mapbox instructions but unable to get the desired output.
Can someone guide me that how to achieve following map?
<div class="row">
<mgl-map
renderWorldCopies="false"
[style]="'mapbox://styles/mapbox/light-v10'"
[zoom]="[0]"
[center]="center"
>
<mgl-image
id="blue"
url="../../../../../assets/images/blue.png"
(loaded)="imageLoaded = 'true'"
>
</mgl-image>
<mgl-image
id="red"
url="../../../../../assets/images/red.png"
(loaded)="imageLoaded = 'true'"
>
</mgl-image>
</mgl-image>
<mgl-geojson-source
id="points"
[data]="countryCoordinatesList"
></mgl-geojson-source>
<ng-container *ngIf="imageLoaded">
<mgl-layer
(click)="onClick(row)"
*ngFor="let row of countryList"
[id]="toStringNum(row?.properties?.id)"
type="symbol"
[source]="{
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [
row.geometry.coordinates[0],
row.geometry.coordinates[1]
]
}
}
}"
[layout]="{
'icon-image': row.properties.icon,
'icon-size': 0.4,
'icon-allow-overlap': true
}"
></mgl-layer>
</ng-container>
<mgl-layer
id="points"
source="points"
type="symbol"
[layout]=""
></mgl-layer>
</mgl-map>
Thanks in advance
To make your map look exactly like yours, you would have to modify the style a bit, however using this style
mapbox://styles/mapbox/light-v10
the below code should give you a map somewhat similar to what you showed. You would have to change the position of the markers and the marker image to match yours.
Also. please make sure to replace <YOUR_ACCESS_TOKEN> by your token.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw GeoJSON points</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 = '<YOUR_ACCESS_TOKEN>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function () {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
function (error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
-77.03238901390978,
38.913188059745586
]
},
'properties': {
'title': 'Mapbox DC'
}
},
{
// feature for Mapbox SF
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox SF'
}
}
]
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});
</script>
</body>
</html>
Related
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>
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
Below is a complete minimal example of a dot layer on top of a choropleth layer. You simply need to add an access token and it will work. When a user clicks within one of the choropleth boundaries I would like to get a list of the points within that boundary. This is so that I can use this data to populate an element elsewhere on the page. I am aware that some boundaries overlap, but I am not worried about how this is handled.
<head>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="map" style="width: 800px; height: 800px;"></div>
<script>
mapboxgl.accessToken =
"your token here";
const geojson_url =
"https://opendata.arcgis.com/datasets/d4d519d1d1a1455a9b82331228f77489_4.geojson";
fetch(geojson_url)
.then(res => res.json())
.then(geojson => {
const data = [
{ lat: "52.04009", long: "-0.52926" },
{ lat: "51.45906", long: "-2.60329" },
{ lat: "51.24257", long: "-0.58795" },
{ lat: "51.51161", long: "-0.11625" },
{ lat: "51.38113", long: "-2.36011" },
{ lat: "51.449824", long: "-2.60034" },
{ lat: "52.04009", long: "-0.52926" },
{ lat: "51.06386", long: "-2.90667" },
{ lat: "50.72623", long: "-3.5222" }
];
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/light-v10",
zoom: 5.5,
center: [-2.2, 53]
});
map.on("load", function() {
// choropleth
geojson.features = geojson.features.map(feature => {
feature["id"] = feature.properties.objectid;
return feature;
});
map.addSource("leps", {
type: "geojson",
data: geojson
});
map.addLayer({
id: "leps-fills",
type: "fill",
source: "leps",
paint: {
"fill-color": "green",
"fill-opacity": 0.5
}
});
map.on("click", "leps-fills", function(e) {
// using this event, I would like to find all the points within the clicked boundary
console.log("list of points here");
});
// point data layers
// create points geojson data
const pointMapGeojson = {
type: "FeatureCollection",
features: data.map((g, i) => {
return {
type: "Feature",
properties: g,
id: i,
geometry: {
type: "Point",
coordinates: [g.long, g.lat]
}
};
})
};
map.addSource("point_layer", {
type: "geojson",
data: pointMapGeojson
});
map.addLayer({
id: "point_layer",
type: "circle",
source: "point_layer",
layout: {
visibility: "visible"
}
});
});
});
</script>
</body>
You may look at Turf.js. It provides a function to find any points within the polygon. https://turfjs.org/docs/#pointsWithinPolygon
Here is the example:
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlcHUiLCJhIjoiY2l6dXZ5OXVkMDByZDMycXI2NGgyOGdyNiJ9.jyTchGQ8N1gjPdra98qRYg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-46.6062, -23.5513],
zoom: 11
});
map.on('load', function () {
var points = turf.points([
[-46.6318, -23.5523],
[-46.6246, -23.5325],
[-46.6062, -23.5513],
[-46.663, -23.554],
[-46.643, -23.557]
]);
var searchWithin = turf.polygon([[
[-46.653,-23.543],
[-46.634,-23.5346],
[-46.613,-23.543],
[-46.614,-23.559],
[-46.631,-23.567],
[-46.653,-23.560],
[-46.653,-23.543]
]]);
// Find point within polygon
var ptsWithin = turf.pointsWithinPolygon(points, searchWithin);
// Draw polygon
map.addLayer({
'id': 'searchWithin',
'type': 'fill',
'source': {
'type': 'geojson',
'data': searchWithin
},
'layout': {},
'paint': {
'fill-color': '#525252',
'fill-opacity': 0.5
}
});
// Draw all points
map.addLayer({
'id': 'points',
'type': 'circle',
'source': {
'type': 'geojson',
'data': points
},
'layout': {},
'paint': {
'circle-radius': 5,
'circle-color': 'red',
'circle-opacity': 1
}
});
// Draw points within polygon feature
map.addLayer({
'id': 'ptsWithin',
'type': 'circle',
'source': {
'type': 'geojson',
'data': ptsWithin
},
'layout': {},
'paint': {
'circle-radius': 5,
'circle-color': 'blue',
'circle-opacity': 1
}
});
});
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://npmcdn.com/#turf/turf/turf.min.js'></script>
<div id='map'></div>
I am desperately trying to add some markers to a mapbox map by using the mapbox-gl-js with typescript and I follwed several tutorials from the mapbox site, but it doesn't work for me.
mapboxgl.accessToken = 'mykey';
this.map = new mapboxgl.Map({
container: 'map',
style: this.style,
zoom: 13,
center: [12, 12]
});
this.map.on('load', (event) => {
this.map.addSource('testSrc', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [ 12, 12]
},
properties: {
title: 'Mapbox',
description: 'Washington, D.C.'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.414, 37.776]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
}]
}
});
this.map.addLayer({
id: 'testSrc',
source: 'testSrc',
type: 'circle',
layout: {
'text-field': '{message}',
'text-size': 24,
'text-transform': 'uppercase',
'icon-image': 'rocket-15',
'text-offset': [0, 1.5]
},
paint: {
'text-color': '#f16624',
'text-halo-color': '#fff',
'text-halo-width': 2
}
});
this.map.addControl(new mapboxgl.NavigationControl());
});
I created a source with some static data and I set it to a layer of the mapboxgl map-object.
The map is displaying without any problems, but I can't add some markers with the required geojson format.
My goal is to dynamically add markers, but here I stuck in adding some static ones.
Do you have any idea what's the problem in here?
Regards Marko
You have two main ways to add "markers" to Mapbox GL JS,
using Marker, example https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ which will add the image a DOM Element.
using Symbol, example https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/ which will add the image as part of the WebGL canvas. You need to ensure the image you use is loaded, eg. https://docs.mapbox.com/mapbox-gl-js/example/add-image/
Try this - this worked for me (delete the popup bit if you don't want it)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> My Map </title>
<!--This where you put all your dependencies-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> My Map </title>
<!--This where you put all your dependencies-->
<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>
/*this CSS section is where you style your page*/
/*this is how you comment in CSS*/
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;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<!--The below script section is a javascript section in your html file-->
<script>
//This is where you put your Javascript for interaction
mapboxgl.accessToken = 'pk.eyJ1IjoiY3dpbG1vdHQiLCJhIjoiY2s2bWRjb2tiMG1xMjNqcDZkbGNjcjVraiJ9.2nNOYL23A1cfZSE4hdC9ew'; //Put your own mapbox token
var map = new mapboxgl.Map({
container: 'map', // container id specified in the HTML
style: 'mapbox://styles/cwilmott/ckbowmfzd3r761il84bnji13t' //change to your style
});
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
time: '2020-06-19T09:47:13Z',
title: '10:47:13',
description: '19 Jun 2020 at 10:47:13'
},
geometry: {
type: 'Point',
coordinates: [
-2.219255366395865,
53.457215089777584,
]
}
},
{
type: 'Feature',
properties: {
time: '2020-06-19T09:47:19Z',
title: 'home',
description: '19 Jun 2020 at 10:47:19'
},
geometry: {
type: 'Point',
coordinates: [
-2.219227672420135,
53.457351307993434
]
}
}]
}
// 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)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
</script>
</body>
</html>
If you want to add an external GeoJson, delete the features in the var geojson section and instead put:
var geojson = {
type: 'geojson',
data: 'path-to-your-file.geojson'
}
(I think that should work).
I uploaded an svg and can view it in the mapbox studio map and can display the tileset with stock icons using mapbox gl. However, when I try to use my icon the points do not draw. The background still draws and in the case of the code below the points using cafe-15 are drawn.
'icon-image': 'cafe-15', // stock symbol shows
'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show
Here's my code:
<!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.21.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:30px; padding:0; }
#map { position:absolute; top:50px; bottom:50px; width:22%; height:42% }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '{token}';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-73.9517, 40.8001],
zoom: 17
});
map.on('load', function () {
map.addSource('toxsites', {
type: 'vector',
url: 'mapbox://djorgensen.5cvtu32g'
});
map.addLayer({
'id': 'spills',
'type': 'symbol',
'source': 'toxsites',
'source-layer': 'Toxicsites160622',
'filter': ['all', ['==', 'MAP_GROUP', 'SPILLS']],
'layout': {
'visibility': 'visible',
'icon-allow-overlap': true,
'icon-image': 'cafe-15', // stock symbol shows
'icon-size': 1
}
});
map.addLayer({
'id': 'pbs',
'type': 'symbol',
'source': 'toxsites',
'source-layer': 'Toxicsites160622',
'filter': ['all', ['==', 'MAP_GROUP', 'PBS']],
'layout': {
'visibility': 'visible',
'icon-allow-overlap': true,
'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show
'icon-size': 1
}
});
});
</script>
</body>
</html>
Custom icons are associated with specific styles in Mapbox Studio, so you would have to save your style with the uploaded custom boxy-hourglass icon, and then update the style URL:
var map = new mapboxgl.Map({
container: 'map',
style: yourNewStyleURLHere,
center: [-73.9517, 40.8001],
zoom: 17
});
disclaimer - I work at Mapbox