Deploying your own Slippy Map

Help

Available languages

• Deutsch • English • 日本語 • русский

Other languages — Help us translating this wiki

• Afrikaans • Alemannisch • አማርኛ • العربية • অসমীয়া • asturianu • azərbaycanca • বাংলা • български • bosanski • brezhoneg • català • česky • corsu • dansk • ދިވެހިބަސް • eesti • Ελληνικά • español • Esperanto • euskara • فارسی • français • Frysk • Gaeilge • Gàidhlig • galego • ગુજરાતી • 한국어 • Hausa • Հայերեն • हिन्दी • hrvatski • Igbo • Bahasa Indonesia • interlingua • isiXhosa • isiZulu • íslenska • italiano • עברית • Basa Jawa • ಕನ್ನಡ • ქართული • қазақша • Kiswahili • Kreyòl ayisyen • Kréyòl gwadloupéyen • Kurdî • ລາວ • latviešu • Lëtzebuergesch • lietuvių • magyar • македонски • Malagasy • മലയാളം • Malti • मराठी • Bahasa Melayu • монгол • မြန်မာဘာသာ • Nederlands • नेपाली • norsk bokmål • norsk nynorsk • occitan • ଓଡ଼ିଆ • Oromoo • oʻzbekcha • ਪੰਜਾਬੀ • پښتو • ភាសាខ្មែរ • polski • português • português do Brasil • română • shqip • سنڌي • සිංහල • slovenčina • slovenščina • Soomaaliga • српски / srpski • suomi • svenska • தமிழ் • తెలుగు • ไทย • тоҷикӣ • Türkçe • українська • اردو • Vahcuengh • Tiếng Việt • Wolof • Yorùbá • Zazaki • 中文（简体）‎ • 中文（繁體）‎

Deploying your own Slippy Map is a common way of Using OpenStreetMap.

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:

• OpenLayers (openlayers.org) is a feature-rich free open source JavaScript library. This is the most popular way of presenting OSM maps.
• Leaflet (leaflet.cloudmade.com) is a new JavaScript library from CloudMade, lightweight and with an easy API. Beta version. Open source. Supports touch and drag events on mobile devices.
• Google Maps Example shows how to use the google maps API to present OSM maps.
• Mapstraction (mapstraction.com) is an open source javascript wrapper around the above libraries (and several others) allowing you to swap your choice of map library provider without re-coding anything.

Other less widely used alternatives:

• CloudMade Web Maps API ([1]) is CloudMade's early offering. They since launched leaflet.
• YCanvas (ycanvas.yoz.sk) Flash/AIR library for web and mobile deployment.
• Zoom zoom zoom map has a nice smooth zoom feature
• Khtmlib also smooth zooms
• Ka-Map (ka-map.maptools.org)
• AFComponents UMap (afcomponents.com) embeddable Flash slippy map
• OpenScales (openscales.org) mapping framwork in ActionScript (flash), configurable by xml
• Modest Maps (modestmaps.com) in Actionscript3, Python, JavaScript, PHP, Processing, Cinder.
• Modestmaps-js is a lightweight, Javascript version of ModestMaps.
• BruTile (brutile.codeplex.com) a C# library for tile services (use online via silverlight)
• Polymaps (polymaps.org) JavaScript library from Stamen

Embeding 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 embeded
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	a little old...	[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]
MediaWiki		See MediaWiki extension		(this wiki! )
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 Switch2Osm.org for more information on serving your own tiles.
• Tiledrawer is a free, quick-start, out-of-the-box renderer and server using the standard OSM toolchain for Amazon EC2, other virtual servers, and fresh installs of Ubuntu on any hardware.