Working with OpenLayers 4 | Part 1 - Creating the first application
OpenLayers is an open source map library and provides the huge number of mapping tools across different platforms.In this very first tutorial, we will initiate a basic web page with some basic openLayers map API tools.
Introduction
A high-performance, feature-packed library for all your mapping needs.
OpenLayers is an open source mapping library which makes it easy to put a dynamic map in any web page.It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
— Source (http://openlayers.org/)
Implementation
To implement the map on a web page, we will start with two files. The directory structure of the files is given below for reference.
├── index.html
└── map.jsFirst, we will start with the index.html file and start with some basic HTML tags and this is what our index.html file will look like.
<!DOCTYPE html>
<html>
<head>
<title>Working with Openlayers</title>
<style type="text/css">
#map{
width:100%;
height:600px;
}
</style>
<!--Basic styling for map div,
if height is not defined the div will show up with 0 px height --></head>
<body>
<div id="map">
<!-- Your map will be shown inside this div-->
</div>
</body>
</html>
After this we will start embedding the openlayers map API with this file and will include our map.js file with index.html . To do that we will include three links in our index.html file and the final code will look something like this.
<!DOCTYPE html>
<html>
<head>
<title>Working with Openlayers</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- Openlayers CSS file-->
<style type="text/css">
#map{
width:100%;
height:600px;
}
</style>
<!--Basic styling for map div,
if height is not defined the div will show up with 0 px height --></head>
<body>
<div id="map">
<!-- Your map will be shown inside this div-->
</div>
</body>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<!-- Openlayesr JS fIle -->
<script type="text/javascript" src="map.js" type="text/javascript"></script>
<!-- Our map file --></html>
Now we will start editing our second file map.js. First we will start with map object.
var map = new ol.Map({
target: 'map',
});We have initialised an object of map and pointed out its target to ‘map’ which is the id of the DOM element in which we want to render the map.
If you check the web page, if have initiated the base for the map, but there is no map view in the mapping area.To initialise a map view, we will have to render a layer of the base map into the map. You can choose any layer or more than one layer for the map. OpenLayer sources API provide the list of the sources of layers available for the map. We will use OSM (Open Street Map) in this tutorial.And I have set the initial map coordinates to New York City.
After this layer, our map.js will finally look like this code snippet.
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-74.006,40.712]), // Coordinates of New York
zoom: 7 //Initial Zoom Level
})
});And if you finally see our webpage, it will show us the New York City in the map.
You can also get the above code from my this Github Repo.
Full Course Links:
- Working with OpenLayers 4 | Part 1 — Creating the first application
- Working with OpenLayers 4 | Part 2 — Using markers or points on the map
- Working with OpenLayers 4 | Part 3 — Setting customised markers and images on map
- …
And if you enjoyed this post, share it on Facebook and Twitter. I Love Sharing.
You can also follow me on twitter: here
