Develop Reference

Yandex Maps API: add multiple placemarks - javascript

I understand how to create a single placemark and if I need to create more than one I do it like that:
ymaps.ready(init);
function init() {
var map = new ymaps.Map('map', {
center: [55.76, 37.64], // lat, long
zoom: 5,
controls: ['zoomControl', 'fullscreenControl']
});
var data = [
{
name: 'Moskow',
coordinates: [55.684758, 37.738521]
},
{
name: 'Saint Petersburg',
coordinates: [59.939095, 30.315868]
},
];
for (var i = 0; i < data.length; i++) {
map.geoObjects.add(new ymaps.Placemark([data[i]['coordinates'][0], data[i]['coordinates'][1]], {
balloonContent: data[i]['name']
}));
}
}
But is there a better way to add bunch of data to the map without a cycle?

Yes, use Object Manager and organize your data into objects collection. Yandex Maps API provides convenient way for that case.
Here is the simple example according to your data:
ymaps.ready(init);
function init() {
var map = new ymaps.Map('map', {
center: [55.76, 37.64], // lat, long
zoom: 5,
controls: ['zoomControl', 'fullscreenControl']
});
// Objects collection
var collection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
id: 0,
geometry: {
type: "Point",
coordinates: [55.684758, 37.738521]
},
properties: {
balloonContent: "Moskow"
}
},
{
type: "Feature",
id: 1,
geometry: {
type: "Point",
coordinates: [59.939095, 30.315868]
},
properties: {
balloonContent: "Saint Petersburg"
}
}
]
};
// Object Manager
objectManager = new ymaps.ObjectManager({ clusterize: true });
objectManager.add(collection);
map.geoObjects.add(objectManager);
}
Read about Object Manager. There you can find more examples.

Related

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>

I have the following code but when I click on a point to open a popup it returns 'undefined' and I cannot seem to work out why.
I'm pulling the description field from the geoJSON external source which I have control over but for some reason it just does not want to populate the description HTML in my array. I took the example for the popup from the mapbox website so I know it works there. I have checked, rechecked and triple checked but I think I cannot see the tree for the forest lol.
Could someone maybe help me please? thanks.
<script>
// ajax loading gif
$(document).ready(function () {
setTimeout(function () {
$("#ajax-loader").removeClass("is-active");
}, 6000);
});
// vars
var initialOpacity = 0.2;
var opacity = initialOpacity;
// mapbox api
mapboxgl.accessToken = "hidden_api_key";
var map = new mapboxgl.Map({
container: "map", // container ID
style: "mapbox://styles/mapbox/dark-v10",
center: [-2.582861, 53.5154517],
zoom: 5,
maxZoom: 16,
minZoom: 0,
});
map.on("load", function () {
// get hotspot locations
map.addSource("hotspot_locations", {
type: "geojson",
data: "https://netmaker.io/dashboard/public_actions.php?a=ajax_helium_miners_location",
cluster: false,
clusterMaxZoom: 10, // max zoom to cluster points on
clusterRadius: 50, // radius of each cluster when clustering points (defaults to 50)
});
// add 300m circle around each hotspot
map.addLayer({
id: "circle500",
type: "circle",
source: "hotspot_locations",
paint: {
"circle-radius": {
stops: [
[0, 1],
[16, 600],
],
base: 2,
},
"circle-color": "green",
"circle-opacity": 0.1,
"circle-stroke-width": 0,
"circle-stroke-color": "white",
},
});
// add hotspot location
map.addLayer({
id: "hotspots-layer",
type: "circle",
source: "hotspot_locations",
paint: {
"circle-radius": 2,
"circle-stroke-width": 2,
// "circle-color": "#36d293",
"circle-color": "white",
"circle-stroke-color": [
"match",
["get", "status"],
"online",
"#36d293",
"offline",
"#d23636",
"orange", // other
],
// "circle-stroke-color": '#36d293',
},
});
});
// ajax call hotspots location by name
var customData;
$.ajax({
async: false,
type: "GET",
global: false,
dataType: "json",
url: "https://netmaker.io/dashboard/public_actions.php?a=ajax_helium_miners_location_customdata",
success: function (data) {
customData = data;
},
});
// custom data using hotspot name
function forwardGeocoder(query) {
var matchingFeatures = [];
for (var i = 0; i < customData.features.length; i++) {
var feature = customData.features[i];
if (feature.properties.title.toLowerCase().search(query.toLowerCase()) !== -1) {
// feature["place_name"] = '<img src="https://netmaker.io/dashboard/images/helium_logo.svg" alt="" width="15px"> ' + feature.properties.title;
feature["place_name"] = feature.properties.title;
feature["center"] = feature.geometry.coordinates;
feature["place_type"] = ["hotspot"];
matchingFeatures.push(feature);
}
}
return matchingFeatures;
}
// add the control to the map.
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: "Search: address or hotspot name",
mapboxgl: mapboxgl,
})
);
map.on("click", "hotspots-layer", function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);
});
map.on("mouseenter", "hotspots-layer", function () {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "hotspots-layer", function () {
map.getCanvas().style.cursor = "";
});
</script>

You're recieving an undefined because e.features[0].properties.description doesn't exist in the "hotspots-layer" data.
"features": [
{
"type": "Feature",
"properties": {
"status": "online"
},
"geometry": {
"type": "Point",
"coordinates": [
"119.73479929772",
"30.240836896893",
0
]
}
},
The only "description" in this case that you can return is the e.features[0].properties.status as seen here:
map.on("click", "hotspots-layer", function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.status;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
console.log(description)
new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);
});
This code snippet will allow the click event to show you the status when you interact with the hotspot location.

Ill start out by just explaining what I'm trying to achieve. I'm running an arcgis application based on the javascript API. I'm Rendering a CSVLayer into my SceneView like such:
require(["esri/Map", "esri/layers/CSVLayer", "esri/views/SceneView", "esri/widgets/BasemapToggle", "esri/Graphic", "esri/tasks/support/Query", "esri/widgets/Legend", "esri/widgets/Expand"],
function (Map, CSVLayer, SceneView, BasemapToggle, Graphic, Query, Legend, Expand) {
var csvLayer = new CSVLayer({
url: numberLayers[0].Url,
popupTemplate: template,
featureReduction: {
type: "selection"
}
});
csvLayer.renderer = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: [255, 255, 255, 1],
outline: { color: [0, 0, 0, 0.4] },
size: 16,
},
label: "PurpleAir Sensors",
visualVariables: [colorVisual]
};
var map = new Map({ basemap: "streets-navigation-vector", layers: csvLayer });
var view = new SceneView({
container: "divSensorMapContainer",
camera: {
position: [
-119.289320,
35.216734,
2100000,
],
},
map: map,
center: centerPoint,
constraints: {
altitude: {
min: 0,
max: 9000000,
},
},
});
What i want to do is filter this data based on the attributes defined in the CSVLayer. Ive tried doing this using the .whenLayerView function to capture the layerview and then run a .filter property to filter the dataset.
view.whenLayerView(csvLayer)
.then(function (layerView) {
sensorLayerView = layerView;
var newQuery = csvLayer.createQuery();
newQuery.where = "PM25 > '40'";
sensorLayerView.filter = newQuery;
csvLayer.queryFeatures(newQuery).then(function (result) {
if (highlight) {
highlight.remove();
}
highlight = sensorLayerView.highlight(result.features);
});
view.ui.move(["compass", "zoom", "navigation-toggle"], "bottom-right");
});
Now in this .whenLayerView function we get the layerview, define a query based on the data set, and then do two things:
Highlight sensors based on the query information.
Run a filter property on the layerView. (The Api reference information is given here:https://developers.arcgis.com/javascript//latest/api-reference/esri-views-layers-CSVLayerView.html#filter)
This is the output:
enter image description here
So does anyone know what I'm doing wrong? I used a reference tutorial to get this far, you can find that here:
https://developers.arcgis.com/javascript//latest/sample-code/featurefilter-attributes/index.html

The argument for the filter is just an object with the "where" property, not an ESRI query object.
So it should just be:
sensorLayerView.filter = {
where: "PM25 > '40'"
};
This will autocast as a new FeatureFilter

I am trying to set the visibility of polylines based on a property. I use forEach to iterate over the features in the GeoJson data but when I try and call setMap on the array, I get type error: setMap is not a function. I have also tried pushing the resulting features into a new array with the same result.
map.data.loadGeoJson(
'data/trails2018.geojson', {},
function(features) {
console.log("loadGeoJson callback "+features.length);
map.data.forEach(function(feature) {
var skill = feature.getProperty('skill_leve');
if (skill == 'ADVANCED'){
feature.setMap(null);
}
});
});

You control the visibility of features on a Data Layer with the style property visible.
map.data.setStyle(function(feature) {
var visible = false;
if (feature.getProperty('skill_level')) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
visible = true;
}
}
return /** #type {google.maps.Data.StyleOptions} */ ({
strokeColor: "blue",
visible: visible
});
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(-23.55865, -46.65953),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var features = map.data.addGeoJson(geoJson);
console.log("addGeoJson returns " + features.length);
map.data.forEach(function(feature) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
// feature.setMap(null);
}
});
map.data.setStyle(function(feature) {
var visible = false;
if (feature.getProperty('skill_level')) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
visible = true;
}
}
return /** #type {google.maps.Data.StyleOptions} */ ({
strokeColor: "blue",
visible: visible
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": 1,
"skill_level": "ADVANCED"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-43.48283, -23.02487],
[-43.65903, -23.55888]
]
}
},
{
"type": "Feature",
"properties": {
"id": 2,
"skill_level": "BEGINNER"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-46.65953, -23.02487],
[-46.65903, -23.55888]
]
}
}
]
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

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);
});