How to create a simple map (with a marker) 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 tense to be more complicated.

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

     <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

     <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

     <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

     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: ol.proj.fromLonLat([4.35247, 50.84673]),
             maxZoom: 18,
             zoom: 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. You can add a marker at a specific location

     var layer = new ol.layer.Vector({
         source: new ol.source.Vector({
             features: [
                 new ol.Feature({
                     geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
                 })
             ]
         })
     });
     map.addLayer(layer);
    
  7. You can create a new <div id="popup"> element right after the <div id="map"> element

     <div id="popup" class="ol-popup">
         <a href="#" id="popup-closer" class="ol-popup-closer"></a>
         <div id="popup-content"></div>
     </div>
    
  8. Initialize the popup (the following JavaScript code needs to go in the <script> section)

     var container = document.getElementById('popup');
     var content = document.getElementById('popup-content');
     var closer = document.getElementById('popup-closer');
    
     var overlay = new ol.Overlay({
         element: container,
         autoPan: true,
         autoPanAnimation: {
             duration: 250
         }
     });
     map.addOverlay(overlay);
    
     closer.onclick = function() {
         overlay.setPosition(undefined);
         closer.blur();
         return false;
     };
    
  9. Add the function to open the popup when you click on the marker

     map.on('singleclick', function (event) {
         if (map.hasFeatureAtPixel(event.pixel) === true) {
             var coordinate = event.coordinate;
    
             content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
             overlay.setPosition(coordinate);
         } else {
             overlay.setPosition(undefined);
             closer.blur();
         }
     });
    

    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

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

Now, you can check the result!


Documentation: