Build your First GIS Web App using OpenLayers-Part 1

OpenLayers is an open source mapping JavaScript library which allows developers to develop highly interactive GIS web application. It can displays map tiles(or image) and vector data.

In this post, we will create a simple GIS web app which will display OpenStreetMap on it. OpenStreet map is similar to Google Map. We will use a OpenStreetMap mapping API in our application.

You need to have basic to intermediate level of understanding of HTML, CSS and JavaScript in order to understand this post.

Our final result will look something like below image:

Follow the below steps to create your first GIS Web App using OpenLayers:

1. Create a HTML file
2. Include OpenLayers CSS and JavaScript library inside head tag

3. Include a div tag with id equal to map inside the body tag. OpenLayers will render the map in this div element

4. Now we will write OpenLayers code to create Web Map. When we import OpenLayers Library into our HTML page, the whole OpenLayers library is imported as “ol “ object. We will use “ol “ object to create Web Map. Include a script tag in html and write following code. Lets discuss the code line by line.

• At line 3 in above code snippet, “new ol.Map()” used to initialise the map. We are passing the target, layers and view properties as object to “new ol.Map()”
• Target property at line number 4 is used to render the map to html. In our case, target value is ‘map’ id of div element where map is going to render.
• Layers property at line number 6 allows user to specify GIS data which will be shown on the map. You can add any number of layers. Here we will specify GIS map service where GIS data is hosted. OpenLayers will automatically fetch data from specified GIS map service and will display on the map. We will have a separate tutorial for hosting GIS data in geoserver and GIS map services.
• We will use OpenStreetMap GIS service in our app. OpenLayers library has already implemented OpenStreetMap service. We need to include a small piece of code to do that. At line number 7, “new ol.source.OSM()” implement OpenStreetMap service.
• View property at line number 10 allows user to control the rendering of map when map is loaded for the first time. The code line number 11, specify the location where map will be rendered initially at zoom level 4(see line no, 12). With view property, we can control at what location and at what zoom level map should render. For example, you have India map on your app. With this property, you control at what location of India and at what zoom level your map should be rendered.

These are small steps to create your first simple GIS Web App. In next post(Click here), we have discussed in depth about the OpenLayers code that we wrote today. We discussed in depth about ol.layer, ol.source and ol.View. The complete code is below.