Develop Reference

Custom Leaflet layer control

I have 7 leaflet maps created via loop and data which is exactly the same on each map controlled by a checkbox; however, my plan was to make one layer visible per map. I have searched for a solution where my maps can remain while having one layer per map, but to no avail. I had the idea of keeping one of each layer on by default when the page loads in, but I can't seem to find anything on that either. Does anyone know how to do that? I have left one layer's coordinates in the code Toe_11000 (the "11000 years ago" checkbox) since my coordinates went over the character limit but please let me know if you need clarification. If you need more of the coordinates for the layers, the full code can be found in this JSFiddle: https://jsfiddle.net/wpc6707/3ksjh06p/21/
Here's my code:
var basemapTile =
"https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}";
var basemapOptions = {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',
subdomains: "abcd",
minZoom: 0,
maxZoom: 18,
ext: "png",
};
var glacier_map_Data = {
glacier_1: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier one",
// add title, shapes etc here
/*Glacier 11000*/
shape: (Toe_11000 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-89.01714901099996, 47.701660041000025],
[-88.98864567199996, 47.67105872900004],
[-88.89693208899996, 47.632717624000065],
[-88.76124959199996, 47.56169631900008],
[-88.58375016199994, 47.49178961600006],
[-88.44017698199997, 47.44707161100007],
[-88.30330388599998, 47.44691295700005],
[-88.17169811099996, 47.44667491700005],
[-88.02148343399995, 47.45132287700005],
[-87.87715720599994, 47.43981218000005],
[-87.74844734199996, 47.433784306000064],
[-87.64558455399998, 47.43885976400003],
[-87.53193680099997, 47.44896815100003],
[-87.38107493899997, 47.46526214000005],
[-87.24572687999995, 47.48530297000008],
[-87.13143423099996, 47.50392737300007],
[-86.98182199599995, 47.53937042800004],
[-86.82927429899996, 47.57632309400003],
[-86.62586405499997, 47.62051563700004],
[-86.53722267999996, 47.642872296000064],
[-86.52848360499996, 47.655108436000035],
[-86.66049972099995, 47.65724573000006],
[-89.01447077999995, 47.70342257000004],
[-89.01714901099996, 47.701660041000025],
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 11000,
SHAPE_Leng: 387749.141631,
Shape_Le_1: 5.06435076694,
Shape_Area: 0.429078160361,
filename: "11000.jpg",
},
}, ],
}),
shape_style: (g11000 = L.geoJSON(Toe_11000, {
style: {
color: "#e41a1c"
},
})),
shape_listener: g11000.on({
click: function() {
$("#panel").html(
Toe_11000.features[0].properties.Years_Ago +
" Years Ago" +
info11000 +
glacierInfo +
selfPlug
);
},
}),
},
glacier_2: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier two",
// add title, shapes etc here
/*Glacier 14600*/
shape: (Toe_14600 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 14600,
SHAPE_Leng: 2202706.20984,
Shape_Le_1: 25.0028099606,
Shape_Area: 17.1995913109,
filename: "14600.jpg",
},
}, ],
}),
shape_style: (g14600 = L.geoJSON(Toe_14600, {
style: {
color: "blue"
},
})),
shape_listener: g14600.on({
click: function() {
$("#panel").html(
Toe_14600.features[0].properties.Years_Ago +
" Years Ago" +
info14600 +
glacierInfo +
selfPlug
);
},
}),
},
glacier_3: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier three",
// add title, shapes etc here
shape: (Toe_17000 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 2,
Years_Ago: 17000,
SHAPE_Leng: 2261336.18634,
Shape_Le_1: 24.4337768448,
Shape_Area: 21.6098467975,
filename: "17000.jpg",
},
}, ],
}),
shape_style: (g17000 = L.geoJSON(Toe_17000, {
style: {
color: "#4daf4a"
},
})),
shape_listener: g17000.on({
click: function() {
$("#panel").html(
Toe_17000.features[0].properties.Years_Ago +
" Years Ago" +
info17000 +
glacierInfo +
selfPlug
);
},
}),
},
glacier_4: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier four",
// add title, shapes etc here
/*Glacier 20500*/
shape: (Toe_20500 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
],
],
[
[
],
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 20500,
SHAPE_Leng: 3087165.91023,
Shape_Le_1: 33.5221258781,
Shape_Area: 32.9568211425,
filename: "20500.jpg",
},
}, ],
}),
shape_style: (g20500 = L.geoJSON(Toe_20500, {
style: {
color: "#ffff33"
},
})),
shape_listener: g20500.on({
click: function() {
$("#panel").html(
Toe_20500.features[0].properties.Years_Ago +
" Years Ago" +
info20500 +
glacierInfo +
selfPlug
);
},
}),
},
glacier_5: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier five",
// add title, shapes etc here
/*Glacier 24000*/
shape: (Toe_24000 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 24000,
SHAPE_Leng: 3034250.36063,
Shape_Le_1: 33.0014683974,
Shape_Area: 35.7394984299,
filename: "24000.jpg",
},
}, ],
}),
shape_style: (g24000 = L.geoJSON(Toe_24000, {
style: {
color: "#984ea3"
},
})),
shape_listener: g24000.on({
click: function() {
$("#panel").html(
Toe_24000.features[0].properties.Years_Ago +
" Years Ago" +
info24000 +
glacierInfo +
selfPlug
);
},
}),
},
glacier_6: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier six",
// add title, shapes etc here
/*Glacier 27500*/
shape: (Toe_27500 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 27500,
SHAPE_Leng: 2984589.95454,
Shape_Le_1: 32.3931138132,
Shape_Area: 34.4347324387,
filename: "27500.jpg",
},
}, ],
}),
shape_style: (g27500 = L.geoJSON(Toe_27500, {
style: {
color: "#ff7f00"
},
})),
shape_listener: g27500.on({
click: function() {
$("#panel").html(
Toe_27500.features[0].properties.Years_Ago +
" Years Ago" +
info27500 +
glacierInfo +
selfPlug
);
},
}),
},
glacier_7: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier seven",
// add title, shapes etc here
shape: (Toe_31500 = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 2,
Years_Ago: 31500,
SHAPE_Leng: 1478866.18087,
Shape_Le_1: 15.9994195189,
Shape_Area: 9.83976333148,
filename: "31500.jpg",
},
}, ],
}),
shape_style: (g31500 = L.geoJSON(Toe_31500, {
style: {
color: "#a65628"
},
})),
shape_listener: g31500.on({
click: function() {
$("#panel").html(
Toe_31500.features[0].properties.Years_Ago +
" Years Ago" +
info31500 +
glacierInfo +
selfPlug
);
},
}),
},
};
var initMap = (EL) => {
var id = EL.dataset.map; // returns i.e: "glacier_1"
var data = glacier_map_Data[id];
var map = L.map(EL).setView(data.center, data.zoom);
L.tileLayer(basemapTile, basemapOptions).addTo(map);
var glacierLayers = L.control
.layers(null, {
//formatting from iH8 answer on StackOverflow https://stackoverflow.com/a/46044847/16538252
"31500 years ago": g31500,
"27500 years ago": g27500,
"24000 years ago": g24000,
"20500 years ago": g20500,
"17000 years ago": g17000,
"14600 years ago": g14600,
"11000 years ago": g11000,
})
.addTo(map);
};
var ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
/*Stylesheet by Will P. Campbell,2021*/
body {
background-color: #ececec;
}
/* idea from Roko C Buljian answer on StackOverflow: https://stackoverflow.com/q/68836662/16538252 */
[data-map] {
height: 650px;
width: 60%;
border: 5px solid black;
margin: 20px;
}
h1 {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#panel {
position: relative;
right: 0;
border: 5px outset black;
background-color: lightblue;
text-align: center;
width: 25%;
height: auto;
padding: 20px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WISCONSIN GLACIER TIME LAPSE</title>
</head>
<body>
<h1>WISCONSIN GLACIER TIME LAPSE</h1>
<!-- map data divs -->
<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>
<div data-map="glacier_3"></div>
<div data-map="glacier_4"></div>
<div data-map="glacier_5"></div>
<div data-map="glacier_6"></div>
<div data-map="glacier_7"></div>
<!--idea from Roko C Buljian answer on StackOverflow: https://stackoverflow.com/q/68836662/16538252-->
<div id="panel"><b>Glacier Information Panel</b><br>
<p>Use the checkbox and click on each glacier to learn more about them!</p>
</div>
</body>
</html>

You were on the right direction!
So, if you use all your data inside glacier_map_Data, where the properties reflect the data-* attribute of each element in the Document i.e: <div data-map="glacier_1"></div> add inside it also the properties label, shape and style :
Here's the "new" data example for every glacier_(N)
// glacier_* :
{
center: [45.5, -89.5],
zoom: 7,
label: "11000 years ago",
description: "Glacier one description info goes here...",
shape: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[/* .... */],],
},
properties: { /* .... */ },
},
],
},
style: {
color: "#e41a1c",
}
},
having that kind of data, you first need to:
Create all the LeafLet layers
Create all the LeafLet layers inside a separate Object. You'll later add that object to every map:
// Create the L.geoJSON LAYERS to be later added to each map!
const overlays = Object.entries(glacier_map_Data).reduce((acc_obj, [key, data]) => {
// Define the geoJSON layer instance
const L_geoLSON = L.geoJSON(data.shape, {style: data.style});
// Add click listener to layer
L_geoLSON.on({
click() {
EL_panel.innerHTML = `<h2>${data.title}</h2><p>${data.description}</p>`;
}
});
// Create the return Object:
acc_obj[key] = {
label: data.title,
L_geoJSON
};
// Return the accumulator (see: MDN: Array.prototype.reduce() for more info)
return acc_obj;
}, {});
the above will generate something similar as what you used in your code for var glacierLayers but - with a slight difference:
// overlays =
{
glacier_1 : {
label: "11000 years ago",
L_geoJSON: {} // the LeafLet geoJSON instance
},
// glacier 2, 3 etc...
}
having that custom object in place now, all you need is to: when looping your Maps convert it to the format expected by LeafLet {"layer description 1": geoJSON, /* etc */}
Add multiple layers to LeafLet map and make respective one active:
while looping your Maps ELements, you get the current element's data-* attribute const id = EL.dataset.map ID - that ID can be now referenced to get the active layer too:
// Maps initializator
// Applays LeafLet to each map Element `EL`
const initMap = (EL) => {
const id = EL.dataset.map; // gives back i.e: "glacier_1" 2, 3 etc...
const data = glacier_map_Data[id];
// Assign a LeafLet Map instance to a specific DOM element and set its view
const L_map = L.map(EL).setView(data.center, data.zoom);
L.tileLayer(L_basemapTile, L_basemapOptions).addTo(L_map);
// Convert the
const overlayMaps = Object.values(overlays).reduce((acc_obj, data) => {
acc_obj[data.label] = data.L_geoLSON
return acc_obj;
}, {});
// Add control layers to map:
L.control.layers(null, overlayMaps).addTo(L_map);
// Make specific one "Active" (checked!) and visible on map:
L_map.addLayer(overlays[id].L_geoJSON);
};
That's basically it. See in the below example how the click handlers are resolved to make it all work:
const EL_panel = document.querySelector("#panel");
const L_basemapTile = "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}";
const L_basemapOptions = {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',
minZoom: 0,
maxZoom: 18,
ext: "png",
};
const glacier_map_Data = {
glacier_1: {
center: [45.5, -89.5],
zoom: 7,
label: "11000 years ago",
description: "Glacier one description goes here...",
shape: {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-89.01714901099996, 47.701660041000025],
[-88.98864567199996, 47.67105872900004],
[-88.89693208899996, 47.632717624000065],
[-88.76124959199996, 47.56169631900008],
[-88.58375016199994, 47.49178961600006],
[-88.44017698199997, 47.44707161100007],
[-88.30330388599998, 47.44691295700005],
[-88.17169811099996, 47.44667491700005],
[-88.02148343399995, 47.45132287700005],
[-87.87715720599994, 47.43981218000005],
[-87.74844734199996, 47.433784306000064],
[-87.64558455399998, 47.43885976400003],
[-87.53193680099997, 47.44896815100003],
[-87.38107493899997, 47.46526214000005],
[-87.24572687999995, 47.48530297000008],
[-87.13143423099996, 47.50392737300007],
[-86.98182199599995, 47.53937042800004],
[-86.82927429899996, 47.57632309400003],
[-86.62586405499997, 47.62051563700004],
[-86.53722267999996, 47.642872296000064],
[-86.52848360499996, 47.655108436000035],
[-86.66049972099995, 47.65724573000006],
[-89.01447077999995, 47.70342257000004],
[-89.01714901099996, 47.701660041000025],
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 11000,
SHAPE_Leng: 387749.141631,
Shape_Le_1: 5.06435076694,
Shape_Area: 0.429078160361,
filename: "11000.jpg",
},
}, ],
},
style: {
color: "#e41a1c",
}
},
glacier_2: {
center: [45.5, -89.5],
zoom: 7,
label: "14600 years ago",
description: "Glacier two description goes here...",
shape: {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-90.65116417499996, 47.70293454200004],
[-90.72482365299999, 47.673924999000064],
[-90.79822703099995, 47.63344243800003],
[-90.87151684099996, 47.592913355000064],
[-90.93607653299995, 47.54240954900007],
[-90.98389479799994, 47.50486972300007],
[-91.01266156999998, 47.46605101600005],
[-91.03524057399994, 47.43585163000006],
[-91.09569047499997, 47.40672034700003],
[-91.16068607799997, 47.39608128700007],
[-91.20242634199997, 47.38136616700007],
[-91.24370674999994, 47.34807033200008],
[-91.24727017899994, 47.32089010200008],
[-91.27829107399998, 47.30054916700004],
[-91.35252049299999, 47.24684182500005],
[-91.42454322999998, 47.19454164700005],
[-91.49851758599999, 47.142169952000074],
[-91.58297018999997, 47.09531966900005],
[-91.69593298799998, 47.02941600500003],
[-91.78970295499994, 46.95941544900006],
[-91.82835428899995, 46.930232197000066],
[-91.91162510599997, 46.86744039100006],
[-91.99554737199998, 46.82743409100004],
[-92.06911560299994, 46.79183942000003],
[-92.12271105199994, 46.779428163000034],
[-92.18228311199994, 46.76116312500005],
[-92.25397574199997, 46.73548525600006],
[-92.32346255299996, 46.70837829200008],
[-92.37452539699996, 46.68875637000008],
[-92.41380912499994, 46.68507654200005],
[-92.47155654999995, 46.67669948400004],
[-92.49779041299996, 46.66041357700004],
[-92.53630909799995, 46.640992280000034],
[-92.60352557599998, 46.61519304900003],
[-92.65025475699997, 46.595545755000046],
[-92.66997578199994, 46.57508444400003],
[-92.69410222099998, 46.56023089900003],
[-92.73425967299994, 46.53498854400004],
[-92.79268852199999, 46.503571829000066],
[-92.84256524699998, 46.468051606000074],
[-92.88183268599994, 46.42849094400003],
[-92.92753540999996, 46.394466917000045],
[-92.94989701799994, 46.34959887800005],
[-92.95186608799997, 46.30954130100008],
[-92.92975250899997, 46.28153421700006],
[-92.85925850399997, 46.27331860700008],
[-92.79127616799997, 46.27357100900008],
[-92.71321257399995, 46.27830917600005],
[-92.63952461199995, 46.28860811000004],
[-92.57829646799996, 46.301436514000045],
[-92.50925582199994, 46.32440533500005],
[-92.44221727099995, 46.347289440000054],
[-92.41261793199999, 46.37792243000007],
[-92.37035638299994, 46.40309578500006],
[-92.32010085699994, 46.43555965100006],
[-92.22421472899998, 46.46604055800003],
[-92.16676037899998, 46.47714513900007],
[-92.07164040799995, 46.47747958900004],
[-91.96355058399996, 46.462242262000075],
[-91.88129117799997, 46.47505522800003],
[-91.84860834599993, 46.487018110000065],
[-91.75759648199994, 46.48702458100007],
[-91.67480884399998, 46.485409692000076],
[-91.61092690599997, 46.49347106100004],
[-91.53298945499995, 46.517401738000046],
[-91.46184380399995, 46.56548027200006],
[-91.39439978099995, 46.60108704600003],
[-91.31293960199997, 46.66110276500007],
[-91.18166198599994, 46.731109263000064],
[-91.12163612599994, 46.77552488500004],
[-91.02482937399998, 46.78786178000007],
[-90.98063779999995, 46.797773128000074],
[-90.96927097899999, 46.782631328000036],
[-90.95760682899999, 46.75034730400006],
[-91.00666688699994, 46.706114670000034],
[-91.04472870499995, 46.66958103600007],
[-91.09664029099997, 46.636712301000045],
[-91.13687825499994, 46.57726777900007],
[-91.18839689999999, 46.532931133000034],
[-91.22591702999995, 46.48300696300004],
[-91.22480609399997, 46.433490293000034],
[-91.18738430599996, 46.359591409000075],
[-91.12616009499999, 46.325921202000075],
[-90.99618142799994, 46.285217860000046],
[-90.89141040599998, 46.26322281700004],
[-90.77320977799997, 46.256463342000075],
[-90.59165834999999, 46.22897204100008],
[-90.47359851299996, 46.22571206300006],
[-90.21011180299996, 46.22840493600006],
[-90.07834092799999, 46.21714115300006],
[-89.99052527699996, 46.20002253800004],
[-89.63663278999996, 46.19754044900003],
[-89.30472963899996, 46.19409865700004],
[-89.14564109599996, 46.193020372000035],
[-89.10690236799996, 46.21367948200003],
[-88.97509624199995, 46.21828879600008],
[-88.74396655199996, 46.24455812300005],
[-88.43920812199997, 46.263282384000036],
[-88.18463496799995, 46.27857294900008],
[-88.00977466999996, 46.175646776000065],
[-87.99389010599998, 46.04677587200007],
[-88.03142757799998, 45.90454467200004],
[-88.07824403599994, 45.733876871000064],
[-88.11693049199994, 45.64521481500003],
[-88.15630836499997, 45.53154329200004],
[-88.25459067099996, 45.31159869500004],
[-88.32963412999999, 45.169820886000025],
[-88.40834291299996, 45.06376788400007],
[-88.48581727299995, 44.99336901300006],
[-88.79481685399998, 44.90415892300007],
[-88.88639060299994, 44.84792515000004],
[-88.88261184299995, 44.78357859500005],
[-88.94319230899998, 44.76271860500003],
[-88.97231671099996, 44.62840776200005],
[-89.00318747399996, 44.57866096200007],
[-89.02004076199995, 44.46804576400007],
[-89.04649611099995, 44.37537170000007],
[-89.10740785599995, 44.30082986600007],
[-89.08883401599996, 44.21492877800006],
[-89.02088686299999, 44.117891385000064],
[-88.83475711099999, 43.998228366000035],
[-88.68786675299998, 43.92517043600003],
[-88.62533997199995, 43.84939582800007],
[-88.57299960499995, 43.76656712400006],
[-88.46045322499998, 43.73294585800005],
[-88.39507582999994, 43.78207346700003],
[-88.33422715399996, 43.841949181000075],
[-88.26389529699998, 43.883781630000044],
[-88.26171217099994, 43.95878690500007],
[-88.25436012199998, 44.04085874400005],
[-88.13665456199999, 44.003267237000045],
[-88.04759712699996, 44.00177966800004],
[-87.97724235799996, 44.03271403600007],
[-87.91264601899996, 44.03869804900006],
[-87.85100620199995, 43.96251794800003],
[-87.84031258699997, 43.84797273600003],
[-87.77934997599993, 43.76104507100007],
[-87.69970123099995, 43.65226923900008],
[-87.59451333699997, 43.57506238600007],
[-87.41895871099996, 43.54264457600004],
[-87.19847646199997, 43.53030423300004],
[-87.05535483399996, 43.54457143500008],
[-86.90199607799997, 43.56552812900003],
[-86.73246550099998, 43.61082922300005],
[-86.59688342599998, 43.66046715300007],
[-86.47311237099996, 43.75675903800004],
[-86.41494068499998, 43.905016706000026],
[-86.38487126299998, 43.99339418100004],
[-86.33611529199999, 44.14190469500005],
[-86.23094835399996, 44.23494796600005],
[-86.07578505799995, 44.32618325100003],
[-85.99546925899995, 44.409139733000075],
[-85.93780993299998, 44.44997420000004],
[-85.94529025199995, 44.48596854700003],
[-85.88575853799995, 44.551719080000055],
[-85.82903334099996, 44.64612264200008],
[-85.67299230199995, 44.65817042300006],
[-85.49721378799995, 44.66565292100006],
[-85.37988257999996, 44.69311130300008],
[-85.26070073999995, 44.74180747400004],
[-85.20102381099997, 44.79647274300004],
[-85.12731019099994, 44.896951657000045],
[-85.07522771199996, 44.976883351000026],
[-84.82164997499996, 47.579520486000035],
[-90.67336377599997, 47.71242423500007],
[-90.65116417499996, 47.70293454200004],
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 1,
Years_Ago: 14600,
SHAPE_Leng: 2202706.20984,
Shape_Le_1: 25.0028099606,
Shape_Area: 17.1995913109,
filename: "14600.jpg",
},
}, ],
},
style: {
color: "blue",
}
},
glacier_3: {
center: [45.5, -89.5],
zoom: 7,
label: "17000 years ago",
description: "Glacier three description goes here...",
shape: {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-90.80257177799996, 47.694422805000045],
[-90.86222397199998, 47.665247442000066],
[-90.91508604399996, 47.62484245700006],
[-90.95803303899999, 47.58544825300004],
[-91.01917862199997, 47.54492503300003],
[-91.09271780999995, 47.49663293300006],
[-91.13744776499999, 47.48572257300003],
[-91.19432270499999, 47.453717991000076],
[-91.22598803099999, 47.42671888800004],
[-91.25327888599998, 47.39404483100003],
[-91.29858830799998, 47.35449497500008],
[-91.35488375299997, 47.30908341500003],
[-91.41382942899997, 47.261706307000054],
[-91.49191066199995, 47.20262235200005],
[-91.56326114699999, 47.15786191900003],
[-91.61665197199994, 47.12283520300008],
[-91.64494317099997, 47.09005134100005],
[-91.68031442299997, 47.061918510000055],
[-91.73452409299995, 47.01444274000005],
[-91.74858348099997, 46.94175084200003],
[-91.73854830599998, 46.900235628000075],
[-91.72864410799997, 46.86228889100005],
[-91.70514887199994, 46.83287815500006],
[-91.66600897199999, 46.80131027900006],
[-91.62366569299996, 46.776917671000035],
[-91.55026225899996, 46.75531549600004],
[-91.46858503999994, 46.74567813800007],
[-91.38377803899994, 46.747925758000065],
[-91.24871820299995, 46.74947940000004],
[-91.19708552899993, 46.76431757600005],
[-91.14894001899995, 46.781478469000035],
[-91.08834267399999, 46.78445186300007],
[-91.00692035499998, 46.786387758000046],
[-90.97908530999996, 46.78067668300008],
[-90.94737340199998, 46.75118052900007],
[-90.93838366699998, 46.73220616100008],
[-90.94831208099998, 46.70593260000004],
[-90.95989734799997, 46.67607254100005],
[-91.00120538799996, 46.66500363200004],
[-91.02850889499996, 46.64571269000004],
[-91.05754397599998, 46.62758970900006],
[-91.07281220699997, 46.61316088700005],
[-91.09452456799994, 46.57604782900006],
[-91.11295233699997, 46.54848696500005],
[-91.11776169199999, 46.53058148500003],
[-91.12399765899994, 46.498374786000056],
[-91.12685495599999, 46.46977266600004],
[-91.11093806599996, 46.449688397000045],
[-91.08423164199996, 46.405892745000074],
[-91.04970107799994, 46.400261948000036],
[-91.00833934399998, 46.39706236200004],
[-90.95158052599999, 46.39873937200008],
[-90.91358681599996, 46.39071504300006],
[-90.87046244599998, 46.383907855000075],
[-90.81185063999999, 46.37600480700007],
[-90.76383959199995, 46.38705097700006],
[-90.72438110399997, 46.39564190900006],
[-90.63847221899994, 46.40686916000004],
[-90.56462655999997, 46.42273526000008],
[-90.51134690599997, 46.432510584000056],
[-90.45289127799998, 46.44347225900003],
[-90.32730869399995, 46.46771218100008],
[-90.26707800199995, 46.483346151000035],
[-90.14297639499995, 46.48118746100005],
[-89.84300789599996, 46.47969872700003],
[-89.65732711399994, 46.40785826900003],
[-89.46590880699995, 46.26901435500008],
[-89.38473015499994, 46.15906824800004],
[-89.37232217399998, 46.044697961000054],
[-89.29895872499998, 45.89662691800004],
[-89.19127953899994, 45.795896034000066],
[-89.04288713099999, 45.713779739000074],
[-88.81317766399997, 45.64494244800005],
[-88.52326877299998, 45.56535339100003],
[-88.34772919599999, 45.53913320500004],
[-88.28172005799996, 45.481001443000025],
[-88.24935543399994, 45.432878068000036],
[-88.29265439599999, 45.34303229100004],
[-88.51505546999994, 45.10321006100003],
[-88.68092601499995, 44.90994226600003],
[-88.83212689599998, 44.72580551000004],
[-88.88282864799999, 44.521468026000036],
[-88.93928291699996, 44.345738820000065],
[-88.91597518599997, 44.16924722700003],
[-88.90511613299998, 44.04050887900007],
[-88.77686594499994, 43.85339730000004],
[-88.63498640399996, 43.723149343000046],
[-88.45317832499995, 43.63983570600004],
[-88.30836892799994, 43.656842280000035],
[-88.18115130199999, 43.74064944300005],
[-88.10533528899998, 43.64412736300005],
[-88.07694916099996, 43.50548020300005],
[-88.01697621299996, 43.33769126900006],
[-88.02053189599997, 43.22816265400007],
[-87.97488779599996, 43.032002686000055],
[-87.92574681699995, 42.754748824000046],
[-87.89018209199998, 42.46818362000005],
[-87.89013807499998, 42.277565752000044],
[-87.84692496099996, 42.03848385400005],
[-87.74604783999996, 41.817324159000066],
[-87.58802798299996, 41.613950112000055],
[-87.35004156799994, 41.532454906000055],
[-87.03022367399996, 41.59135333200004],
[-86.77141863699995, 41.68921014000006],
[-86.51666584599997, 41.81518954100005],
[-86.41223131899994, 41.97398477400003],
[-86.29809079699999, 42.180014037000035],
[-86.12804763999998, 42.445983640000065],
[-86.00558320699997, 42.65141657300006],
[-85.85659114999999, 43.04632439000005],
[-85.84500492099994, 43.21741730100007],
[-86.03504616299995, 43.40045063700006],
[-85.91772016199997, 43.686927799000046],
[-85.72568643499994, 43.89427499900006],
[-85.70752393799995, 44.146079014000065],
[-85.57577670099994, 44.226791743000035],
[-85.33539704999998, 44.25055543500008],
[-85.15006930999994, 44.24758344700007],
[-84.83610884999996, 47.577689332000034],
[-90.81976554599999, 47.700655631000075],
[-90.80257177799996, 47.694422805000045],
],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 2,
Years_Ago: 17000,
SHAPE_Leng: 2261336.18634,
Shape_Le_1: 24.4337768448,
Shape_Area: 21.6098467975,
filename: "17000.jpg",
},
}, ],
},
style: {
color: "#4daf4a",
}
}
};
// Create the L.geoJSON LAYERS to be later added to each map!
const overlays = Object.entries(glacier_map_Data).reduce((acc_obj, [key, data]) => {
// Define the geoJSON layer instance
const L_geoJSON = L.geoJSON(data.shape, {
style: data.style
});
// Add click listener to layer
L_geoJSON.on({
click() {
EL_panel.innerHTML = `<h2>${data.label}</h2><p>${data.description}</p>`;
}
});
// Create the return Object:
acc_obj[key] = {
label: data.label,
L_geoJSON
};
// Return the accumulator (see: MDN: Array.prototype.reduce() for more info)
return acc_obj;
}, {});
// console.log(overlays); // See it to understand it!
// Maps initializator
// Applays LeafLet to each map Element `EL`
const initMap = (EL) => {
const id = EL.dataset.map; // gives back i.e: "glacier_1" 2, 3 etc...
const data = glacier_map_Data[id];
// Assign a LeafLet Map instance to a specific DOM element and set its view
const L_map = L.map(EL).setView(data.center, data.zoom);
L.tileLayer(L_basemapTile, L_basemapOptions).addTo(L_map);
// Convert the
const overlayMaps = Object.values(overlays).reduce((acc_obj, data) => {
acc_obj[data.label] = data.L_geoJSON
return acc_obj;
}, {});
// Add control layers to map:
L.control.layers(null, overlayMaps).addTo(L_map);
// Make specific one "Active" (checked!) and visible on map:
L_map.addLayer(overlays[id].L_geoJSON);
};
// Loop map elements in DOM and assign
var ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
/*Stylesheet by Will P. Campbell,2021*/
body {
background-color: #ececec;
}
[data-map] {
height: 650px;
width: 60%;
border: 5px solid black;
margin: 20px;
}
h1 {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#panel {
position: fixed;
right: 0;
top: 0;
border: 5px outset black;
background-color: lightblue;
text-align: center;
width: 25%;
height: auto;
padding: 20px;
}
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<h1>WISCONSIN GLACIER TIME LAPSE</h1>
<!-- map data divs -->
<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>
<div data-map="glacier_3"></div>
<div id="panel"><b>Glacier Information Panel</b><br>
<p>Use the checkbox and click on each glacier to learn more about them!</p>
</div>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type="text/javascript" src="js/main.js"></script>

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: How to get light default map?

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>

Mapbox GL JS get features within geoson boundary

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>

Can't add markers to mapbox map with mapbox-gl.js

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).