Hey guys,
I am having trouble trying to get the Mapbox I created from the Codepen below. Is there a special way to import this into Webflow? I think it might have something to do with the access token.
Help is greatly appreciated!
- Kyle
When I put the code into Webflow and publish my site the map doesn’t appear. I tried putting everything in an HTML embedded and then putting the JS in the before tag without the map appearing. Here is my read-only.
You should not import jQuery a second time as it will cause conflicts with the one that Webflow automatically includes in your project.
Also, place ALL JavaScript in Page Settings > Custom Code > Footer Code and Page Settings > Custom Code > Footer Code only.
Embed code component is for HTML/CSS only, unless it does not have any dependencies.
If you view the developer console, it will show you where those errors are.
I re-located all of the code and took out all of the unnecessary references to jQuery and it’s still not appearing. Right now I have the HTML embed with the HTML and CSS and the JS in the Footer Code. I have the css stylesheet in the Header Code part. I feel like I’m missing a step.
<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
Unnecessary anonymous function here. Remove lines 5000, 5009:
You are using a script tag in a script tag
Alright so the map loads fine but the canvas property is defaulting to not fit the window size:
Does anyone know how to override this? I tried calling mapboxgl-canvas in a style tag to be 100% width and height but it didn’t override what you see from the inspection image.
I think this has something to do with the Webflow tabs because when I copy and paste my code onto its own page there is no issue. Also if my initial tab is set to the tab the map is in, the map is at full width.
Does anyone know where the width and heights are coming from in the above image? I searched my html and css in the export window and couldn’t find these dimensions. I have no clue where they are coming from.