The Basics – Switch2OSM

<!DOCTYPE html> <html> <meta charset="utf-8"> <title>The Basics – Switch2OSM</title> <meta name="description" content="Switch to OpenStreetMap and discover how you can build beautiful maps from the world’s best map data. ">  <meta property="og:locale" content=""> <meta property="og:type" content="article"> <meta property="og:title" content="The Basics"> <meta property="og:description" content="Switch to OpenStreetMap and discover how you can build beautiful maps from the world’s best map data. "> <meta property="og:url" content="/the-basics/"> <meta property="og:site_name" content="Switch2OSM"> <meta property="og:image" content="/images/"> <link rel="canonical" href="/the-basics/"> <link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Switch2OSM Feed">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>  <link rel="stylesheet" href="/assets/css/main.css"> <link rel="stylesheet" href="/assets/css/jquery.mmenu.all.css"> <link rel="stylesheet" href="/assets/css/jquery.floating-social-share.min.css"> <meta http-equiv="cleartype" content="on">  <script type="text/javascript" src="/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>   <link rel="shortcut icon" href="/favicon.ico">  <link rel="shortcut icon" href="/favicon.png">  <link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png">  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72-precomposed.png">  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114-precomposed.png">  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144-precomposed.png"> <body> <div class="header-menu header-menu-top"> <ul class="header-item-container"> <li class="header-item-title header-toggle "><a href="#menu"><h2><i class="fa fa-bars"></i></h2></a> </li> <li class="header-item-title"> <a href="/" class="title" > <b>Switch2<span class="secondary">OSM</span></b></a> </li> <li class="header-item "><a href="/find-out-more/"><h3>Find Out More</h3></a></li> <li class="header-item "><a href="/providers/"><h3>Providers</h3></a></li> <li class="header-item "><a href="/other-uses/"><h3>Other Uses</h3></a></li> <li class="header-item "><a href="/serving-tiles/"><h3>Serving Tiles</h3></a></li> <li class="header-item "><a href="/using-tiles/"><h3>Using Tiles</h3></a></li> <li class="header-item active"><a href="/the-basics/"><h3>The Basics</h3></a></li> <li class="header-item "><a href="/case-studies/"><h3>Case Studies</h3></a></li> <li class="header-item "><a href="/why-switch/"><h3>Why Switch?</h3></a></li> </ul> </div> <div class="container-header"> <div class=" logo-page "> <h1>Switch2<span class="secondary">OSM</span></h1> <p class="">Take back control of your maps</p> </div> </div> <nav id="menu" style="display: none"> <ul> <li><a href="/why-switch/"><h3>Why Switch?</h3></a></li> <li><a href="/case-studies/"><h3>Case Studies</h3></a></li> <li><a href="/the-basics/"><h3>The Basics</h3></a></li> <li><a href="/using-tiles/"><h3>Using Tiles</h3></a></li> <li><a href="/serving-tiles/"><h3>Serving Tiles</h3></a></li> <li><a href="/other-uses/"><h3>Other Uses</h3></a></li> <li><a href="/providers/"><h3>Providers</h3></a></li> <li><a href="/find-out-more/"><h3>Find Out More</h3></a></li> </ul> </nav> <div class="page-content"> <div class="wrapper">  <body id="page"> <div class="container"> <div class="title-container"> <h3>The Basics</h3> </div> <div class="entry-content"> <h1 id="the-challenge">The challenge</h1> <p>Your current map provider gives you two things:</p> <ul> <li>A set of ’tiles’ (square map images) that are placed together to make the map</li> <li>A JavaScript API, or equivalent library for mobile apps, to view them</li> </ul> <p>To switch to OpenStreetMap, you’ll need to replace both of these.</p> <h1 id="the-tiles">The tiles</h1> <p><img src="tiles.png" alt="Tiles" /> The map tiles, images of (usually) 256 x 256 pixels each, are drawn (“rendered”) from a map database.</p> <p>If you currently use Google Maps, you’ll be using Google’s map tiles, hosted at google.com. Because the OpenStreetMap Foundation is a non-profit organisation with limited resources, you can’t just slot in the tiles from openstreetmap.org as a replacement (see the <a href="https://operations.osmfoundation.org/policies/tiles/">Tile Usage Policy</a>). Instead, you can:</p> <ul> <li> <p>Generate your own tiles, by downloading the free OSM map database and rendering them;</p> </li> <li> <p>Or use a third-party supplier (some of whom charge, some are free)</p> </li> </ul> <p>The OSM map database is called planet.osm. The full database and regular update files are both available at <a href="http://planet.openstreetmap.org/">planet.openstreetmap.org</a>.</p> <p>Rendering your own tiles gives you complete control over their appearance. You can customise the maps to appear any way you like. Alternatively, third-party suppliers have OSM expertise and may have ready-prepared map styles that you can use.</p> <h1 id="the-apilibrary">The API/library</h1> <p>There is no single canonical library: you can choose whichever suits your needs best. The two most popular JavaScript libraries for displaying OSM tiles are:</p> <ul> <li> <p>OpenLayers – powerful and long-established</p> </li> <li> <p>Leaflet – lightweight and easy-to-learn</p> </li> </ul> <p>APIs are also available for mobile platforms, such as <a href="https://github.com/route-me/route-me">Route-Me</a> (iOS) and <a href="https://github.com/osmdroid/osmdroid">osmdroid</a> (Android).</p> <h1 id="the-licence">The licence</h1> <p>Unlike commercial providers’ data, OpenStreetMap is ‘open data’. The map data is available to you free-of-charge, with the freedom to copy and modify. OSM’s licence is the <a href="http://opendatacommons.org/licenses/odbl/summary/">Open Database Licence</a>.</p> <p>Your obligations are:</p> <ul> <li> <p>Attribution. You must credit OpenStreetMap with the same prominence that would be expected if you were using a commercial provider. See <a href="http://www.openstreetmap.org/copyright">OSM’s copyright guidelines</a>.</p> </li> <li> <p>Share-Alike. When you use any adapted version of OSM’s map data, or works produced with it, you must also offer that adapted database under the ODbL.</p> </li> </ul> <footer class="entry-meta"> </footer> </div> </div> <script type="text/javascript" src="/assets/js/vendor/jquery-1.9.1.min.js"></script> <script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script> <script type="text/javascript" src="/assets/js/scripts.min.js"></script> <script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </body> </div> </div> <div class="footer-wrapper"> <footer role="contentinfo"> <i><span>© 2013–2025 OpenStreetMap and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA</a>. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a>.</span></i> </footer> </div> </body> </html>

CINXE.COM

The Basics – Switch2OSM