Sign in

Tutorial: Adding OpenStreetMap to your website!

  • This topic has 15 replies, 4 voices, and was last updated 1 month ago by .
Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1908
    Verhoeckx

    Hello Publii developers!

    I would like to share how to add an OpenStreetMap map to your website. Why? Well, because it took me much more time than expected and by sharing the code I hope it can save you a lot of time and frustration!

    Let’s get started!

    First thing you have to understand is that you can’t use OpenStreetMap directly but that you have to look for a provider that provides the images (tiles) of which an OpenStreetMap map is made. There are many providers and you can view a list of those providers here. I chose Mapbox because it is, as far as I know, one of the largest OpenStreetMap provider and because their tiles look very beautiful by default (IMHO).

     

    Step 1: Create a Mapbox account

    You can create a Mapbox account here.

     

    Step 2: Follow the steps for adding Mapbox to your website

    1. On the account page: choose Web.
    2. Choose for ‘Use the Mapbox CDN’.
    3. Add the JavaScript and stylesheet to the head of the website.I used the Starter theme and I had to insert the two lines in the head.hbs partial. Look in your theme directory for the relevant partial.
      Because I didn’t want this code to be loaded on every webpage I added a new variable (loadMapbox) to the post array in the config.json file. This way I can select in every post if the code should be loaded or not.
      config.json
      {
      “name”: “loadMapbox”,
      “label”: “Load Mapbox”,
      “value”: 0,
      “type”: “select”,
      “options”: [{“label”: “Enabled”,”value”: 1},{“label”: “Disabled”,”value”: 0}]
      },head.hsb

      {{#if @config.post.loadMapbox}}
      <link href=’https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css&#8217; rel=’stylesheet’ />
      <script src=’https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js’></script&gt;
      {{/if}}

    4. Add the HTML-code to a postThe only thing you have to add to a post is:

      I removed the width because the width of a block element is always 100 percent so it’s not necessary to mention this. I also added the id openstreetmap so I could add some custom CSS-code to it. The height of the element is, of course, completely up to you!

    5. Create a new partial for all the custom JavaScript code
      Instead of adding the custom JavaScript code directly to the footer partial (footer.hbs), I created a new partial (mapbox.hbs) and added this to the footer partial. Why? Well, because the custom JavaScript can become (and will be) quite long and I didn’t want to create a mess in the footer partial.
      The complete code (in the footer partial) is:
      {{#if @config.post.loadMapbox}}
      {{> mapbox}}
      {{/if}}
    6. Add the custom JavaScript code to the mapbox partial.The custom JavaScript code is:
      <script>mapboxgl.accessToken = ‘[YOUR ACCESS TOKEN]’;
      var map = new mapboxgl.Map({
      container: ‘map’,
      style: ‘mapbox://styles/mapbox/streets-v11’
      });
      </script>
    7. Save all files and preview your post with Publii.If you have done everything correctly you should see an OpenStreetMap map in your post that points to somewhere at the east coast of Africa (probably the middle of the complete OpenStreetMap map?).

    Because this is still quite boring I will explain in a second post how to further customize the OpenStreetMap/Mapbox map!

    #1909
    Verhoeckx

    The forum software removed the HTML code :-|.

    The HTML code should be:

    bracket      div id=’openstreetmap’ style=’height: 420px’        bracket

    #1910
    Verhoeckx

    I’m going to write a little but more ‘staccato’ because otherwise writing this tutorial is going to take me too much more time.

    #1911
    Verhoeckx

    Zooming in a particular location

    Add the option center to the map object.

    var map = new mapboxgl.Map({ container: 'openstreetmap', style: 'mapbox://styles/mapbox/streets-v11', center: [longitude, latitude], zoom: 15 });

    You can find the longitude and latitude of your location by using the Mapbox Playground.

    You can find the Mapbox Playground here:

    https://docs.mapbox.com/search-playground

    Search for your location and click once on the button Toggle JSON panel (in the top right of the website).

     

    #1912
    Verhoeckx

    Feature

    Add a zoom in and a zoom out button.

     

    Solution

    Add the controls.

     

    Code

    map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'top-right');

     

    Comments

    Because I didn’t want the see the compass I added ‘showCompass:false’ to the NavigationControl function. With the last argument you set the location of the controls (‘top-right’).

    #1913
    Verhoeckx

    Feature

    Add a satellite view.

     

    Solution

    Add the correct HTML, CSS and JavaScript code :-).

     

    HTML code

    <div>
    <div>
        <label for="streets-v11">
            <input id="streets-v11" type="radio" name="rtoggle" value="streets"/>
            Kaart
        </label>    
        <label for="satellite-v9">
            <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
            Satelliet
        </label>
    </div>
    </div>
    

    CSS code

    #openstreetmap {
    position: relative;
    }

    #mapbox-menu {
    position: absolute;
    background: #fff;
    padding: 10px;
    color: #000;
    z-index: 99;
    }

     

    JavaScript code

     

    Comments

     

    #1914
    Verhoeckx

    Sorry, I’m giving up!

    I can’t work with this WordPress forum!

    It constantly makes a mess of what I’m writing 🙁 !

    And who in the world thought it was a good idea to create a new paragraph every time you press enter???? Biggest UI mistake ever!!!

    #1915
    Verhoeckx

    @Bob: you can delete this thread.

    #1918
    BobBob
    Support

    Why do you not insert a code by the dedicated option?

    screenshot-2020-03-4-o-06.30.40

    Ps: Please prepare this tutorial in Google docs, then I will publish it in our documentation.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #1926
    Verhoeckx

    I don’t have that option in the top bar.
    I use Shift + Alt + X but every time it works differently.
    I’m on Fedora 31 and Firefox 73.

    #1927
    Verhoeckx

    When I use GNOME Web (WebKit), the option is also not shown.

    #1929
    BobBob
    Support

    I thought it is enabled, I found a solution https://github.com/EnlighterJS/Plugin.WordPress/issues/217 and now it should work for a “normal” users too.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #1930
    Verhoeckx

    I can confirm: it’s now shown in Firefox and GNOME Web!
    Perfect!

    #1937
    BertBert

    Please don’t give up Verhoeckx! I am sure many of us are very much interested

    in a non-g**gle solution 🙂

    But take your time, No reason to stress.

    Gratefully,

    #1939
    Verhoeckx

    Hello Bert,

    Thanks 🙂 !

    I will write a new tutorial (somewhere in the coming weeks) and send it to Bob so he can add it to the documentation!

    Verhoeckx

    #2002
    itips3727

    A big thank you to @Verhoeckx for persisting, and @Bob for publishing in the Publii documentation. @Verhoeckx‘s final tutorial looks like it could be really good!

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.