We have successfully integrated mapbox gl js into our system. Our map displays locations/stores that are clickable, showing a mapbox popup with contact information and opening hours when clicked.
https://i.sstatic.net/QYyBf.png
We aim to use parameters in the URL to easily access specific listings (stores/locations). For instance, by accessing "store locator" with ID 1 in the URL, we want the map to focus on that location and display the corresponding mapbox popup for location 1. In this scenario, let's assume the JSON property "LocationX" is assigned an ID of 1
I attempted to achieve this using the code below, but it was unsuccessful
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const storeID = urlParams.get('branch')
console.log(storeID);
$(document).ready(function() {
if (storeID == "1") {
$("#link-0").click();
};
})
#Link-0 is the id for one of the locations/listings.
<div id="listing-0" class="item active"><a href="#/" class="title" id="link-0">Broxburn</a><div>
Mapbox GL JS
/**
* Add the map to the page
*/
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-1.5466858011960802, 53.478230478528126],
zoom: 5,
scrollZoom: true
});
// Add geolocate control to the map.
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
// When active the map will receive updates to the device's location as it changes.
trackUserLocation: true,
// Draw an arrow next to the location dot to indicate which direction the device is heading.
showUserHeading: true
})
);
const stores = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-3.4524379167753025, 55.942792181678804]
},
'properties': {
'refName': 'Broxburn',
'phoneFormatted': 'xxxxxxxxxxxxxxxxxx',
'phone': 'xxxxxxxxxxxxxxxxxx',
'phone2': 'xxxxxxxxxxxxxxxxxx',
'address': 'xxxxxxxxxxxxxxxxxx',
'city': 'xxxxxxxxxxxxxxxxxx',
'country': 'xxxxxxxxxxxxxxxxxx',
'postalCode': 'xxx xxx',
'email': 'xxxxxxxxxxxxxxxxxx',
'service1': 'xxxxxxx',
'service2': 'xxxxxxx',
'weekday': 'xxxxxxx - xxxxxxx',
'weekend': 'xxxxxxx - xxxxxxx',
'sunday': 'Closed'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-2.9544548591328614, 54.92245269446434]
},
'properties': {
'refName': 'Carlisle',
'phoneFormatted': 'xxxxxxxxxxxxxxxxxx',
'phone': 'xxxxxxxxxxxxxxxxxx',
'phone2': 'xxxxxxxxxxxxxxxxxx',
'address': 'xxxx...