Creating a simple web map using OpenLayers3

OpenLayers3 is a light-weight mapping library for web and mobile map users which incorporates modern browser technologies, such as HTML5,
WebGL and CSS3. It is quite similar to Leaflet and has similar map functionalities. In this post, we will demonstrate how to create a simple web map using this opensource javascript library.

Readers may download the Openlayers3 zipped file from http://openlayers.org/download/

 

In the html page head section, we add the link to the CSS and JS of openlayers3 .

href=”http://openlayers.org/en/v3.12.1/css/ol.css”

src=”http://openlayers.org/en/v3.12.1/build/ol.js”

 

See full source code and descriptive lines below:

let-001
Screenshot of the example. Screenshot illustrates web map with the 
center coordinates projected in ESPG 3857.
Capture-2

Check out the live map at Github:
https://mayotunde.github.io/open

Download plain text version of the source code-
https://www.dropbox.com/s/ip529301kjescii/simple%20web%20map%20in%20openlayers3.txt?dl=0
See source code below-
peg-001

Documentation and references at http://openlayers.org/

Thank you for following the blog.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s