Openstreetmap / responsive

support
1

Hello,

Is it possible to insert openstreetmap maps and have them responsive, the same way I use google maps.

Thank you.

1 Like
2

No problem at all. I use OpenStreetMap in all our projects. Here is an extract on how I use it.

config.yaml:

params:
  geo:
    title       : Map title
    # Use pixel for width as well
    width       : 100%
    height      : 300
    pre_embed   : https://www.openstreetmap.org/export/embed.html?
    embed       : bbox=9.363741874694826%2C51.97525849656705%2C9.38659429550171%2C51.99197609916384&layer=mapnik&
    map_big     : mlat=51.9836&mlon=9.3752#map=16/51.9836/9.3752
    map_big_text: Bigger map please

Partial map-container.html:

<div>
  <iframe width="{{ .Site.Params.geo.width }}" height="{{ .Site.Params.geo.height }}" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{{ .Site.Params.geo.pre_embed }}{{ .Site.Params.geo.embed }}"></iframe>
  <small><a href="{{ .Site.Params.geo.pre_embed }}{{ .Site.Params.geo.map_big }}">{{ .Site.Params.geo.map_big_text }}</a></small>
</div>

In the layout:

<div class="map">
  {{ partial "map/map-container.html" . }}
</div>

Hope this helps.

6 Likes
3

Maybe check out Leaflet which allows to use (and switch between) different map providers:

Example for different providers:

https://leaflet-extras.github.io/leaflet-providers/preview/

3 Likes
4

Thank you. Leaflet looks indeed very interesting. Is there a forum to ask for help to implement it in myHugo blog (I use the Hyde theme) ? I switched from Wordpress to Hugo and just have a personal blog so I am not very technical.

5

Thank you.

6

There’s a link to a stackoverflow forum on that site. I think you could get general help with it there but, not hugo specific I would imagine. Looks like Leaflet has excellent docs tho.

1 Like
7

I’ve implemented the use of OpenStreetMap using leaflet in this theme. You might find some useful code there.

Depending on how the Hyde theme works, you may need to override some of the partials it uses.

1 Like
8

We only use a map on our “Contact” page to show our office location. As it’s only used once, it’s coded directly into the respective site’s template:

<div class="col-xs-12 col-sm-8 col-md-9" style="padding:0">
  <div class="map_canvas">
    <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=16.31356537342072%2C48.21824470121084%2C16.31705760955811%2C48.21977804659998&amp;layer=mapnik&amp;marker=48.21900780541438%2C16.31567895412445"></iframe>
  </div>
    <style>
      .map_canvas {
        overflow:hidden;
        background:none!important;
        height:400px;
        width:100%;
      }
    </style>
</div>

We use Bootstrap for the site, so the container/column CSS is not included in the snippet above.

The map itself works responsively without any issues so far.

1 Like
9

I made a schortcode for me for external links to OSM.

{{ $lat := float (.Get 0) }}
{{ $lon := float (.Get 1) }}
{{ $tmp := default "14" (.Get 2) }}{{ $scale := int $tmp }}
&nbsp;<a href="https://www.openstreetmap.org/#map={{$scale}}/{{$lat}}/{{$lon}}" target="_blank" title="Show map">MAP</a>

I replaced the word MAP with a font-awesome char “far fa-map”

2 Likes