Show CMS location info when selected on a Mapbox map


I’ve recently implemented a Mapbox globe with the help of this tutorial.

Got a great result but now I can’t seem to crack the next challenge.

The yellow dots represent various CMS locations (coordinates get pulled from the CMS), and I would like to display the rest of the location information (i.e. name, description, images, etc.) in the left column once a location gets clicked.

Here is the piece of code that makes the map run and displays the dots.

<!-- Mapbox with CMS markers -->
    // Replace with your own Mapbox access token
    mapboxgl.accessToken = 'pk.eyJ1Ij....';

        // Get the location data from the displayed elements
    const getLocationData = () => {
      const locationElements = document.querySelectorAll('#location-data .location');
      const locations = [];

      locationElements.forEach(element => {
        const id = element.getAttribute('data-id');
        const lat = parseFloat(element.getAttribute('data-lat'));
        const lng = parseFloat(element.getAttribute('data-lng'));

        if (!isNaN(lat) && !isNaN(lng)) {
          locations.push({ id, lat, lng });

      return locations;

    // Initialize the map
    const initializeMap = () => {
      const locations = getLocationData();

      if (locations.length === 0) {
        console.error('No locations found.');

      const map = new mapboxgl.Map({
        container: 'map',
        // You can change the style url below with your own style from Mapbox
        style: 'mapbox://styles/...',
        center: [24.115625, 56.946203],
        zoom: 5.5

      map.addControl(new mapboxgl.NavigationControl());

      locations.forEach(location => {
        const markerElement = document.createElement('div');
        markerElement.className = 'marker';

        const marker = new mapboxgl.Marker({
          element: markerElement,
          anchor: 'bottom' // Set the anchor point to bottom

        markerElement.addEventListener('click', () => {
          console.log('Marker clicked:',;
          map.flyTo({ center: [location.lng,], zoom: 16 });

    // Call the function to initialize the map

So far, I tried updating the code to include other CMS item attributes, but it seems like attributes can’t pull Rich Text and image fields, which I need for this use case.

I suspect that the solution may involve an Embed element in some form but unfortunately haven’t found a good approach yet.


The basic approach is to use a Collection List to retrieve all of the data you need. Hide it, and use script to extract the info.

Mapbox may have some features for tagging content for its data extraction, but if not, just add your own custom attributes and use them to select and extract your data.

Thanks! Complete beginner with JS but will look around.

Hi Arthur, how did you get on with this? I am starting a project like this and about to go through the same problem.