Deploying your own Slippy Map
Deploying your own Slippy Map is a common way of Using OpenStreetMap.
 |
Please don't forget to credit OpenStreetMap. See Legal FAQ for details |
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 an feature-rich free open source JavaScript library. This is the most popular way of presenting OSM maps.
- CloudMade Web Maps API ([1]) is a lightweight (fast loading) alternative from CloudMade
- 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.
- Modestmaps-js is a lightweight, Javascript version of ModestMaps.
Other less widely used alternatives:
- 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 Flash and Python.
- BruTile (brutile.codeplex.com) a C# library for tile services (use online via silverlight)
- Polymaps (polymaps.org) JavaScript library from Stamen
Contents |
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 |
|---|---|---|---|---|---|
| Cmsmadesimple | |||||
| 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 | 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 |
| Tiki Wiki CMS Groupware | built-in | via OpenLayers | |||
| Typo3 | [9] | DE:Typo3 | |||
| WordPress | OSM WordPress Plugin | also adds gpx and kml files | Download | Adding a map to your posts | sample at the plugin authors blog |
| CMS Made Simple | Osm Tag | Module based on OpenLayers | Download | Documentation in manpage |
Sources of tiles
 |
It is highly recommend to contact the operators before using their servers! Respect their Tile usage policy |
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.
