Time for Action – creating an OpenStreetMap Layer

1. For the OpenStreetMap layer, we do not need to include a script; we can access it outside of the box.

2. This will be pretty simple. We just need to create an OSM layer object:

   var osm_layer = new OpenLayers.Layer.OSM( 
       'OpenStreetMap Layer' 
   );

3. Then, we just add the layer object to the map. Even though we're only passing in one layer object, we'll use the addLayers function to keep our code consistent:

   map.addLayers([osm_layer]);

4. You should see something like this:

   

What Just Happened?

The map we just created is showing an OpenStreetMap layer. Unlike the previous layers, we did not have to provide an API key or link to OSM specific files—OpenLayers knows about it already. Another thing that separates the OpenStreetMap layer from the other third party map layers is that the OSM layer has no type property.

Accessing your own OSM tiles

The above code uses the publicly available OSM tiles, but it is easy to point it at your own tiles. To do so, create...