The author of TheCoffeeMachine gives a detailed walkthrough of how to add maps to a hugo site using uMap, which allows you to create maps based on OpenStreetMap (OSM) layers, and a shortcode that allows you to embed them. This is a belated TIL as I've already used this a few times, most recently for my post on the Tri-Country Train.

A rough overview of the steps involves signing up for and using uMap. This will allow you to create a map, set markers, and make the adjustments you need on top of existing OSM layer. From here using hanzei's hugo-component-osm theme you can embed the map into the hugo site using a shortcode. This includes passing in any parameters that uMap supports like coordinates to center the map and the zoom level.

I recommend reading the linked post for detailed steps. I needed to take this further and include a class within the iframe that's rendered on the page to able to style it with CSS. Unable to find a way to do this I forked and made my own addition. The pull request was created to the original repository if hanzei would like to include the changes. Here's a sample of what it looks like:

{< openstreetmap mapName="usa-train-lines-using-stadler-multiple-units_1100675" coordX="40.0731" coordY="-74.8924" scale="10" class="alignright" >}}

By using satellite images from Google in QGIS and marking areas of potentially good Christmas trees then exporting that layer and joining it with the National Forest Motor Vehicle User Map in Wherobots Cloud using Spatial SQL @lyonwj was able to map the areas with accessible roads.

Theres a lot of interesting bits to unpack there, but my main takeaway was the use of spatial SQL, it certainly beats relying on osmium tags-filters and manually editing GeoJSON files.

Based on OpenStreetMap data this map displays all country borders along with the 10,000 most populous cities. The file itself comes down to 628KB, which is impressive, allowing it to be cached on the client device. Different variants of this map are available with no country borders or fewer cities, to bring the overall size down. This can be used as a base map or a fallback map with leaflet. What I found interesting was looking into the code and seeing how the land areas were plotted and drawn, with the lakes then drawn above that and finally the cities after the lakes.

After discovering this, I've taken the opportunity to use it on my rail page to plot all the locations where I've filmed a video. At the time of posting this, it hasnt reached its final form yet but I'll be working on it over the coming days.