<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Leaflet on Mobile Example</title>
<metacharset="utf-8"/>
<metaproperty="og:title"content="Leaflet — an open-source JavaScript library for interactive maps"/>
<metaproperty="og:description"content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API."/>
<p><ahref="../examples.html">← Back to the list of examples</a></p>
<h3>Leaflet on Mobile</h3>
<p>In this example, you'll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.</p>
<p><atarget="_blank"href="mobile-example.html">View example →</a></p>
<h3>Preparing the page</h3>
<p>First we'll take a look at the HTML & CSS code of the page. To make our map <code>div</code> element stretch to all available space (fullscreen), we can use the following CSS code:</p>
<pre><codeclass="css">body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}</code></pre>
<p>Also, we need to tell the mobile browser to disable scaling of the page and set it to its actual size by placing the following line in the <code>head</code> section:</p>
<p>We'll now initialize the map in the JavaScript code exactly like we did in the <ahref="quick-start">quick start guide</a>, but won't set the map view yet:</p>
<pre><codeclass="javascript">var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
<p>Leaflet has a very handy shortcut for zooming the map view to the detected location — locateAndSetView method, replacing the usual <code>setView</code> method in the code:</p>
<p>Here we specify 16 as the maximum zoom when setting the map view automatically. Now we have a working fullscreen mobile map! But what if we need to do something after the geolocation completed? Here's what the <code>locationfound</code> and <code>locationerror</code> events are for. Let's for example add a marker in the detected location, showing accuracy in a popup, by adding an event listener to <code>locationfound</code> event before the <code>locateAndSetView</code> call:</p>
<p>Now the example is complete — try it on your mobile phone: <atarget="_blank"href="mobile-example.html">View the full example →</a></p>
<p>Next steps would be to take a look at the detailed <ahref="../reference.html">documentation</a> and browse <ahref="../examples.html">other examples</a>.</p>
<ahref="http://github.com/CloudMade/Leaflet"><imgid="forkme"src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"alt="Fork me on GitHub"/></a>
