Shortcode for OpenStreetMap instead of GoogleMaps

tips & tricks
1

Google is changing rules about using his cartographic services.
You need keys IDs, give credit card info, and pay if you use a descent amount of request.

I had to setup very rapidly a website for http://www.cocoon-arolla.com and I choosed a very nice Hugo theme Airspace. But they use Google Maps for serving their map location.

So I changed this part for using the mighty OpenStreetMap.org services, and I rewrote it as a shortcode for ease of use.

You only need to:

  1. Create a free map on https://umap.openstreetmap.fr/
  2. Use the openStreetMap short code with some parameters:
## This is my map.md file

{{< openstreetmap mapName="carte-sans-nom_230565" miniMap="true" scale="7" coordX="46.0275" coordY="7.483" >

  • Mandatory parametrer

  • Coordinates

    • coordX = “44.0275”
    • coordY = “70.483”

  • Options available

    • scaleControl = “true”
    • miniMap = “true”
    • scrollWheelZoom = “true”
    • zoomControl = “true”
    • allowEdit = “false”
    • moreControl = “true”
    • searchControl = “true”
    • tilelayersControl = “null”
    • embedControl = “false”
    • datalayersControl = “null”
    • onLoadPanel = “none”
    • captionBar = “true”
    • fullscreenControl = “null”
  1. This the openstreetmap.html shortcode
{{ $mapName := .Get "mapName" }}

{{ $mapWidth := .Get "mapWidth" | default "70%" }}
{{ $mapEight := .Get "mapEight" | default "600px" }}

{{ $scaleControl := .Get "scaleControl" | default "true"  }}
{{ $miniMap := .Get "miniMap" | default "true" }}
{{ $scrollWheelZoom := .Get "scrollWheelZoom" | default "true" }}
{{ $zoomControl := .Get "zoomControl" | default "true" }}
{{ $allowEdit := .Get "allowEdit" | default "false" }}
{{ $moreControl := .Get "moreControl" | default "true" }}
{{ $searchControl := .Get "searchControl" | default "true" }}
{{ $tilelayersControl := .Get "tilelayersControl" | default "null" }}
{{ $embedControl := .Get "embedControl" | default "false" }}
{{ $datalayersControl := .Get "datalayersControl" | default "null" }}
{{ $onLoadPanel := .Get "onLoadPanel" | default "none" }}
{{ $captionBar := .Get "captionBar" | default "true" }}
{{ $fullscreenControl := .Get "fullscreenControl" | default "null" }}

{{ $scale := .Get "scale" | default 7 }}
{{ $coordX := .Get "coordX" | default 46.0275 }}
{{ $coordY := .Get "coordY" | default 7.483 }}

<div class="block">
    <h2>Source OpenStreetMap</h2>
    <div class="google-map">
        <iframe width="{{ $mapWidth }}" height="{{ $mapEight }}" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/{{- $mapName -}}?scaleControl={{ $scaleControl }}&miniMap={{ $miniMap }}&scrollWheelZoom={{ $scrollWheelZoom }}&zoomControl={{ $zoomControl }}&allowEdit={{ $allowEdit }}&moreControl={{ $moreControl }}&searchControl={{ $searchControl }}&tilelayersControl={{ $tilelayersControl }}&embedControl={{ $embedControl }}&datalayersControl={{ $datalayersControl }}&onLoadPanel={{ $onLoadPanel }}&captionBar={{ $captionBar }}&fullscreenControl={{ $fullscreenControl }}#{{ $scale }}/{{ $coordX }}/{{ $coordY }}"></iframe>
    </div>
</div>
10 Likes
2

I’d read about that but didn’t think much about it as they revoked my map keys after deleting my account a few months ago. What’s next, Gmail Premium? Haha. Thanks for the drop!

3

Hugo supports Theme Components. May I use your code to set up a component?

2 Likes
4

Cool !! That should be very usefull. Let us know when I can borrow it back from you :slight_smile:
D.

5

I just published a github repro with your shortcode. Feel free to test it out and give it a :star:. https://github.com/Hanzei/hugo-component-osm

3 Likes