How to use OpenStreetMap

on your website ?

Jonathan Beliën - jbelien

OpenStreetMap Belgium

free baselayer

!! Service annoucement !!

and every other proprietary solution ...

Why switch ?

Google is in charge !

(Increasing) Fees to use
Google Maps
on your website

Why switch ?

Google is in charge !

Why switch ?

No control over what's displayed on the map

Google is in charge !

Why switch ?

Change of the terms of use
at anytime

Why OpenStreetMap ?

Why switch ?

OpenStreetMap is a free, editable map of the whole world that is being built by volunteers largely from scratch and released with an open-content license.

 

The OpenStreetMap License allows free (or almost free) access to our map images and all of our underlying map data. The project aims to promote new and interesting uses of this data.

Source: https://wiki.openstreetmap.org/wiki/About_OpenStreetMap

Why OpenStreetMap ?

Why switch ?

You have access to the data !

Why switch ?

Why OpenStreetMap ?

Why switch ?

Power of the community

  • Quick response
  • "Unlimited" manpower
  • Local knowledge all over the World
  • ...

Why OpenStreetMap ?

Why switch ?

Power of the community

Humanitarian
OpenStreetMap
Team

Why switch ?

How to switch ?

From
(really) easy
to
(really) complicated

How to switch ?

Don’t forget to give the OpenStreetMap credit when you use our maps (or services).

See https://www.openstreetmap.org/copyright

© OpenStreetMap contributors

How to switch ?

How to switch ?

How to switch ?

No need for technical knowledge

🤩

Go to

https://www.openstreetmap.org/

How to switch ?

🤩

How to switch ?

<iframe 
    width="425" height="350" frameborder="0" 
    scrolling="no" marginheight="0" marginwidth="0" 
    src="https://www.openstreetmap.org/export/embed.html?bbox=4.343451%2C50.8437928%2C4.361368%2C50.849815&amp;layer=mapnik&amp;marker=50.846807%2C4.352409" 
    style="border: 1px solid black"
></iframe>
<br>
<small>
    <a href="https://www.openstreetmap.org/?mlat=50.84681&amp;mlon=4.35241#map=17/50.84680/4.35241">
        View Larger Map
    </a>
</small>

🤩

How to switch ?

🤩

How to switch ?

Need for (a bit of) technical knowledge

🤓

How to switch ?

https://leafletjs.com/examples/quick-start/

🤓

How to switch ?

1. Include Leaflet JavaScript library and stylesheet

2. Create a <div> element

3. Use Leaflet JavaScript library to load the map

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>
<div id="map"></div>
var map = L.map('map').setView([0, 0], 2);

L.tileLayer("https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png", {
  attribution: "© <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, Tiles courtesy of <a href=\"https://geo6.be/\">GEO-6</a>",
  maxZoom: 18,
}).addTo(map);

🤓

How to switch ?

4. Add a popup to your marker

var map = L.map('map').setView([0, 0], 2);

L.tileLayer(...).addTo(map);

var marker = L.marker([50.846807, 4.352409]).addTo(map);

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

🤓

3. Add a marker

var map = L.map('map').setView([0, 0], 2);

L.tileLayer(...).addTo(map);

var marker = L.marker([50.846807, 4.352409]).addTo(map);

How to switch ?

🤓

https://leafletjs.com/reference-1.4.0.html

https://leafletjs.com/examples.html

Step by step tutorials

Full documentation

How to switch ?

Baselayer

How to switch ?

Baselayer

OpenStreetMap baselayer

Many (mostly free) baselayers are available !

See https://wiki.openstreetmap.org/wiki/Tiles#Servers

How to switch ?

Baselayer

OpenStreetMap Belgium baselayer

See https://tile.openstreetmap.be/

How to switch ?

How to switch ?

OpenStreetMap Belgium - Default name

L.tileLayer('https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    + 'Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>',
  maxZoom: 18
}).addTo(map);

OpenStreetMap Belgium - Name in French

L.tileLayer('https://tile.openstreetmap.be/osmbe-fr/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    + 'Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>',
  maxZoom: 18
}).addTo(map);

OpenStreetMap Belgium - Name in Dutch

L.tileLayer('https://tile.openstreetmap.be/osmbe-nl/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    + 'Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>',
  maxZoom: 18
}).addTo(map);

How to switch ?

Want some

more ?

😱

How to switch ?

OpenLayers

https://openlayers.org/

How to switch ?

Geographical data

https://download.geofabrik.de/

Geofabrik
OpenStreetMap Data Extracts

Every data available in OpenStreetMap database splitted by country

How to switch ?

Your baselayer

Host your own custom baselayer(s)

Quite complicated but you have full control on everything !

See https://switch2osm.org/manually-building-a-tile-server-18-04-lts/

How to switch ?

Your baselayer

Host your own custom baselayer(s)

How to switch ?

Geocoding

https://nominatim.openstreetmap.org/

How to switch ?

How to switch ?

Directions / Routing

Itinero

How to switch ?

How to switch ?

  • Baselayer (with custom style)
  • Directions
  • Geocoding
  • API
  • JavaScript library
  • Android / iOS SDK
  • ...

Open-Source
(most of it)

Conclusion

Everything that’s possible with Google Maps
is possible with OpenStreetMap
and (almost) as easy to use and to set up!

So why not make the switch ?

Open-Data

+

Open-Source

Questions ?

Thank you !

https://jbelien.github.io/talks/

How to use OpenStreetMap on your website ?

By Jonathan Beliën

Made with Slides.com

How to use OpenStreetMap on your website ?

  • 212

More from Jonathan Beliën