Recently I have started exploring how to develop a web map application with interactive facility. Since last few years the popularity of interactive web maps has exploded. There are many free services which provides map data these days including Google, Bing Maps, OpenStreetMap etc. My intention is to create a simple app using one of these open API.
The interactive map app can be useful in many places, e.g. digitization of land, roads, railways etc. and to give users search feature hence better maintainability. It can be helpful in digitizing the real estate industry as well in terms of maintaining land records for a specific owner, agricultural lands.
In this post we will build a simple app using OpenStreetMap and OpenLayer 3.0. OpenStreetMap (http://www.openstreetmap.org/) is one of the popular open source Geo Map services which helps us working with map. This will work as a Web Map Server (WMS) in the server side.
OpenLayers is an open source, client-side JavaScript library for making interactive web maps, viewable in nearly any web browser. Since it is a client-side library, it requires no special server-side software or settings—you can use it without even downloading anything!
To keep it simple OpenLayer provides layer approach where we can request and map data from any map server and add it. For instance, if you wanted to have a Bing Maps and an OpenStreetMap service displayed on your map, you would use OpenLayers to create a layer referencing Bing Maps and another one for OpenStreetMap, and then add them to your OpenLayers map.
The latest version of OpenLayer 3 can be downloaded from here.
Go to the site and download the zip file (e.g. v3.16.0.zip). Extract the zip and you will find build and css folder inside it.
Create the following folder structure:
Copy the files from the previous build folder into the ol3/js folder and also copy the files from the above css folder into the same ol3/css folder (see image above).After the copy your folder structure should look like as below:
Let's dive into OpenLayers and make a map! After you finish this section, you should have a working map, which uses a publicly available OSM server backend from the OpenStreetMap.org project. Execute the following steps:
Navigate to the assets directory, create a folder css, and create a new file called samples.css. Add the following code:
Add the following code to a new file called helloWorld.html and save the file in the sandbox directory. If you are using Windows, we suggest using Notepad++ in particular because you need to be sure you're editing UTF-8 encoded files. On Linux, you can use Gedit or Geany and for Mac OSX, you can use Text Wrangler (free but not open source). Do not try to edit the file in a program such as Microsoft Word, as it will not save properly. The following code will also be used as the base template code for many future examples in this book, so we'll be using it often and coming back to it a lot:
Open helloWorld.html in your web browser, you will see your first map created with zoom in and zoom out feature.
Find the code in github.
The interactive map app can be useful in many places, e.g. digitization of land, roads, railways etc. and to give users search feature hence better maintainability. It can be helpful in digitizing the real estate industry as well in terms of maintaining land records for a specific owner, agricultural lands.
In this post we will build a simple app using OpenStreetMap and OpenLayer 3.0. OpenStreetMap (http://www.openstreetmap.org/) is one of the popular open source Geo Map services which helps us working with map. This will work as a Web Map Server (WMS) in the server side.
OpenLayers is an open source, client-side JavaScript library for making interactive web maps, viewable in nearly any web browser. Since it is a client-side library, it requires no special server-side software or settings—you can use it without even downloading anything!
To keep it simple OpenLayer provides layer approach where we can request and map data from any map server and add it. For instance, if you wanted to have a Bing Maps and an OpenStreetMap service displayed on your map, you would use OpenLayers to create a layer referencing Bing Maps and another one for OpenStreetMap, and then add them to your OpenLayers map.
The latest version of OpenLayer 3 can be downloaded from here.
Go to the site and download the zip file (e.g. v3.16.0.zip). Extract the zip and you will find build and css folder inside it.
Create the following folder structure:
Copy the files from the previous build folder into the ol3/js folder and also copy the files from the above css folder into the same ol3/css folder (see image above).After the copy your folder structure should look like as below:
Let's dive into OpenLayers and make a map! After you finish this section, you should have a working map, which uses a publicly available OSM server backend from the OpenStreetMap.org project. Execute the following steps:
Navigate to the assets directory, create a folder css, and create a new file called samples.css. Add the following code:
| map { | |
| height: 500px; | |
| width: 100%; | |
| background-color: #b5d0d0; | |
| } |
Add the following code to a new file called helloWorld.html and save the file in the sandbox directory. If you are using Windows, we suggest using Notepad++ in particular because you need to be sure you're editing UTF-8 encoded files. On Linux, you can use Gedit or Geany and for Mac OSX, you can use Text Wrangler (free but not open source). Do not try to edit the file in a program such as Microsoft Word, as it will not save properly. The following code will also be used as the base template code for many future examples in this book, so we'll be using it often and coming back to it a lot:
| <!doctype html> | |
| <head> | |
| <title> Hello OpenStreetMap </title> | |
| <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" /> | |
| <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <div id="map" class="map"></div> | |
| <script src="../assets/ol3/js/ol.js"> | |
| </script> | |
| <script> | |
| var osmLayer = new ol.layer.Tile({ | |
| source: new ol.source.OSM() | |
| }); | |
| var birmingham = ol.proj.transform([-1.81185, 52.44314], 'EPSG:4326', 'EPSG:3857'); | |
| var kolkata = ol.proj.transform([88.36, 22.57], 'EPSG:4326', 'EPSG:3857'); | |
| var monterey = ol.proj.transform([-121.8947, 36.6002], 'EPSG:4326', 'EPSG:3857'); | |
| var view = new ol.View({ | |
| center: monterey, | |
| zoom: 10 | |
| }); | |
| var map = new ol.Map({ | |
| target: 'map' | |
| }); | |
| map.addLayer(osmLayer); | |
| map.setView(view); | |
| </script> | |
| </body> | |
| </html> |
Open helloWorld.html in your web browser, you will see your first map created with zoom in and zoom out feature.
Find the code in github.
No comments:
Post a Comment