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

more docs updates, jekyllize remaining pages

Browse Source
This commit is contained in:
mourner 2012-07-21 01:11:26 +03:00
parent 30a5caee4d
commit 4ee1ee8b9c
6 changed files with 175 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/default.html
View File

@ -125,7 +125,7 @@
<div class="footer">
<hr />
<p class="quiet">&copy; 2012 <a href="http://cloudmade.com">CloudMade</a>, <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>. Map data &copy; 2012 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
<p class="quiet">&copy; 2011&ndash;2012 <a href="http://cloudmade.com">CloudMade</a>, <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>. Map data &copy; 2012 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
</div>
</div>

2
examples/custom-icons.md
View File

@ -1,6 +1,6 @@
---
layout: default
title: Custom Icons
title: Markers With Custom Icons
root: ../
---

237
examples/geojson.html
View File

@ -1,133 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Leaflet on Mobile Example</title>
---
layout: default
title: Using GeoJSON with Leaflet
root: ../
---
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<p><a href="../examples.html">&larr; Back to the list of examples</a></p>
<h3>Using GeoJSON with Leaflet</h3>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
<meta property="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>GeoJSON is becoming a very popular data format among many GIS technologies and services — it's simple, lightweight, straightforward, and Leaflet is quite good at handling it. In this example, you'll learn how to create and interact with map vectors created from <a href="http://geojson.org/">GeoJSON</a> objects.</p>
<link rel="icon" type="image/png" href="../docs/images/favicon.png" />
<div id="map" style="height: 220px; margin-bottom: 18px"></div>
<!-- Blueprint -->
<link rel="stylesheet" href="../docs/css/blueprint/screen.css" media="screen, projection">
<link rel="stylesheet" href="../docs/css/blueprint/print.css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
<script src="sample-geojson.js" type="text/javascript"></script>
<script>
<link rel="stylesheet" href="../docs/css/screen.css" media="screen, projection" />
var map = L.map('map').setView([39.74739, -105], 13);
<script src="../docs/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="../docs/highlight/styles/github.css" />
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);
<!-- Leaflet -->
<link rel="stylesheet" href="../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<script src="../dist/leaflet.js"></script>
</head>
<body>
<div class="container">
<h1>Leaflet</h1>
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
<ul class="nav clearfix">
<li><a href="../index.html">Overview</a></li>
<li><a href="../features.html">Features</a></li>
<li><a href="../examples.html">Tutorials</a></li>
<li><a href="../reference.html">Documentation</a></li>
<li><a href="../download.html">Download</a></li>
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">Twitter</a></li>
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub</a></li>
</ul>
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
<p><a href="../examples.html">&larr; Back to the list of examples</a></p>
<h3>Using GeoJSON with Leaflet</h3>
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
<p>GeoJSON is becoming a very popular data format among many GIS technologies and services — it's simple, lightweight, straightforward, and Leaflet is quite good at handling it. In this example, you'll learn how to create and interact with map vectors created from <a href="http://geojson.org/">GeoJSON</a> objects.</p>
layer.bindPopup(popupContent);
}
<div id="map" style="height: 220px; margin-bottom: 18px"></div>
L.geoJson({features: [freeBus, bicycleRental, campus]}, {
<script src="sample-geojson.js" type="text/javascript"></script>
<script>
style: function (feature) {
return feature.properties && feature.properties.style;
},
var map = L.map('map').setView([39.74739, -105], 13);
onEachFeature: onEachFeature,
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJson(coorsField, {
L.geoJson({features: [freeBus, bicycleRental, campus]}, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
},
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature
}).addTo(map);
onEachFeature: onEachFeature,
</script>
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
<p><a target="_blank" href="geojson-example.html">View example on a separate page &rarr;</a></p>
L.geoJson(coorsField, {
<h3>About GeoJSON</h3>
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
},
<p>According to <a href="http://geojson.org">http://geojson.org</a>:</p>
onEachFeature: onEachFeature
}).addTo(map);
<blockquote>GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.</blockquote>
</script>
<p>Leaflet supports all of the GeoJSON types above but <a href="http://geojson.org/geojson-spec.html#feature-objects">Features</a> and <a href="http://geojson.org/geojson-spec.html#feature-collection-objects">FeatureCollections</a> work best as they allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. (<a target="_blank" href="geojson-example.html">see example</a>)</p>
<p><a target="_blank" href="geojson-example.html">View example on a separate page &rarr;</a></p>
<h3>The GeoJSON layer</h3>
<h3>About GeoJSON</h3>
<p>GeoJSON objects are added to the map through a <a href="http://leaflet.cloudmade.com/reference.html#geojson">GeoJSON layer</a>. To create a GeoJSON layer and add it to a map we can use the following code.</p>
<p>According to <a href="http://geojson.org">http://geojson.org</a>:</p>
<blockquote>GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.</blockquote>
<p>Leaflet supports all of the GeoJSON types above but <a href="http://geojson.org/geojson-spec.html#feature-objects">Features</a> and <a href="http://geojson.org/geojson-spec.html#feature-collection-objects">FeatureCollections</a> work best as they allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. (<a target="_blank" href="geojson-example.html">see example</a>)</p>
<h3>The GeoJSON layer</h3>
<p>GeoJSON objects are added to the map through a <a href="http://leaflet.cloudmade.com/reference.html#geojson">GeoJSON layer</a>. To create a GeoJSON layer and add it to a map we can use the following code.</p>
<pre><code class="css">var geojsonLayer = new L.GeoJSON();
<pre><code class="css">var geojsonLayer = new L.GeoJSON();
map.addLayer(geojsonLayer);</code></pre>
<p>This creates an empty GeoJSON layer that we can easily add vectors to with the <code>addGeoJSON</code> method.</p>
<p>This creates an empty GeoJSON layer that we can easily add vectors to with the <code>addGeoJSON</code> method.</p>
<pre><code>var geojsonFeature = {
<pre><code>var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
@ -142,29 +105,29 @@ map.addLayer(geojsonLayer);</code></pre>
geojsonLayer.addGeoJSON(geojsonFeature);</code></pre>
<p>We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call <code>addGeoJSON</code>.</p>
<p>We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call <code>addGeoJSON</code>.</p>
<pre><code>var geojsonLayer = new L.GeoJSON(geojsonFeature);
<pre><code>var geojsonLayer = new L.GeoJSON(geojsonFeature);
map.addLayer(geojsonLayer);</code></pre>
<h3>Popups</h3>
<h3>Popups</h3>
<p>We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the <code>featureparse</code> event of the GeoJSON layer. Here we're checking to see if a feature has a property named "popupContent" and if so binding a popup to the feature so this text (or HTML) appears when clicked.</p>
<p>We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the <code>featureparse</code> event of the GeoJSON layer. Here we're checking to see if a feature has a property named "popupContent" and if so binding a popup to the feature so this text (or HTML) appears when clicked.</p>
<pre><code>geojsonLayer.on("featureparse", function (e) {
<pre><code>geojsonLayer.on("featureparse", function (e) {
if (e.properties &amp;&amp; e.properties.popupContent){
e.layer.bindPopup(e.properties.popupContent);
}
});</code></pre>
<p>Make sure to do this <em>before</em> adding GeoJSON objects through the <code>addGeoJSON</code> method.</p>
<p>Make sure to do this <em>before</em> adding GeoJSON objects through the <code>addGeoJSON</code> method.</p>
<h3>Styling Features</h3>
<h3>Styling Features</h3>
<p>We can also listen to the <code>featureparse</code> event to style our Polyline and Polygon features. As with our popup content, we can store our styling information in the properties of the GeoJSON object as well. These style properties should match those found in <a href="http://leaflet.cloudmade.com/reference.html#path-options">path options</a>. Our feature with styling information might look something like:</p>
<p>We can also listen to the <code>featureparse</code> event to style our Polyline and Polygon features. As with our popup content, we can store our styling information in the properties of the GeoJSON object as well. These style properties should match those found in <a href="http://leaflet.cloudmade.com/reference.html#path-options">path options</a>. Our feature with styling information might look something like:</p>
<pre><code>var freeBus = {
<pre><code>var freeBus = {
"type": "Feature",
"geometry": {
"type": "LineString",
@ -187,22 +150,22 @@ map.addLayer(geojsonLayer);</code></pre>
}
};</code></pre>
<p>To change the feature's style from the Leaflet default, we simply call the <code>setStyle</code> method on our layer (<code>e.layer</code>) in our <code>featureparse</code> event listener.</p>
<p>To change the feature's style from the Leaflet default, we simply call the <code>setStyle</code> method on our layer (<code>e.layer</code>) in our <code>featureparse</code> event listener.</p>
<pre><code>geojsonLayer.on("featureparse", function (e){
<pre><code>geojsonLayer.on("featureparse", function (e){
if (e.properties &amp;&amp; e.properties.style &amp;&amp; e.layer.setStyle){
// The setStyle method isn't available for Points. More on that below ...
e.layer.setStyle(e.properties.style);
}
});</code></pre>
<h3>Styling Points</h3>
<h3>Styling Points</h3>
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="http://leaflet.cloudmade.com/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="http://leaflet.cloudmade.com/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="http://leaflet.cloudmade.com/reference.html#marker">Marker</a> or <a href="http://leaflet.cloudmade.com/reference.html#circlemarker">CircleMarker</a>.</p>
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="http://leaflet.cloudmade.com/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="http://leaflet.cloudmade.com/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="http://leaflet.cloudmade.com/reference.html#marker">Marker</a> or <a href="http://leaflet.cloudmade.com/reference.html#circlemarker">CircleMarker</a>.</p>
<p>Here we're using a CircleMarker:</p>
<p>Here we're using a CircleMarker:</p>
<pre><code>var geojsonMarkerOptions = {
<pre><code>var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
@ -217,9 +180,9 @@ var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
}
});</code></pre>
<p>And here's an example of using a custom Marker:</p>
<p>And here's an example of using a custom Marker:</p>
<pre><code>var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
<pre><code>var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
pointToLayer: function (latlng) {
return new L.Marker(latlng, {
icon: new MyCustomIcon()
@ -227,44 +190,4 @@ var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
}
});</code></pre>
<p>View the <a href="geojson-example.html">example page</a> to see in detail what is possible with the GeoJSON layer.</p>
<hr />
<p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
</div>
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
_gaq.push([ '_trackPageview' ]);
(function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/ygv5CFpu3yBQFTFPOAdFg.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
</body>
</html>
<p>View the <a href="geojson-example.html">example page</a> to see in detail what is possible with the GeoJSON layer.</p>

185
examples/layers-control.html
View File

@ -1,104 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Layers Control Example</title>
---
layout: default
title: Layer Groups and Layers Control
root: ../
---
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
<meta property="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><a href="../examples.html">&larr; Back to the list of examples</a></p>
<h3>Layer Groups and Layers Control</h3>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<p>This guide will show you how to group several layers into one, and how to use the layers control to allow users to easily switch different layers on your map.</p>
<p>Note: this only works in the latest (master) version of Leaflet.</p>
<link rel="icon" type="image/png" href="../docs/images/favicon.png" />
<div id="map" style="height: 250px; margin-bottom: 18px"></div>
<script>
var littletonMarker = new L.Marker(new L.LatLng(39.61, -105.02)).bindPopup("This is Littleton, CO."),
denverMarker = new L.Marker(new L.LatLng(39.74, -104.99)).bindPopup("This is Denver, CO."),
auroraMarker = new L.Marker(new L.LatLng(39.73, -104.8)).bindPopup("This is Aurora, CO."),
goldenMarker = new L.Marker(new L.LatLng(39.77, -105.23)).bindPopup("This is Golden, CO.");
<!-- Blueprint -->
<link rel="stylesheet" href="../docs/css/blueprint/screen.css" media="screen, projection">
<link rel="stylesheet" href="../docs/css/blueprint/print.css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
var citiesLayer = new L.LayerGroup();
<link rel="stylesheet" href="../docs/css/screen.css" media="screen, projection" />
citiesLayer.addLayer(littletonMarker);
citiesLayer.addLayer(denverMarker);
citiesLayer.addLayer(auroraMarker);
citiesLayer.addLayer(goldenMarker);
<script src="../docs/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="../docs/highlight/styles/github.css" />
var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
<!-- Leaflet -->
<link rel="stylesheet" href="../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<script src="../dist/leaflet.js"></script>
</head>
<body>
<div class="container">
<h1>Leaflet</h1>
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
var minimal = new L.TileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
midnightCommander = new L.TileLayer(cloudmadeUrl, {styleId: 999, attribution: cloudmadeAttribution}),
motorways = new L.TileLayer(cloudmadeUrl, {styleId: 46561, attribution: cloudmadeAttribution});
<ul class="nav clearfix">
<li><a href="../index.html">Overview</a></li>
<li><a href="../features.html">Features</a></li>
<li><a href="../examples.html">Tutorials</a></li>
<li><a href="../reference.html">Documentation</a></li>
<li><a href="../download.html">Download</a></li>
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">Twitter</a></li>
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub</a></li>
</ul>
var map = new L.Map('map', {center: new L.LatLng(39.73, -104.99), zoom: 10, layers: [minimal, motorways, citiesLayer]});
<p><a href="../examples.html">&larr; Back to the list of examples</a></p>
<h3>Layer Groups and Layers Control</h3>
var baseMaps = {
"Minimal": minimal,
"Night View": midnightCommander
};
<p>This guide will show you how to group several layers into one, and how to use the layers control to allow users to easily switch different layers on your map.</p>
<p>Note: this only works in the latest (master) version of Leaflet.</p>
var overlayMaps = {
"Motorways": motorways,
"Cities": citiesLayer
};
<div id="map" style="height: 250px; margin-bottom: 18px"></div>
<script>
var littletonMarker = new L.Marker(new L.LatLng(39.61, -105.02)).bindPopup("This is Littleton, CO."),
denverMarker = new L.Marker(new L.LatLng(39.74, -104.99)).bindPopup("This is Denver, CO."),
auroraMarker = new L.Marker(new L.LatLng(39.73, -104.8)).bindPopup("This is Aurora, CO."),
goldenMarker = new L.Marker(new L.LatLng(39.77, -105.23)).bindPopup("This is Golden, CO.");
layersControl = new L.Control.Layers(baseMaps, overlayMaps);
var citiesLayer = new L.LayerGroup();
map.addControl(layersControl);
</script>
citiesLayer.addLayer(littletonMarker);
citiesLayer.addLayer(denverMarker);
citiesLayer.addLayer(auroraMarker);
citiesLayer.addLayer(goldenMarker);
<p><a target="_blank" href="layers-control-example.html">View example on a separate page &rarr;</a></p>
var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
<h3>Layer Groups</h3>
var minimal = new L.TileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
midnightCommander = new L.TileLayer(cloudmadeUrl, {styleId: 999, attribution: cloudmadeAttribution}),
motorways = new L.TileLayer(cloudmadeUrl, {styleId: 46561, attribution: cloudmadeAttribution});
<p>Lets suppose you have a bunch of layers you want to combine into a group to handle them as one in your code:</p>
var map = new L.Map('map', {center: new L.LatLng(39.73, -104.99), zoom: 10, layers: [minimal, motorways, citiesLayer]});
var baseMaps = {
"Minimal": minimal,
"Night View": midnightCommander
};
var overlayMaps = {
"Motorways": motorways,
"Cities": citiesLayer
};
layersControl = new L.Control.Layers(baseMaps, overlayMaps);
map.addControl(layersControl);
</script>
<p><a target="_blank" href="layers-control-example.html">View example on a separate page &rarr;</a></p>
<h3>Layer Groups</h3>
<p>Lets suppose you have a bunch of layers you want to combine into a group to handle them as one in your code:</p>
<pre><code>var littletonMarker = new L.Marker(new L.LatLng(39.61, -105.02)).bindPopup("This is Littleton, CO."),
<pre><code>var littletonMarker = new L.Marker(new L.LatLng(39.61, -105.02)).bindPopup("This is Littleton, CO."),
denverMarker = new L.Marker(new L.LatLng(39.74, -104.99)).bindPopup("This is Denver, CO."),
auroraMarker = new L.Marker(new L.LatLng(39.73, -104.8)).bindPopup("This is Aurora, CO."),
goldenMarker = new L.Marker(new L.LatLng(39.77, -105.23)).bindPopup("This is Golden, CO.");</code></pre>
<p>Instead of adding them directly to the map, you can do the following, using the <a href="http://leaflet.cloudmade.com/reference.html#layergroup">LayerGroup</a> class:</p>
<p>Instead of adding them directly to the map, you can do the following, using the <a href="http://leaflet.cloudmade.com/reference.html#layergroup">LayerGroup</a> class:</p>
<pre><code>var citiesLayer = new L.LayerGroup();
<pre><code>var citiesLayer = new L.LayerGroup();
citiesLayer.addLayer(littletonMarker)
.addLayer(denverMarker)
@ -107,15 +70,15 @@ citiesLayer.addLayer(littletonMarker)
map.addLayer(citiesLayer);</code></pre>
<p>Easy enough! Now you have <code>citiesLayer</code> that combines your city markers into one layer you can add or remove from the map at once.</p>
<p>Easy enough! Now you have <code>citiesLayer</code> that combines your city markers into one layer you can add or remove from the map at once.</p>
<h3>Layers Control</h3>
<h3>Layers Control</h3>
<p>Leaflet has a nice little control that allows your users control what layers they want to see on your map. In addition to showing you how to use it, we'll show another handy use for layer groups.</p>
<p>Leaflet has a nice little control that allows your users control what layers they want to see on your map. In addition to showing you how to use it, we'll show another handy use for layer groups.</p>
<p>There are two types of layers &mdash; base layers that are mutually exclusive (only one can be visible on your map), e.g. tile layers, and overlays &mdash; all the other stuff you put over the base layers. In this example, we want to have two base layers (minimal and night-style base map) to switch between, and two overlays to switch on and off &mdash; a pink motorways overlay and city markers (those we created earlier). Lets create those layers and add the default ones to the map:</p>
<p>There are two types of layers &mdash; base layers that are mutually exclusive (only one can be visible on your map), e.g. tile layers, and overlays &mdash; all the other stuff you put over the base layers. In this example, we want to have two base layers (minimal and night-style base map) to switch between, and two overlays to switch on and off &mdash; a pink motorways overlay and city markers (those we created earlier). Lets create those layers and add the default ones to the map:</p>
<pre><code>var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/{styleId}/256/{z}/{x}/{y}.png',
<pre><code>var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/{styleId}/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &amp;copy; 2011 OpenStreetMap contributors, Imagery &amp;copy; 2011 CloudMade',
cloudmadeOptions = {maxZoom: 18, };
@ -129,9 +92,9 @@ var map = new L.Map('map', {
layers: [minimal, motorways, citiesLayer]
});</code></pre>
<p>Next, we'll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key is what sets the text for the layer in the control (e.g. "Night View"). The corresponding value is a reference to the layer (e.g. <code>midnightCommander</code>).</p>
<p>Next, we'll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key is what sets the text for the layer in the control (e.g. "Night View"). The corresponding value is a reference to the layer (e.g. <code>midnightCommander</code>).</p>
<pre><code>var baseMaps = {
<pre><code>var baseMaps = {
"Minimal": minimal,
"Night View": midnightCommander
};
@ -141,51 +104,11 @@ var overlayMaps = {
"Cities": citiesLayer
};</code></pre>
<!-- TODO: Link "Layers Control" to the Layers Control docs when they are created -->
<p>Now, all that's left to do is to create a Layers Control and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object. Both arguments are optional &mdash; for example, you can pass just a base layers object by ommiting the second argument, or just an overlays objects by passing <code>null</code> as the first argument.</p>
<!-- TODO: Link "Layers Control" to the Layers Control docs when they are created -->
<p>Now, all that's left to do is to create a Layers Control and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object. Both arguments are optional &mdash; for example, you can pass just a base layers object by ommiting the second argument, or just an overlays objects by passing <code>null</code> as the first argument.</p>
<pre><code>var layersControl = new L.Control.Layers(baseMaps, overlayMaps);
<pre><code>var layersControl = new L.Control.Layers(baseMaps, overlayMaps);
map.addControl(layersControl);</code></pre>
<p>Now lets <a target="_blank" href="layers-control-example.html">view the result on a separate page &rarr;</a></p>
<hr />
<p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
</div>
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
_gaq.push([ '_trackPageview' ]);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/ygv5CFpu3yBQFTFPOAdFg.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
</body>
</html>
<p>Now lets <a target="_blank" href="layers-control-example.html">view the result on a separate page &rarr;</a></p>

127
examples/mobile.html
View File

@ -1,56 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Leaflet on Mobile Example</title>
---
layout: default
title: Leaflet on Mobile
root: ../
---
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
<meta property="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><a href="../examples.html">&larr; Back to the list of examples</a></p>
<h3>Leaflet on Mobile</h3>
<link rel="icon" type="image/png" href="../docs/images/favicon.png" />
<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>
<!-- Blueprint -->
<link rel="stylesheet" href="../docs/css/blueprint/screen.css" media="screen, projection">
<link rel="stylesheet" href="../docs/css/blueprint/print.css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
<p><a target="_blank" href="mobile-example.html">View example &rarr;</a></p>
<link rel="stylesheet" href="../docs/css/screen.css" media="screen, projection" />
<h3>Preparing the page</h3>
<script src="../docs/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="../docs/highlight/styles/github.css" />
<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>
<!-- Leaflet -->
<link rel="stylesheet" href="../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<script src="../dist/leaflet.js"></script>
</head>
<body>
<div class="container">
<h1>Leaflet</h1>
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
<ul class="nav clearfix">
<li><a href="../index.html">Overview</a></li>
<li><a href="../features.html">Features</a></li>
<li><a href="../examples.html">Tutorials</a></li>
<li><a href="../reference.html">Documentation</a></li>
<li><a href="../download.html">Download</a></li>
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">Twitter</a></li>
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub</a></li>
</ul>
<p><a href="../examples.html">&larr; 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><a target="_blank" href="mobile-example.html">View example &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>
<pre><code class="css">body {
<pre><code class="css">body {
padding: 0;
margin: 0;
}
@ -58,15 +23,15 @@ 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:</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>
<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>
<h3>Initializing the map</h3>
<h3>Initializing the map</h3>
<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>
<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 = new 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',
@ -74,15 +39,15 @@ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{
map.addLayer(cloudmade);</code></pre>
<h3>Geolocation</h3>
<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; locateAndSetView method, 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.locateAndSetView(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. 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);
<pre><code class="javascript">map.on('locationfound', onLocationFound);
function onLocationFound(e) {
var radius = e.accuracy / 2;
@ -95,54 +60,14 @@ function onLocationFound(e) {
map.addLayer(circle);
}</code></pre>
<p>Excellent! But it would also be nice to show an error message if the geolocation failed:</p>
<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);
<pre><code class="javascript">map.on('locationerror', onLocationError);
function onLocationError(e) {
alert(e.message);
}</code></pre>
<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>
<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>
<p>Next steps would be to take a look at the detailed <a href="../reference.html">documentation</a> and browse <a href="../examples.html">other examples</a>.</p>
<hr />
<p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
</div>
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
_gaq.push([ '_trackPageview' ]);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/ygv5CFpu3yBQFTFPOAdFg.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
</body>
</html>
<p>Next steps would be to take a look at the detailed <a href="../reference.html">documentation</a> and browse <a href="../examples.html">other examples</a>.</p>

16
reference.html
View File

@ -384,6 +384,11 @@ var map = L.map('map', {
<td><code><a href="#mouse-event">MouseEvent</a></code>
<td>Fired when the user pushes the mouse button on the map.</td>
</tr>
<tr>
<td><code><b>mouseup</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code>
<td>Fired when the user pushes the mouse button on the map.</td>
</tr>
<tr>
<td><code><b>mouseenter</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code>
@ -1229,15 +1234,20 @@ var map = L.map('map', {
<h3>Methods</h3>
<table>
<tr>
<th class="width250">Method</th>
<th class="minwidth">Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>addTo</b>( <nobr>&lt;<a href="#map">Map</a>&gt; <i>map</i> )</nobr></code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Adds the popup to the map.</td>
</tr>
<tr>
<th class="width250">Method</th>
<th class="minwidth">Returns</th>
<th>Description</th>
<td><code><b>openOn</b>( <nobr>&lt;<a href="#map">Map</a>&gt; <i>map</i> )</nobr></code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Adds the popup to the map and closes the previous one. The same as <code>map.openPopup(popup)</code>.</td>
</tr>
<tr>
<td><code><b>setLatLng</b>( <nobr>&lt;<a href="#latlng">LatLng</a>&gt; <i>latlng</i> )</nobr></code></td>