Maps on a Hugo website made easy!

Adding a map to your hugo website becomes easy with the leaflet shortcode. You can add a box to display the lat and long as well through the use of the lat-long-box shortcode.

Leaflet Shortcode

{{< leaflet 
  id="map1" 
  lat="33.966613" 
  lon="-118.426178" 
  zoom="13.5" 
  markerLat="33.9716" 
  markerLon="-118.4363" 
  markerPopup="Green Space right by LAX!" 
>}}

Lat-Long Box Shortcode

Add this shortcode to include the lat-long display box with minutes and seconds.

{{< lat-long-box
  latitude="39.9057"
  longitude="-75.1665"
>}}

OpenStreetMap Shortcode

For sharing a pre-built uMap map, use the openstreetmap shortcode. This is different from the leaflet shortcode — use leaflet when you want to define a map from coordinates in your content, and openstreetmap when you have already built a map in uMap and want to embed it.

{{< openstreetmap mapName="your-map-name-123456" >}}

Optional parameters: mapWidth (default 100%), mapHeight (default 600px), scaleControl, miniMap, scrollWheelZoom, zoomControl, and others. See the shortcode source for the full list.