HTML Mapbox Embed

Ask us anything How do I?
1

Hello, I am attempting to embed a Mapbox map into my site using the HTML element. Unfortunately, the map is not visible when I paste the following code (and replace the API key with my own). Has anyone else ran into this issue?

(PS - The reason I am not using the Mapbox plugin is because I am trying to embed a map that will allow users to draw a polygon on the map)

I’ve been able to get this to work in Webflow quite easily.

2

Hi, try to toggle off “refresh on resize”
Also, if the script contain any reference to window or document you may want to replace it with wwLib.getFrontWindow() and wwLib.getFrontDocument()

3

Thank you for your response. I toggled off “refresh on resize”. Unfortunately, it is not working. This is the code I am pasting into the HTML element:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoid3dtY2NhcnRuZXkiLCJhIjoiY2xza2o4aG0yMDQ2ZTJrcjE0cHlodm16ayJ9.NLC8TAsgJ-hQN-v11poRmw';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
</script>

</body>
</html>
4

The plugin expose the mapbox gl library

So maybe you can try to keep only the div and the script part and replace maboxgl with wwLib.wwPlugins.mapbox.mapboxgl

<div id="my-map"></div>
<script>
	wwLib.wwPlugins.mapbox.mapboxgl.accessToken = 'pk.eyJ1Ijoid3dtY2NhcnRuZXkiLCJhIjoiY2xza2o4aG0yMDQ2ZTJrcjE0cHlodm16ayJ9.NLC8TAsgJ-hQN-v11poRmw';
    const map = new wwLib.wwPlugins.mapbox.mapboxgl.Map({
        container: 'my-map', // container ID
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
</script>
5

Thanks @Alexis - I tried pasted the adapted code into the HTML element with no luck.