Add a MapBox Map to a contact form or page.

Step 1: Add extended attributes to Site/default:

imPositionLongitude, imPositionLatitude

imCompanyName (for the marker)

imPositionZoom (initial zoom setting for the map)

 

Step 2: Add this code where the map should appear:

<!--- MapBox GL --->
<script src="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
      
<!-- variables for map drawing (BoundsSWLng1 BoundsSWLat1 BoundsNELng1 BoundsNELat1, Zoom, Lat1, Lng1)   -->
<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>


  <!--- MapBox GL JS map (INNOMEGA Credentials, scrambled in this public code) --->
        <div id='map' style='width: 100%; height: 400px;' class="card"></div>
        <script>
                mapboxgl.accessToken = 'pk.XXXIjoiaWXXXXqNXEwXXX.KlXXXyd9HdXXXXX';
                
                if (!mapboxgl.supported()) {
                    alert('Hinweis: Wenn Sie diesen Hinweis sehen, liegt entweder ein Fehler der Konfiguration vor oder Sie verwenden einen älteren Browser. Mit einem Browser der aktuellen Generation (IE Edge, Firefox, Chrome) werden Inhalte schneller angezeigt und Sie haben weitere Sicherheitsvorteile.');
                } 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",
                                    "line-color": "blue"
                                },   
                            }]
                        }
                    });
                
                    map.addLayer({
                        "id": "points",
                        "type": "symbol",
                        "source": "points",
                        "layout": {
                            "icon-image": "{icon}-15",
                            "text-field": "{title}",
                            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                            "text-offset": [0.2, -4.0],
                            "text-anchor": "top"
                     
                        }
                    });
                });
                
                
                    // Add zoom and rotation controls to the map.
                    map.addControl(new mapboxgl.NavigationControl());
                
                    // scrollZoom is really annoying so we disable it.
                    map.scrollZoom.disable();}
                </script>

                
                <p class="text-center">GPS-Coordinates: #Lat1#, #Lng1#</p>