The code on that page https://www.corobori.com/MaboxWithMarkerAndPopUp.html shows information’s details only when clicking on the marker. I would like to have those popups opened on windows load. I don’t see where to change my code
function showMap(pData) {
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtaGVybWVzIiwiYSI6ImNpbGxjeGhmYzVvMm52bm1jdmx0NmtvbXoifQ.uf5gBnnbU05bnaw7atDu9A';
let map = new mapboxgl.Map({
container: 'travel-map',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 11,
center: [-77.034084142948, 38.909671288923]
});
map.on('load', function (e) {
var locations = JSON.parse(pData);
var features = Array()
locations.features.forEach(function (element) {
feature = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': element.geometry.coordinates
},
'properties': {
'title': element.properties.phoneFormatted,
'visits': element.properties.crossStreet
}
}
features.push(feature)
})
map.addSource("locations", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": features,
}
})
features.forEach(function (marker) {
var popup = new mapboxgl.Popup()
.setHTML('<div style="padding:0.3rem 0.3rem 0;text-align:center;">'
+ '<h2 style="font-size:16px;margin:0 0 0.3rem;">' + marker.properties.title + '</h2>'
+ '<p style="font-size:12px;margin:0;">Visits: ' + marker.properties.visits + '</p></div>');
new mapboxgl.Marker()
.setLngLat(marker.geometry.coordinates)
.setPopup(popup)
.addTo(map);
});
});
}