Using OpenStreetMap imagery

OpenStreetMap (http://www.openstreetmap.org) is built by an open community of mappers who contribute and maintain geospatial data. This means that even you and I can get involved if we want to! This data is openly available to the public as long as you provide credit to OpenStreetMap and its contributors.

In earlier recipes, we only took a look at the standard layer type from OpenStreetMap, but there are many, many more layer styles that have been created on top of the OpenStreetMap data. We will show you three different OpenStreetMap sources: Humanitarian OSM, MapQuest Open, and Transport Dark OSM.

The preceding map shows the Transport Dark OpenStreetMap layer style from Andy Allen. The source code for this recipe can be found in ch02/ch02-openstreetmap/.

How to do it…

Let's produce this recipe using the steps outlined as follows:

1. Create the HTML page with OpenLayers dependencies, jQuery and jQuery UI. In particular, split the page into two sections...