Mapbox is not loading on all pages?

Question

Mapbox is being used across the site, however, isn't loading on two specific pages?

There are three maps, all of which display fine on this page. And here is a working example of the page I am looking to replicate elsewhere, only with a different map. However, on this page the map doesn't load?

This is the javascript I'm using, each map has a different var, stroud, gloucester and brimscombe.

mapboxgl.accessToken = 'validtokenhere';

// STROUD
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Stroud clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.248550,
                    51.741290
                ]
            }
        },
    ]
};

var stroud = new mapboxgl.Map({
    container: 'stroud',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.248550,51.741290],
    zoom: 13
});

// disable map zoom when using scroll
stroud.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(stroud);
});

// GLOUCESTER
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Gloucester clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.248140,
                    51.870560
                ]
            }
        },
    ]
};

var gloucester = new mapboxgl.Map({
    container: 'gloucester',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.248140,51.870560],
    zoom: 13
});

// disable map zoom when using scroll
gloucester.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(gloucester);
});

// BRIMSCOMBE
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Brimscombe clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.063020,
                    51.892550
                ]
            }
        },
    ]
};

var brimscombe = new mapboxgl.Map({
    container: 'brimscombe',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.063020,51.892550],
    zoom: 13
});

// disable map zoom when using scroll
brimscombe.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(brimscombe);
});

and then each container is

<section class="location-map-image">
  <div id="stroud" class="map" style="width: 100%; height: 263px;"></div>
</section>

obviously the div id changes to match the location I wish to display.

I am expecting to see Gloucester and Brimscombe load like Stroud does?

Console log is showing

Error: Container 'stroud' not found. map.js:337:22
    r map.js:337
    <anonymous> app-min.js:12508

So it appears that the script gets stuck when it cannot find the div id stroud. What should I be doing when I only want to show gloucester or brimscombe?

BDD · Accepted Answer · 2019-05-17T12:46:33.373

0

TL:DR; There is no HTML element for the map to render in

The error you're seeing is because there is no div tag on this page with the id of stroud or brimscombe, so Mapbox doesn't know where to render the map.

If you go to the stroud clinic page, you'll notice that you get errors for briscombe and gloucester, because neither of those divs exist.

EDIT:

If you want to not see the errors, there are a few different ways you could do it, but I'd do it something like this:

// Checking if the element stroud exists
if (!!document.getElementById('stroud')) {
  // If it does, run the stroud code
}

You can repeat that pattern for your other two as well. No need to provide an else unless you want to.

edited May 17 '19 at 12:46

answered May 15 '19 at 20:57

BDD

665
17
31

Yes that's right, so I guess I need some kind of if statement, for example, if stroud, don't run briscombe or gloucester – Grant Smith May 16 '19 at 09:47
@GrantSmith The errors won't cause any problems, but if you want to get rid of them, I added a simple `if` statement above. If you find the answer helpful, please accept it! – BDD May 17 '19 at 12:47

Mapbox is not loading on all pages?

1 Answers1