Hello everyone; I am trying to parse php variables from my blueprint into js and am really having trouble, and was hoping someone could point me in the right direction or quickly give me a run down on how they would do it; I’d greatly appreciate it!
In short I am trying to show map markers on a mapbox iframe based on data in a structured field. Yes there are some plugins that do similar things, but I am wanting to do it myself for a few reasons.
I have a structure field as follows:
pointOfInterests:
label: Local Area
type: structure
fields:
name:
label: Name
type: text
distance:
label: Distance (miles)
type: number
coordinates:
label: Coordinates
type: text
And each item in the field is a ‘point of interest’ that I’m listing below:
<?php $pois = $page->pointOfInterests()->toStructure();
foreach ($pois as $poi): ?>
<li>
<div class="name"><?= $poi->name() ?></div>
<div class="distance"><?= $poi->distance() ?></div>
</li>
<?php endforeach ?>
But each of these also need to show as a marker on the map. I can hard code this as follows:
<script>
mapboxgl.accessToken =
'pk.eyJ1Ijo3423sVybWFmaWEiLCJhIjoiY2xpd3hqc343jNqcDlpN3N4M2R6NyJ9.4AxwvrOlZlT9WFejdZqPsQ';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [1.311971, 51.120136],
zoom: 10
});
// Create a default Marker and add it to the map.
const marker1 = new mapboxgl.Marker()
.setLngLat([1.3818405495821078, 51.15176168300233])
.addTo(map);
const marker2 = new mapboxgl.Marker()
.setLngLat([1.4029068726455256, 51.18208586858427])
.addTo(map);
const marker3 = new mapboxgl.Marker()
.setLngLat([1.2885619311005254, 51.15589304162437])
.addTo(map);
</script>
But I need a way to create a numbered marker constant for each item and I can only find examples of how to do this with a single variable, rather than from a forloop,
In particular I am referring to these constants:
const marker1 = new mapboxgl.Marker()
.setLngLat([1.3818405495821078, 51.15176168300233])
.addTo(map);
Would greatly appreciate the help - thanks!