With Google recently changing the terms of their Maps API, I’ve had to explore alternative options for embedding a map on a web-page. I opted for OpenStreetMap (OSM), as they provide openly licensed mapping data. This article demonstrates how to embed a simple OSM map, and place markers anywhere on the map based on latitude and longitude coordinates. To do this, we’ll be using the OpenLayers Javascript library.

OpenLayers is an open source Javascript library, which can be used to embed OpenStreetMaps data on a web page. You can check out their quick-start guide, which shows you how to embed a basic slippy map. However, to a beginner it may not be obvious how to add markers to this map. To do so, you need to add a Vector Layer containing the marker point.

This code example demonstrates how to create a map, and add a marker to it:

You will notice two functions in this example:

  • initialize_map()
  • add_map_point(lat, lng)

The function initialize_map() needs to be called on page-load. It will create a map in the div #map, and set the default coordinates and zoom.

The function add_map_point(lat, lng) can be called any time after the initial map loads. You can pass it two parameters – a latitude and longitude, and it will place a little red dot on the map in that location. Keep calling this function to add more and more dots. You can even call this function from an AJAX callback, to add points on the fly.

Customisation of OpenStreetMap Styling

The default map tiles may or may not be appropriate for your needs. Thankfully, OSM has some different options. It’s possible to take the raw OSM data, and generate your own map tile graphics based on a custom stylesheet – this is known as running a ‘Tile Server’. However, this is quite complex, requires a beefy server, and is not suitable for most people.

Thankfully, the OSM Wiki has a list of known open tile servers. Using the Tile URLs from the OSM Wiki, you can simply put the new URL format into the OpenLayers source setup section.

For example, if the OSM Tile Server URL is ‘https://a.tile.openstreetmap.org/${z}/${x}/${y}.png‘, you would need to convert this to ‘https://a.tile.openstreetmap.org/{z}/{x}/{y}.png‘.

Here’s some examples you can try out yourself:

  • https://a.tile.openstreetmap.org/{z}/{x}/{y}.png
  • https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png
  • http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png
  • https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png

You may run into CORS issues with some of these servers. To overcome this, you may want to proxy the tile images yourself. For example, here’s a simple PHP script to proxy the Wikimedia Maps tile images:

Using this script, you’d then change the OpenLayers URL to ‘http://example.com/tile_proxy.php?x={x}&y={y}&z={z}‘.

This script does not perform any caching, and proxying content in PHP isn’t the most efficient way of doing so. If you need to proxy more than a small quantity of images, you may want to look at the proxy and caching modules within Nginx, Apache, or another web server.