Integrate Javascript library and WebGL in Hugo

support
1

hello,

I’m new to hugo and markdown I want to integrate a mapbox to my site.
Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector and Mapbox styles.

I cloned the library’s repo into /static/js .
Mapbox gave me this code to include the JavaScript and CSS files in the <head> of a HTML file.

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

and this code for the <body> of a HTML file.

<div id='map' style='width: 400px; height: 300px;'></div><script>mapboxgl.accessToken = 'pk.eyJ1IjoibG91aXNoYXJsaW5naGF1c2VuIiwiYSI6ImNrOG1vYXEwcTA0YnUzb293dGtoYngxZDYifQ.afoUD0TIyiUI0J160DC8UA';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v9'});</script>

My markdown file looks like this: But it don´t shoes the map. I’m not sure where the problem is, do I need an iframe?
Do I need to include WebGL somehow?
Is this the right right way to put html code in markdown?

---
title: Some title
js: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.js
css: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css
---
<div id='map' style='width: 400px; height: 300px;'></div>
<script type="javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoibG91aXNoYXJsaW5naGF1c2VuIiwiYSI6ImNrOG1vYXEwcTA0YnUzb293dGtoYngxZDYifQ.afoUD0TIyiUI0J160DC8UA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
</script>

I also enabled the unsafe mode to render html like this in my config file:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
2

Typically you’d add those to template files to be included in the generated content.

If it’s something you want included on every page, you could add the tag to the head.html template.

As for adding the div to the page, that would be fairly straight forward to make a shortcode to insert the second part into the generated content any pages you want. Shortcodes are really easy to create and use.

3

Thank you very much. It works perfectly now!

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.