How To ... ?

You’ll find here a list of “How to” tutorials related to OpenStreetMap.

How to see the map

You can check the map here : https://www.openstreetmap.org/ !

How to create a simple map (with a marker) based on OpenStreetMap

There are 2 most common open-source JavaScript libraries used to display a map : Leaflet and OpenLayers.

You can also have a look at Mapbox GL JS.

How to use free OpenStreetMap Belgium baselayer

It is quite easy and it’s completely free!
We just ask you to use the required credits/attributions : OpenStreetMap contributors for the data and SPRL GEO-6 BVBA for the tiles hosting.

You can have a look at our baselayer here : https://tile.openstreetmap.be/

Here are 2 examples using the most common open-source JavaScript libraries (Leaflet and OpenLayers).
If you’re not familiar to those libraries, have a look at “How to create a simple map (with a marker) based on OpenStreetMap ?”.

Our baselayer is available with the default names but also with French or Dutch only names (if available):

If you’re using Leaflet:

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

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

If you’re using OpenLayers:

var attribution = new ol.control.Attribution({
  collapsible: false
});

var map = new ol.Map({
  controls: ol.control.defaults({attribution: false}).extend([attribution]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png',
        attributions: [ ol.source.OSM.ATTRIBUTION, 'Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>' ],
        maxZoom: 18
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    maxZoom: 18,
    zoom: 2
  })
});