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):
- To use French only names, use
https://tile.openstreetmap.be/osmbe-fr/{z}/{x}/{y}.png(osmbe-frinstead ofosmbein following examples) ; - To use Dutch only names, use
https://tile.openstreetmap.be/osmbe-nl/{z}/{x}/{y}.png(osmbe-nlinstead ofosmbein following examples) ;
If you’re using Leaflet:
1var map = L.map('map').setView([0, 0], 2);
2
3L.tileLayer('https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png', {
4 attribution:
5 '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' +
6 ', Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>',
7 maxZoom: 18
8}).addTo(map);
If you’re using OpenLayers:
1var attribution = new ol.control.Attribution({
2 collapsible: false
3});
4
5var map = new ol.Map({
6 controls: ol.control.defaults({attribution: false}).extend([attribution]),
7 layers: [
8 new ol.layer.Tile({
9 source: new ol.source.OSM({
10 url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png',
11 attributions: [ ol.source.OSM.ATTRIBUTION, 'Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>' ],
12 maxZoom: 18
13 })
14 })
15 ],
16 target: 'map',
17 view: new ol.View({
18 center: [0, 0],
19 maxZoom: 18,
20 zoom: 2
21 })
22});