This is an example which requires Mura CMS ExtendedAttributes for Longitude and Latitude, a ZoomLevel Setting as well as a imCompanyName. We take a center basd on a company's location, then expand the boundaries for the map to prevent scrolling off to Timbuktu, and also limit the zoom level (we seek local directions after all, not an image of a …

Using MapBox in Mura CMS with Extended Attributes

<cfset companyName = "#m.siteConfig('imCompanyName')#">  
<cfset Lng1 = #m.siteConfig('imPositionLongitude')#>
<cfset Lat1 = #m.siteConfig('imPositionLatitude')#>
<cfset Zoom1 = #m.siteConfig('imPositionZoom')#>
<cfset BoundsSWLng1 = Lng1-2.15>
<cfset BoundsSWLat1 = Lat1-4.00>
<cfset BoundsNELng1 = Lng1+8.55>
<cfset BoundsNELat1 = Lat1+4.55>

<div class="col-md-7">
<!--- MapBox GL JS map --->
<div id='map' style='width: 100%; height: 400px;' class="z-depth-2"></div>
<script>
mapboxgl.accessToken = '<YOUR ACCESS TOKEN HERE>';

if (!mapboxgl.supported()) {
    alert('Hinweis: Ein Browser der aktuellen Generation (IE Edge, Firefox, Chrome) zeigt Ihnen Inhalte schneller an, und ist zudem sicherer. Mit Ihrem Browser funktioniert aus Sicherheitsgruenden bspw. diese Kartenansicht nicht.');
} else {

// Sets bounds as max
var bounds = [
    [#BoundsSWLng1#, #BoundsSWLat1#], // Southwest coordinates
    [#BoundsNELng1#, #BoundsNELat1#]  // Northeast coordinates
];


var map = new mapboxgl.Map({
    container: 'map',
	center: [#Lng1#, #Lat1#],
    minZoom: 7,
    maxZoom: 19,
    zoom: 16,


    maxBounds: bounds, 
    style: 'mapbox://styles/mapbox/streets-v9'
});

map.on('load', function () {
    map.addSource("points", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                	"geometry": {
                    "type": "Point",
                    "coordinates": [#Lng1#, #Lat1#]
                },
                "properties": {
                    "title": "#companyName#",
                    "icon": "car"
            	},   
            }]
        }
    });

    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": "points",
        "layout": {
            "icon-image": "{icon}-15",
            "text-field": "{title}",
            "text-font": ["Lato", "Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0.2, -3.0],
            "text-anchor": "top"
     
        }
    });
});


// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

	// scrollZoom is really annoying, disable it.
    map.scrollZoom.disable();}
</script>