Slippy Map

From OpenStreetMap Wiki
Jump to navigation Jump to search

Slippy Map is, in general, a term referring to modern web maps which let you zoom and pan around (the map slips around when you drag the mouse).

Loading map...

{{Slippymap|lat = 48.2274 |lon = 16.3835 |zoom = 15 |width = 300 |height = 300 |layer = Leaflet }}

Here we often talk about "The Slippy Map" to mean the map display on the front page. This is a web interface for browsing rendered OpenStreetMap data.

By default the slippy map shows tiles rendered in our Standard OpenStreetMap style, but we offer several other featured tiles as layers to select and to link to.

  • See the Browsing page for more basic help information on how to use the slippy map and link to it.
  • See Deploying your own Slippy Map for different ways of setting up such a map on your own website
  • See Leaflet for the software we are using for "The slippy map" (and how to use it on your own website)
  • See Wiki:Maps for how to embed a (slippy) map within this wiki.

Technical details

The slippy map is an Ajax component. JavaScript runs in the browser, which dynamically requests maps from a server in the background (without reloading the whole HTML page) to give a smooth slippy zoomy map browsing experience. The implementation of this is provided by a JavaScript library, either OpenLayers or Leaflet. The map image is built up of many little square images called "tiles". These are rendered and served from a "tile server".

Tile rendering

The process of rendering, going from vector to raster map data, baking style choices into bitmap images, is a fairly resource-intensive process. It can be accomplished by many different rendering software options. A tile server typically does not render tiles in real time for each user browsing the map. The tiles are rendered ahead of time and stored on disk. Even so, relatively few rendering programs have a proven track record for serving high traffic regularly updating worldwide maps.

OpenStreetMap "Standard" tile server

Mapnik is the rendering software used for generating the "standard" OpenStreetMap style. Mapnik also powers many third parties renderings including the Cycle Map and Transport Map styles which are Featured tiles shown on the front page slippy map.

The standard tiles are generated on The OpenStreetMap standard tile server database is updated with minute diffs, so that most data changes should get rendered within a few minutes. In the past this server was updated solely based on a weekly Planet.osm dump, which is performed on a Wednesday morning (GMT/BST). Imagine having to wait that long to see your map edits appearing? Those were the days! The full planet dump is still imported occasionally to correct any quirks in the applying of diffs.

The Mapnik rendering for OpenStreetMap is run via an Apache module called mod tile, developed especially for OSM's high-performance needs. This also manages caching and queueing for re-render requests. Every tile has a time stamp for when it was rendered and a dirty flag signifying that it is ready to be rendered again. The renderer follows these rules:

  • If we have an change in the OSM Database the system tries to mark the corresponding tile "dirty".
  • Whenever you look at a tile, it's checked if it is older than three days. In that case it is marked "dirty".
  • A background rendering process renders all dirty tiles.

Thus if nobody is looking at an area it won't get rerendered often. Tiles are rendered on a (sort-of) interest/attention-first basis. Marking a tile dirty does not mark all subtiles as dirty.

If you get grey or blurry areas instead of a map, it means there was no data for that tile and the server was not able to render it on-demand. It is now in the queue to be rendered. You can find the status of a tile through the URL[footnote 1] of the tile:

Simply add /status at the end ...

... to get its creation time stamp and dirty status.

If you explicitly want to force the rendering of a tile, you can mark it as dirty by appending /dirty to the URL:

The OSM-dirty tool provides more direct access to these options.

See also

Deploying your own Slippy Map
Putting maps on your own site using various slippy map APIs and other approaches.
Static map images
Embed StaticMaps by using an <img /> tag.
Definition of tiles and various related links.
Slippy map tilenames
Calculate a tile name (URL of the .png file) from the known coordinates (zoom, x, y).
URL templates for Mapnik and similar services
Basic user guide for the slippy map on the homepage
Layer URL parameter
How layers work on the homepage
Standard tile layer
User-centric description of the Standard layer on with focus on the key


  1. In the context menu of the Firefox you select "View Page Info" and copy the URL of the tile in the "Media" tab. Internet Explorer provides "Analyze element" (or something) only. Select it and right-click the highlighted code section in the DOM-Explorer. Copy/paste it into the address bar and remove everything expect from the PNG URL.