How to start working with OpenLayers 6



OpenLayers is a completely free, open-source and front-end Javascript library to build dynamic and interactive web maps. OpenLayers makes it easy to include a dynamic map in a web page.


Why use OpenLayers?

  1. It has tiled layers and with a simple function call you can include a OSM - Open Street Map, Bing, Mapbox, Stamen and any other source you can find.

  2. Its super fast, and mobile ready - OpenLayers uses WebGL and Canvas2D and the cool parts of HTML5. Its light weight, mobile support out of the box and all the components you need exist

  3. Data rendering is a breeze. One can set up the Rasters and Vector Layers and render the data from GeoJSON, TopJSON, KML and GML too.

  4. OpenLayers support 3rd party libraries for Geocoding, popups, Google maps and lots more.

In this short example, lets put OpenLayers v6.3.1 to use and see what we can set up in 10 minutes.


At first, create a project folder and lets import the OpenLayers Library. There are three ways to import it.

  1. npm install ol - This is what the documentation recommends, although if you are including this in a dockerbuild I'd suggest you use the full build in option 3

  2. CDN - this is to try out OpenLayers in a dev environment and is not recommended for production

  3. Full build dist - this is preferred for production and hence for this blog lets use the full build.

Step 1: Create a project folder and a sub folder called libs Openlayers_web_map/libs

Step 2: Download the distribution and unzip the contents to /libs directory

Step 3: Create a new index.html file and initialize it with the standard boilerplate html doc. (in VScode type 'doc' and press return/enter)

Step 4: Create a main.js file

Thats it for now to get started. Will not be covering anything beyond a simple getting started on this blog. Your project structure should look like this below:



Optional: You can add this to your git repository and initialize it with a MIT License.


Also if you are using vscode, please add an extension called "Live server" so you can visualize the map on the go.


Time to code!


Lets start with Index.html.

step 1: import the openlayers library called ol.js

step 2: import your main.js

step 3: create the div to display the map

step 4: create a paragraphy that will help show coordinates on click (just to experiment on this blog)

Now lets create the dom handlers



<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>
 <div=i d='popup-container'>

 <p id='popup-coordinates'></p>


 </div>

 <div id='js-map' class='map'></div>
 <script src='./libs/v6.3.1-dist/ol.js'></script>
 <script src='./main.js'></script>
</body>

</html>

And now lets set up the Main.js file



window.onload = init;

function init() {
    const map = new ol.Map({
 view: new ol.View({
 center: [-12080385, 7567433],
 zoom: 3,
 maxZoom: 6,
 minZoom: 2,
        }),
 layers: [
 new ol.layer.Tile({
 source: new ol.source.OSM()
            })
        ],
 target: 'js-map'
    })

    const popupContainerElement = document.getElementById('popup-coordinates');
    const popup = new ol.Overlay({
 element: popupContainerElement
    })

 map.addOverlay(popup);

 map.on('click', function(e) {
 console.log(e);
        const clickedCoordinate = e.coordinte;
 popup.setPosition(undefined);
 popup.setPosition(clickedCoordinate);
 popupContainerElement.innerHTML = clickedCoordinate;
    })


}

Note the use of Open Source maps on ol.source.OSM() function call. Notice the use of ol.Overlay and also the window.onload will load the map after the page has loaded. Notice how fast and responsive the page is with so little code and how you can get started in 10 minutes.


Thats it. Now right click on your html and select "Open with Live Server" or any other preview option / extension you may have used. And your map should look something like this


Thats how easy it was. Hope this was useful. I am working on this project, to follow more on this here is the repository. Feel free to fork it and use it to learn more.

Got any questions or need any help, you can always drop me a message here.


Drop Me a Line, Let Me Know What You Think

© 2023 by Madhusudhan Anand