An Introduction to OpenLayers 3, Part I

OpenLayers is a JavaScript library for creating interactive maps on the web. Basically, these libraries are referenced to help facilitate the development process, providing a basic foundation and advanced features.  I will devote several posts to OpenLayers 3 (OL3) which is currently in its beta release.

This first post will demonstrate some of the basic code and functionality of OpenLayers, and why you should consider using it.  Later posts will cover topics that build logically on one another and include moving and copying files to a web host, symbology, and allowing for user interaction (and feedback) with a map.  Lastly, we'll look at incorporating other free and open source GIS software, such as GeoServer.

OL3 will improve on its predecessors with a more streamlined code, better templates, and documentation. For a brief history of OpenLayers, head over to Wikipedia.  OpenLayers can handle a wide range of map-related files and extensions.  It is client side (I will talk more about this in later posts).

OL3 will improve on OL2.

Loading a Basemap
A logical starting point is loading a basemap, which many maps and map apps utilize.  One of the earliest decisions you may face:  ow much of the user's screen a map should take up.  For the web version, visit: http://webmapexamples.net/OSMBasemap.html.  Feel free to zoom and pan.  Other open basemaps, for example Stamen maps, can also be loaded. A screenshot appears below:

As seen in Mozilla's Firefox web browser

You can download the code with comments in a text file here or html file, which you can experiment with after downloading to your desktop.

A different sized map is at: http://webmapexamples.net/OSMBasemapv2.html.  A simple change to the height of the style was made and is highlighted in red.

  <style>
      .map {
        height: 350px;
        width: 100%;
        }
    </style>

Initially, OL3's learning curve remains fairly steep.  However, coding appears to be much more efficient than OL2 and gets easier over time.  Advanced functionality can be easily added, a definite bonus!  An early OpenLayers 3 workshop is available here (note: try reloading the page).  Tutorials, examples, and documentation are still being produced.  Looking ahead, at least two books will be published to assist you:

• OpenLayers 3: A Beginner's Guide
• The Book of OpenLayers 3

Next time, I will write about moving and copying OL3's libraries. to a web hosting service and getting them on the web! I will also talk about key additional steps and importing common layer files such as KML files.