Deploying your own Slippy Map

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.

JavaScript libraries

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:

NameLicenseRaster tilesVector tiles
Leaflet (wiki)BSD 2-Clauseyesno[1]
Google Maps JS API (wiki)Proprietaryyesvia plugin
OpenLayers (wiki)BSD 2-Clauseyesyes
Mapbox GL JS (wiki)Proprietaryyesyes
MapLibre GL JS (wiki)BSDyesyes
TangramMITnoyes

www.openstreetmap.org is using Leaflet.

  1. There are various plugins but none of them claim to work with the latest Leaflet version.

Embedding OSM in a CMS/framework

You can embed OSM in your favourite content management system (CMS):

CMS/frameworkModule/pluginNoteSourcesTutorialExample
with OSM map embedded
JoomlaOSModulModule based on Leaflet and supports markers
MediawikiMultiMapsUses Leaflet or Google Maps API (configurable)Wikimedia GerritThis wiki!In the tutorial
MediaWikiKartographerPowered by LeafletMediaWiki wikiWikivoyage
MediaWikiMapsPowered by LeafletManual
Tiki Wiki CMS Groupwarebuilt-inVia OpenLayers
WordPressOSM WordPress PluginAlso adds gpx and kml filesDownloadSimple sample

Sources of tiles


OpenStreetMap tile servers

Typically these examples show you how to use the OpenStreetMap tile servers run by the OpenStreetMap Foundation itself. 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. This service run by donations is not designed and suited for heavily used applications. Please consider using a commercial tile provider instead.

Alternative tile servers

Alternative tile providers (with their own usage policies) are available. Many of them apply different colours and styles of map details.

See Raster tile providers 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.

See also

This article is issued from Openstreetmap. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.