Embed a mapbox map with iframe

Hello there,

Just want to put a map from mapbox in my web site , but it’s seems not that simple.
Do you know about access token ? where do I have to put that in Hype ?

here is the page for sharing map from mapbox, but I cannot find simple

In your Hype document place the following in your HeadHTML

<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />

Then in your document you can create a rectangle element and give it an ID if “map”

Then create a new function on Scene Load and place the following in it. Substituting your token and any user created style information. If you don’t have a user style then use the defaults.

mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'USER-STYLE'
	});

The defaults will look something like: mapbox://styles/mapbox/satellite-v9

A user style will look like: mapbox://styles/[user-name]/[style-ID]

2 Likes

waouh thank you so much !!!
It’s working but I can’t have image in hype , only in preview bowser.
Do I made something wrong ?

thanx !!
Marion

2017-08-12 14:20 GMT+02:00 Community Leader Freelancer <
support+forums@tumult.com>:

Using a Rectangle element, you won’t be able to see it in Hype.

If you use a HTML Widget element you will see it but you won’t be able to interact with it in Hype. And it’s possible that there will be complications if you add more options or need to interact using other elements inside of Hype which is why I suggested a rectangle element.

Inside a HTML Widget place the code like this:

<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<div id="map2" width="100%" height="100%"></div>
<script>
mapboxgl.accessToken = 'ACCESS-TOKEN';
	var map = new mapboxgl.Map({
	container: 'map2',
	style: 'STYLE-ID'
	});
</script>

Hello ! tahnk you for the support,
How can I put another embed card in another scene ?
It doesn’t work

Thank you

2017-08-12 20:26 GMT+02:00 Community Leader Freelancer <
support+forums@tumult.com>:

hello ,`
I have an issue with map box and map box js ,
I don’t if it’s possible with tumult to put a market on the map embeded .
https://www.mapbox.com/help/markers/

could you help me ?

thank you

Marion

You should be able to use the same method of embedding the mapbox code in an HTML Widget on another scene. If this is not working as you expect, feel free to send a zip of your .hype document and we can take a glance to see what might be happening. I’d recommend looking at the developer console logs first, as the problem may be obvious from what it outputs.

As for defining markers, you would use the mapbox.js documentation to do this.