cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update mobile example

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-25 18:51:38 +03:00
parent 6b2184821e
commit 97b43a3e98
4 changed files with 116 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_layouts/default.html
View File

@ -135,11 +135,15 @@
hljs.tabReplace = ' ';
(function () {
var codes = document.getElementsByTagName('code');
var codes = document.getElementsByTagName('code'),
parentClass;
for (var i = 0, len = codes.length; i < len; i++) {
if (!codes[i].className) {
if (codes[i].innerHTML.match(/^\s*&lt;/)) {
parentClass = codes[i].parentNode.className;
if (parentClass) {
codes[i].className = parentClass;
} else if (codes[i].innerHTML.match(/^\s*&lt;/)) {
codes[i].className = 'xml';
} else {
codes[i].className = 'javascript';

29
examples/mobile-example.html
View File

@ -24,33 +24,30 @@
<div id="map"></div>
<script>
var map = new L.Map('map');
var map = L.map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.addLayer(cloudmade);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locateAndSetView();
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker = new L.Marker(e.latlng);
map.addLayer(marker);
marker.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
var circle = new L.Circle(e.latlng, radius);
map.addLayer(circle);
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
</body>
</html>

51
examples/mobile.html
View File

@ -7,11 +7,11 @@ title: Leaflet on Mobile
<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><a target="_blank" href="mobile-example.html">View example &rarr;</a></p>
<p><a href="mobile-example.html">View example in fullscreen &rarr;</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>
<p>First we'll take a look at the HTML &amp; 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><code class="css">body {
padding: 0;
@ -21,7 +21,7 @@ html, body, #map {
height: 100%;
}</code></pre>
<p>Also, we need to tell the mobile browser to disable unwanted scaling of the page and set it to its actual size by placing the following line in the <code>head</code> section:</p>
<p>Also, we need to tell the mobile browser to disable unwanted scaling of the page and set it to its actual size by placing the following line in the <code>head</code> section or our HTML page:</p>
<pre><code class="html">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;</code></pre>
@ -29,42 +29,43 @@ html, body, #map {
<p>We'll now initialize the map in the JavaScript code exactly like we did in the <a href="quick-start">quick start guide</a>, but won't set the map view yet:</p>
<pre><code class="javascript">var map = new L.Map('map');
<pre><code class="javascript">var map = L.map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.addLayer(cloudmade);</code></pre>
L.tileLayer('http://{s}.tile.cloudmade.com/<a href="http://cloudmade.com/register">API-key</a>/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &amp;copy; <span class="text-cut" data-cut="[&hellip;]">&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery &copy; &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>',
maxZoom: 18
}).addTo(map);</code></pre>
<h3>Geolocation</h3>
<p>Leaflet has a very handy shortcut for zooming the map view to the detected location &mdash; locateAndSetView method, replacing the usual <code>setView</code> method in the code:</p>
<p>Leaflet has a very handy shortcut for zooming the map view to the detected location &mdash; <code>locate</code> method with the <code>setView</code> option, replacing the usual <code>setView</code> method in the code:</p>
<pre><code class="javascript">map.locateAndSetView(16);</code></pre>
<pre><code class="javascript">map.locate({setView: true, maxZoom: 16});</code></pre>
<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>Here we specify 16 as the maximum zoom when setting the map view automatically. As soon as the user agrees to share its location and it's detected by the browser, the map will set the view to it. 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>
<pre><code class="javascript">map.on('locationfound', onLocationFound);
function onLocationFound(e) {
<pre><code class="javascript">function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker = new L.Marker(e.latlng);
map.addLayer(marker);
marker.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
var circle = new L.Circle(e.latlng, radius);
map.addLayer(circle);
}</code></pre>
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
</code></pre>
<p>Excellent! But it would also be nice to show an error message if the geolocation failed:</p>
<pre><code class="javascript">map.on('locationerror', onLocationError);
function onLocationError(e) {
<pre><code class="javascript">function onLocationError(e) {
alert(e.message);
}</code></pre>
}
map.on('locationerror', onLocationError);
</code></pre>
<p>If you have <code>setView</code> option set to true and the geolocation failed, it will set the view to the whole world.</p>
<p>Now the example is complete &mdash; try it on your mobile phone: <a target="_blank" href="mobile-example.html">View the full example &rarr;</a></p>

71
examples/mobile.md Normal file
View File

@ -0,0 +1,71 @@
---
layout: tutorial
title: Leaflet on Mobile
---
## Leaflet on Mobile
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.
[View example in fullscreen &rarr;](mobile-example.html)
### Preparing the page
First we'll take a look at the HTML &amp; CSS code of the page. To make our map `div` element stretch to all available space (fullscreen), we can use the following CSS code:
{: .css}
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Also, we need to tell the mobile browser to disable unwanted scaling of the page and set it to its actual size by placing the following line in the `head` section or our HTML page:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
### Initializing the map
We'll now initialize the map in the JavaScript code exactly like we did in the [quick start guide](quick-start.html), but won't set the map view yet:
<pre><code class="javascript">var map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/<a href="http://cloudmade.com/register">API-key</a>/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &amp;copy; <span class="text-cut" data-cut="[&hellip;]">&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery &copy; &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>',
maxZoom: 18
}).addTo(map);</code></pre>
### Geolocation
Leaflet has a very handy shortcut for zooming the map view to the detected location --- `locate` method with the `setView` option, replacing the usual `setView` method in the code:
map.locate({setView: true, maxZoom: 16});
Here we specify 16 as the maximum zoom when setting the map view automatically. As soon as the user agrees to share its location and it's detected by the browser, the map will set the view to it. Now we have a working fullscreen mobile map! But what if we need to do something after the geolocation completed? Here's what the `locationfound` and `locationerror` 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 `locationfound` event before the `locateAndSetView` call:
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
Excellent! But it would also be nice to show an error message if the geolocation failed:
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
If you have `setView` option set to true and the geolocation failed, it will set the view to the whole world.
Now the example is complete --- try it on your mobile phone: [View the full example &rarr;](mobile-example.html)
Next steps would be to take a look at the detailed [documentation](../reference.html) and browse [other examples](../examples.html).