↓Skip to main content
  1. lab/

Leaflet maps on Hugo

·2 mins
Hugo Leaflet
Table of Contents

created: 13/02/2024
updated: 13/02/2024

how do you get Leaflet maps on a Hugo blog

integrating Leaflet #

here’s one way to go about integrating Leaflet maps into a Hugo site:

  1. add Leaflet’s CSS and Javascript files to assets

create assets/css/leaflet/ and copy Leaflet CSS here
create assets/js/leaflet/ and copy Leaflet JS here

  1. create a new section to publish maps under (optional)

create layouts/maps/list.html for new map index structure
create layouts/maps/single.html for new map post structure
create content/maps/_index.md for new map index content

  1. create shortcodes for adding a Leaflet map to a post

create layouts/shortcodes/mapdiv.html for adding map div to map post
create layouts/shortcodes/style.html for adding map-specific CSS to map post
create layouts/shortcodes/script.html for adding map-specific JS to map post

creating a new section is optional. you could instead create a fourth shortcode to include the Leaflet CSS and JS (which would look like the last two shortcodes above combined) and then use that in a post in any existing section of your site.

that lays the groundwork to be able to create a post containing a Leaflet map, which can be done by:

  1. add map-specific Javascript, CSS, and data to assets

create assets/maps/blah.js for map-specific JS
create assets/maps/blah.css for map-specific CSS
create assets/data/data.js for map-specific data files

  1. create new post and use the shortcodes to refer to map-specific data

created content/maps/blah.md for new map post page content

other notes #

my site currently uses Tailwind CSS along with the Typography plugin. initially my Leaflet map links (e.g. the attribution link in the bottom right) were being styled by the CSS from the Tailwind / Typography prose class. i stopped this by adding class="not-prose" to my map div in the mapdiv.html shortcode.

commits #

↑