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


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




See full source code and descriptive lines below:

Screenshot of the example. Screenshot illustrates web map with the 
center coordinates projected in ESPG 3857.

Check out the live map at Github:

Download plain text version of the source code-
See source code below-

Documentation and references at

Thank you for following the blog.

Leave a Reply

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

You are commenting using your 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