Next event :

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

howto
Edit

Introduction

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

Build a simple map using Leaflet

This tutorial is based on Leaflet Quick Start Guide and uses version 1.4.0 of the library. I suggest you check if there is a more up-to-date version before proceeding.

  1. Include the Leaflet stylesheet in the <head> section of your HTML page

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

  2. Include the Leaflet JavaScript library at the end of the <body> section of your HTML page

    1<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
2    integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
3    crossorigin=""></script>

  3. Put a <div id="map"> element where you want your map to be

    1<div id="map" style="width: 600px; height: 400px;"></div>

  4. Now you can add a <script> section at the end of the <body> section (after the <script> that loads Leaflet JavaScript library). All the following JavaScript code needs to go in that new <script> section.

  5. Initialize the map

    1var map = L.map('map').setView([50.84673, 4.35247], 12);

    The map will be displayed in <div id="map"> element and will be centered on Brussels (Latitude = 50.84673, Longitude = 4.35247) at zoom level 12.

  6. Add the OpenStreetMap Belgium baselayer

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

  7. You can add a marker at a specific location

    1var marker = L.marker([50.84673, 4.35247]).addTo(map);

  8. And bind a popup to that marker.

    1var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');

    By default, the popup will open if you click on the marker.
    If you want the popup to open automatically when the map is loaded, you can add

    1popup.openPopup();

Now, you can check the result!

Documentation

Build a simple map using OpenLayers

This tutorial is based on OpenLayers Quick Start Guide and the OpenLayers Popup Example and uses version 5.3.0 of the library. I suggest you check if there is a more up-to-date version before proceeding.

The OpenLayers library is more powerful than the Leaflet library and offers more built-in functionalities than Leaflet but because of that, the simple things tend to be more complicated.

  1. Include the OpenLayers stylesheet in the <head> section of your HTML page

    1<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

  2. Include the OpenLayers JavaScript library at the end of the <body> section of your HTML page

    1<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

  3. Put a <div id="map"> element where you want your map to be

    1<div id="map" style="width: 600px; height: 400px;"></div>

  4. Now you can add a <script> section at the end of the <body> section (after the <script> that loads OpenLayers JavaScript library). All the following JavaScript code needs to go in that new <script> section.

  5. Initialize the map with the OpenStreetMap Belgium baselayer

     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: ol.proj.fromLonLat([4.35247, 50.84673]),
19        maxZoom: 18,
20        zoom: 12
21    })
22});

    The map will be displayed in <div id="map"> element and will be centered on Brussels (Latitude = 50.84673, Longitude = 4.35247) at zoom level 12.

  6. You can add a marker at a specific location

     1var layer = new ol.layer.Vector({
 2    source: new ol.source.Vector({
 3        features: [
 4            new ol.Feature({
 5                geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
 6            })
 7        ]
 8    })
 9});
10map.addLayer(layer);

  7. You can create a new <div id="popup"> element right after the <div id="map"> element

    1<div id="popup" class="ol-popup">
2    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
3    <div id="popup-content"></div>
4</div>

  8. Initialize the popup (the following JavaScript code needs to go in the <script> section)

     1var container = document.getElementById('popup');
 2var content = document.getElementById('popup-content');
 3var closer = document.getElementById('popup-closer');
 4
 5var overlay = new ol.Overlay({
 6    element: container,
 7    autoPan: true,
 8    autoPanAnimation: {
 9        duration: 250
10    }
11});
12map.addOverlay(overlay);
13
14closer.onclick = function() {
15    overlay.setPosition(undefined);
16    closer.blur();
17    return false;
18};

  9. Add the function to open the popup when you click on the marker

     1map.on('singleclick', function (event) {
 2    if (map.hasFeatureAtPixel(event.pixel) === true) {
 3        var coordinate = event.coordinate;
 4
 5        content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
 6        overlay.setPosition(coordinate);
 7    } else {
 8        overlay.setPosition(undefined);
 9        closer.blur();
10    }
11});

    By default, the popup will open if you click on the marker. If you want the popup to open automatically when the map is loaded, you can add

    1content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
2overlay.setPosition(ol.proj.fromLonLat([4.35247, 50.84673]));

Now, you can check the result!

Documentation

Other libraries

You can also have a look at Mapbox GL JS.