Deploying your own Slippy Map

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — Deploying your own Slippy Map
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

Deploying your own Slippy Map is a common way of Using OpenStreetMap. It usually means integrating a slippy map which shows map tiles into your web page by using some JavaScript code.

You can embed our existing map into your website, just as you might with Google or Yahoo! maps. This can be done using one of the following JavaScript map libraries:


Embedding OSM in a CMS/framework

You can embed OSM in your favourite Content Management System:

CMS/framework module/plugin note sources tutorial example
with OSM map embedded
CMS Made Simple Osm Tag Module based on OpenLayers GitHub Documentation in manpage
CMS Made Simple Leaflet Tag Module based on Leaflet GitHub Documentation in manpage
Django GeoDjango A world-class geographic web framework included in the Django framework A world-class geographic web framework geodjango-basic-apps
Django OSMEditor old! from year 2009 [2] Editors/Django#Installation
Django-CMS django-cms-osm [3] [4]
Drupal DrupalMappingKit collection of drupal modules to support custom mapping [5] Drupal tutorial from MapBox MapBox
Drupal Leaflet module Leaflet module
Drupal OpenLayers module OpenLayers module
Joomla injooosm
Joomla OSModul Module based on Leaflet and supports markers [6]
Java Server Faces JSF2Leaf Powered by Leaflet
MediaWiki Simple image This wiki!
MediaWiki Slippy Map Powered by OpenLayers This wiki! This wiki!
MediaWiki Kartographer Powered by Leaflet MediaWiki wiki Wikivoyage
MediaWiki Maps Powered by OpenLayers Manual
MediaWiki Semantic Maps Requires Semantic MediaWiki Manual
MoinMoin moinmoinosm Macro for MoinMoin [7] [8] Flisol
Novius OS Ounziw OSM iframe style OSM map GitHub
Tiki Wiki CMS Groupware built-in via OpenLayers
Typo3 [9] DE:Typo3
WordPress OSM WordPress Plugin also adds gpx and kml files Download Simple sample Plugin Blog

See also:

  • Cartaro is a framework for embedding maps in different CMS, especially Drupal.

Sources of tiles

OpenStreetMap tile servers

Typically these examples show you how to use the OpenStreetMap tile servers. Your site serves up the HTML and the JavaScript (maybe) but the tile images of the map are still fetched by the browser from our servers. You must do this in accordance with the tile usage policy. The tile service comes with no guarantee as to availability or speed (if you expect particularly heavy demand, please contact the community to discuss your requirements first).

Alternative tile servers

Alternative tile providers (with their own usage policies) are available. Some of them are combining OSM data with their own imagery and/or applying different colours and styles of map details.

See Slippy map tilenames#Tile servers, TMS for a list of some tile providers.

Your own map tiles

For ultimate flexibility, OpenStreetMap also gives you the unique ability to generate your own map tiles — styled any way you like — from our data.

  • See for more information on serving your own tiles.
  • TileLauncher is a free out-of-the-box styled-tileserver for Amazon EC2. In a few clicks, choose your theme colours, your Amazon Instance type, your region, enter your credentials and press "Launch". [10]