VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-08-01 15:45:39 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

initial jekyll conversion

Browse Source
This commit is contained in:
Vladimir Agafonkin
2012-07-16 20:21:00 +03:00
parent e8adf9f919
commit 604c77419a
9 changed files with 3647 additions and 3280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -3,4 +3,5 @@ node_modules
tmp/**/*
.idea
.idea/**/*
*.iml
*.iml
_site

6
_config.yml Normal file
View File

@ -0,0 +1,6 @@
exclude: build, node_modules, spec, src, CNAME, Jakefile.js, reference-tpl.html, CHANGELOG.md, README.md, LICENSE
markdown: kramdown
kramdown:
entity_output: as_input

164
_layouts/default.html Normal file
View File

@ -0,0 +1,164 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade</title>
<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." />
<meta property="og:image" content="http://leaflet.cloudmade.com/docs/images/logo.png" />
<meta itemprop="name" content="Leaflet">
<meta itemprop="description" content="Leaflet — a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.">
<meta itemprop="image" content="http://leaflet.cloudmade.com/docs/images/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{% endcapture %}
<link rel="icon" type="image/png" href="{{ root }}docs/images/favicon.png" />
<!-- Blueprint -->
<link rel="stylesheet" href="{{ root }}docs/css/blueprint/screen.css" media="screen, projection">
<link rel="stylesheet" href="{{ root }}docs/css/blueprint/print.css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="{{ root }}docs/css/screen.css" media="screen, projection" />
<script src="{{ root }}docs/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="{{ root }}docs/highlight/styles/github.css" />
<!-- Leaflet -->
<link rel="stylesheet" href="{{ root }}dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
<script src="{{ root }}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 class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
<li>
{% if page.title == nil %}
<span>Overview</span>
{% else %}
<a href="{{ root }}index.html">Overview</a>
{% endif %}
</li>
<li>
{% if page.title == 'Features' %}
<span>Features</span>
{% else %}
<a href="{{ root }}features.html">Features</a>
{% endif %}
</li>
<li>
{% if page.title == 'Tutorials' %}
<span>Tutorials</span>
{% else %}
<a href="{{ root }}examples.html">Tutorials</a>
{% endif %}
</li>
<li>
{% if page.title == 'Documentation' %}
<span>Documentation</span>
{% else %}
<a href="{{ root }}reference.html">Documentation</a>
{% endif %}
</li>
<li>
{% if page.title == 'Download' %}
<span>Tutorials</span>
{% else %}
<a href="{{ root }}download.html">Download</a>
{% endif %}
</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>
<div class="social-buttons">
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="113px" height="20px"></iframe>
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="96px" height="20px"></iframe>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade">Tweet</a>
<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&amp;layout=button_count&amp;show_faces=false&amp;width=430&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:87px; height:20px;" allowTransparency="true"></iframe>
<div class="g-plusone" data-size="medium" data-href="http://leaflet.cloudmade.com/"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
{{ content }}
<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>
</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 = ' ';
(function () {
var codes = document.getElementsByTagName('code');
for (var i = 0, len = codes.length; i < len; i++) {
if (!codes[i].className) {
if (codes[i].innerHTML.match(/^\s*&lt;/)) {
codes[i].className = 'xml';
} else {
codes[i].className = 'javascript';
}
}
}
})();
hljs.initHighlighting();
</script>
<script>
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>
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>

34
download.md Normal file
View File

@ -0,0 +1,34 @@
---
layout: default
title: Download
---
### Download Leaflet
Besides the library itself, the download package contains full source
code, unit tests, files for debugging and a build system. The production
files (included the same way as in the code above) are in the `dist`
folder.
[Download Leaflet 0.3.1 stable](https://github.com/CloudMade/Leaflet/zipball/v0.3.1) (February 14, 2012)
[Download Leaflet 0.4 master](http://github.com/CloudMade/Leaflet/zipball/master) (in-progress version)
[View Changelog](https://github.com/CloudMade/Leaflet/blob/master/CHANGELOG.md)
### Using a hosted version of Leaflet
The latest stable release of Leaflet is hosted on a CDN — to start using
it straight away, place this code in the `head` section of your HTML:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
### Building a custom version of Leaflet
Open `build/build.html` page from the download package, check the
components you want to see in your build and then follow the
instructions there.

63
examples.md Normal file
View File

@ -0,0 +1,63 @@
---
layout: default
title: Tutorials
---
### Leaflet tutorials
Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
***
[<img src="docs/images/quick-start.png" class="example-img bordered-img" />][1]
### [Leaflet Quick Start Guide][1]
A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with CloudMade tiles) on your page, working with markers, polylines and popups, and dealing with events.
***
[<img src="docs/images/mobile.png" class="example-img" />][2]
### [Leaflet on Mobile][2]
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.
***
[<img src="docs/images/custom-icons.png" class="example-img bordered-img" />][3]
### [Markers With Custom Icons][3]
In this pretty example, you'll learn how to easily define your own icons for use by the markers you put on the map.
***
[<img src="docs/images/geojson.png" class="example-img bordered-img" />][4]
### [Using GeoJSON with Leaflet][4]
In this example, you'll learn how to create and interact with map vectors created from [GeoJSON][5] objects.
***
[<img src="docs/images/layers-control.png" class="example-img bordered-img" />][6]
### [Layer Groups and Layers Control][6]
A tutorial on how to manage groups of layers and use the layer switching control.
***
### <a class="noimpl" href="#">Custom Controls</a>
A brief tutorial on implementing custom map controls.
***
### <a class="noimpl" href="#">Custom Overlays</a>
If markers, popups and vectors are not enough for you, here's a guide for creating your own map overlays (things to put on a map).
***
More examples coming soon!
[1]: examples/quick-start.html
[2]: examples/mobile.html
[3]: examples/custom-icons.html
[4]: examples/geojson.html
[5]: http://geojson.org/
[6]: examples/layers-control.html

237
examples/quick-start.md Normal file
View File

@ -0,0 +1,237 @@
---
layout: default
title: Quick Start Guide
root: ../
---
[&larr; Back to the list of examples](../examples.html)
### Leaflet Quick Start Guide
This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.
<div id="map" style="height: 180px; margin-bottom: 18px"></div>
[View example on a separate page &rarr;](quick-start-example.html)
### Preparing your page
Before writing any code for the map, you need to do the following preparation steps on your page:
* Include Leaflet CSS files in the head section of your document:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
* Include Leaflet JavaScript file somewhere on the page (preferably before <code>body</code> close tag):
<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
* Put a <code>div</code> element with a certain <code>id</code> where you want your map to be (making sure it has defined height):
<div id="map" style="height: 200px"></div>
Now you're ready to initialize the map and do some stuff with it.
### Setting up the map
<div id="map1" style="height: 180px; margin-bottom: 18px"></div>
Let's create a map instance, set its view to the center of London and add a pretty CloudMade tile layer to it. First we'll initialize the map:
var map = new L.Map('map');
By default (as we didn't pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.
Next we'll create a tile layer to add to our map, in this case it's a CloudMade tile layer with Fresh style. Creating a tile layer usually involves setting the URL template for the tile images (get yours at [CloudMade](http://cloudmade.com/register)), the attribution text and the maximum zoom level of the layer:
<pre><code class="javascript">var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/<span class="text-cut" data-cut="[your-API-key]">API-KEY</span>/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
});</code></pre>
It's worth noting that Leaflet is provider-agnostic, meaning that it doesn't enforce a particular choice of providers for tiles, and it doesn't even contain a single provider-specific line of code, so you're free to use other providers if you need to (we'd recommend CloudMade though, it looks beautiful).
Finally we'll set the map view to the center of London at 13th zoom level and add our tile layer (see the resulting map above):
var london = new L.LatLng(51.505, -0.09); // geographical point (longitude and latitude)
map.setView(london, 13).addLayer(cloudmade);
Make sure this code is below both the map <code>div</code> and <code>leaflet.js</code> inclusion, or in a <code>window.load</code> or <code>document.ready</code> event handler.
### Markers, circles and polygons
<div id="map2" style="height: 180px; margin-bottom: 18px"></div>
Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let's add a marker:
var markerLocation = new L.LatLng(51.5, -0.09);
var marker = new L.Marker(markerLocation);
map.addLayer(marker);
Adding a circle is the same (except for specifying the radius in meters), but lets configure it by passing options as a third argument when creating the object (the second argument is the radius in pixels):
var circleLocation = new L.LatLng(51.508, -0.11),
circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
};
var circle = new L.Circle(circleLocation, 500, circleOptions);
map.addLayer(circle);
Add a polygon is easy too:
L.polygon([[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(map);
### Working with popups
<div id="map3" style="height: 180px; margin-bottom: 18px"></div>
Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
Try clicking on our objects. The <code>bindPopup</code> method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the <code>openPopup</code> method (for markers only) immediately opens the attached popup.
You can also use popups as layers (when you need something more than attching a popup to an object):
var popup = new L.Popup();
popup.setLatLng(new L.LatLng(51.5, -0.09));
popup.setContent("I am a standalone popup.");
map.openPopup(popup);
Here we use <code>openPopup</code> instead of <code>addLayer</code> because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.
### Dealing with events
Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction:
map.on('click', onMapClick);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
Each object has its own set of events &mdash; see <a href="../reference.html">documentation</a> for details. The first argument of the listener function is an event object &mdash; it contains useful information about the event that happened. For example, map click event object (<code>e</code> in the example above) has <code>latlng</code> property which is a location at which the click occured.
Lets improve our example by using a popup instead of an alert and formatting the location string:
map.on('click', onMapClick);
var popup = new L.Popup();
function onMapClick(e) {
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
popup.setLatLng(e.latlng);
popup.setContent("You clicked the map at " + latlngStr);
map.openPopup(popup);
}
Try clicking on the map and you will see the coordinates in a popup. <a target="_blank" href="quick-start-example.html">View the full example &rarr;</a>
Now you've learned Leaflet basics and can start building map apps straight away! Don't forget to take a look at the detailed <a href="../reference.html">documentation</a> or <a href="../examples.html">other examples</a>.
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map');
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
var markerLocation = new L.LatLng(51.5, -0.09),
marker = new L.Marker(markerLocation);
map.addLayer(marker);
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
var circleLocation = new L.LatLng(51.508, -0.11),
circleOptions = {color: '#f03', opacity: 0.7},
circle = new L.Circle(circleLocation, 500, circleOptions);
circle.bindPopup("I am a circle.");
map.addLayer(circle);
var p1 = new L.LatLng(51.509, -0.08),
p2 = new L.LatLng(51.503, -0.06),
p3 = new L.LatLng(51.51, -0.047),
polygonPoints = [p1, p2, p3],
polygon = new L.Polygon(polygonPoints);
polygon.bindPopup("I am a polygon.");
map.addLayer(polygon);
map.on('click', onMapClick);
var popup = new L.Popup();
function onMapClick(e) {
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
popup.setLatLng(e.latlng);
popup.setContent("You clicked the map at " + latlngStr);
map.openPopup(popup);
}
</script>
<script>
var cloudmade1 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map1 = new L.Map('map1');
map1.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade1);
</script>
<script>
var cloudmade2 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map2 = new L.Map('map2');
map2.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade2);
var marker2 = new L.Marker(markerLocation);
map2.addLayer(marker2);
var circle2 = new L.Circle(circleLocation, 500, circleOptions);
map2.addLayer(circle2);
var polygon2 = new L.Polygon(polygonPoints);
map2.addLayer(polygon2);
</script>
<script>
var cloudmade3 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map3 = new L.Map('map3');
map3.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade3);
var marker3 = new L.Marker(markerLocation);
map3.addLayer(marker3);
marker3.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
var circle3 = new L.Circle(circleLocation, 500, circleOptions);
circle3.bindPopup("I am a circle.");
map3.addLayer(circle3);
var polygon3 = new L.Polygon(polygonPoints);
polygon3.bindPopup("I am a polygon.");
map3.addLayer(polygon3);
</script>

289
features.html
View File

@ -1,208 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Features</title>
---
layout: default
title: Features
---
<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." />
<h3>Leaflet features</h3>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It should still satisfy the needs of the vast majority of map apps developers while being easily extended by third-party plugins.</p>
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
<!-- 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]-->
<link rel="stylesheet" href="docs/css/screen.css" media="screen, projection" />
<script src="docs/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="docs/highlight/styles/github.css" />
<!-- 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><span>Features</span></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>
<div class="span-20" id="features">
<div class="span-6">
<h3>Available map layers</h3>
<ul>
<li>Tile layers</li>
<li>Vector layers: polylines, polygons, circles, rectangles, circle markers</li>
<li>Markers</li>
<li>Popups</li>
<li>Image overlays</li>
<li>WMS layers</li>
<li>GeoJSON</li>
</ul>
<div class="social-buttons">
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="113px" height="20px"></iframe>
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="96px" height="20px"></iframe>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade">Tweet</a>
<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&amp;layout=button_count&amp;show_faces=false&amp;width=430&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:87px; height:20px;" allowTransparency="true"></iframe>
<div class="g-plusone" data-size="medium" data-href="http://leaflet.cloudmade.com/"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<h3>Leaflet features</h3>
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It should still satisfy the needs of the vast majority of map apps developers while being easily extended by third-party plugins.</p>
<div class="span-20" id="features">
<div class="span-6">
<h3>Available map layers</h3>
<ul>
<li>Tile layers</li>
<li>Vector layers: polylines, polygons, circles, rectangles, circle&nbsp;markers</li>
<li>Markers</li>
<li>Popups</li>
<li>Image overlays</li>
<li>WMS layers</li>
<li>GeoJSON</li>
</ul>
<h3>Interaction features</h3>
<h4>On desktop browsers</h4>
<ul>
<li>Drag panning</li>
<li>Scroll wheel zoom</li>
<li>Double click zoom</li>
<li>Shift-drag zoom to bounding box</li>
</ul>
<h4>On mobile browsers (iOS, Android)</h4>
<ul>
<li>Touch-drag panning</li>
<li>Multi-touch zoom <nobr>(iOS and Android 4+)</nobr></li>
<li>Double tap zoom</li>
</ul>
<h4>Other features</h4>
<ul>
<li>Panning inertia</li>
<!--<li>Vector layers editing</li>-->
</ul>
</div>
<div class="span-9">
<h3>Visual features</h3>
<ul>
<li>Panning animation</li>
<li>Zooming animation on modern browsers <span class="quiet">(except IE)</span></li>
<li>Smooth continuous zoom on iOS</li>
<li>Tile and popup fade animation</li>
<li>Very nice default design for markers, popups and other map controls</li>
</ul>
<h3>Customization features</h3>
<ul>
<li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
<!-- <li>Customizable marker icons</li> -->
<li><span class="quiet">A simple interface for implementing</span> custom map layers</li>
<li><span class="quiet">The same for</span> custom map controls</li>
<li>Custom map projections <span class="quiet">(with <code>EPSG:4326</code>, <code>EPSG:3857</code> and <code>EPSG:3395</code> out of the box)</span></li>
</ul>
<h3>Performance features</h3>
<ul>
<li>Hardware acceleration on iOS <span class="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
<li><span class="quiet">Clever tricks to make</span> panning and zooming really smooth</li>
<li>Smart polyline/polygon rendering <span class="quiet">makes it responsive even when displaying objects with thousands of points</span></li>
<li>Modular design and a build system<span class="quiet"> allow you to reduce the size of the library by leaving out the code you don't need</span></li>
</ul>
</div>
<div class="span-5 last">
<h3>Map controls</h3>
<ul>
<li>Zoom buttons</li>
<li>Attribution</li>
<li>Layer switcher</li>
<li>Scale</li>
</ul>
<h3>Browser support</h3>
<h4>On desktop</h4>
<ul>
<li>Chrome<!--<span class="quiet">(smoothest experience)</span>--></li>
<li>Firefox</li>
<li>Safari 5+</li>
<li>Opera 11.11+</li>
<li>IE 7&ndash;9</li>
<li>IE 6 <span class="quiet">(not perfect but accessible)</span></li>
</ul>
<h4>On mobile</h4>
<ul>
<li>Safari for iOS 3/4/5+</li>
<li>Android browser 2.2+,&nbsp;3.1+,&nbsp;4+</li>
<li>Chrome for Android 4+ and iOS</li>
<li>Firefox for Android</li>
<li>Other webkit-based browsers (webOS, Blackberry 6+, etc.)</li>
<li class="noimpl">IE for Windows Phone 7</li>
</ul>
</div>
</div>
<p>If you find some feature really missing in Leaflet, please vote for it on the <a href="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>
<!--<p class="noimpl">* Grayed out features are in the roadmap and coming soon.</p>-->
<hr />
<p class="quiet">&copy; 2012 <a href="http://cloudmade.com">CloudMade</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>
<h3>Interaction features</h3>
<h4>On desktop browsers</h4>
<ul>
<li>Drag panning</li>
<li>Scroll wheel zoom</li>
<li>Double click zoom</li>
<li>Shift-drag zoom to bounding box</li>
</ul>
<h4>On mobile browsers (iOS, Android)</h4>
<ul>
<li>Touch-drag panning</li>
<li>Multi-touch zoom <nobr>(iOS and Android 4+)</nobr></li>
<li>Double tap zoom</li>
</ul>
<h4>Other features</h4>
<ul>
<li>Panning inertia</li>
<!--<li>Vector layers editing</li>-->
</ul>
</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>
<div class="span-9">
<h3>Visual features</h3>
<ul>
<li>Panning animation</li>
<li>Zooming animation on modern browsers <span class="quiet">(except IE)</span></li>
<li>Smooth continuous zoom on iOS</li>
<li>Tile and popup fade animation</li>
<li>Very nice default design for markers, popups and other map controls</li>
</ul>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
<h3>Customization features</h3>
<ul>
<li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
<!-- <li>Customizable marker icons</li> -->
<li><span class="quiet">A simple interface for implementing</span> custom map layers</li>
<li><span class="quiet">The same for</span> custom map controls</li>
<li>Custom map projections <span class="quiet">(with <code>EPSG:4326</code>, <code>EPSG:3857</code> and <code>EPSG:3395</code> out of the box)</span></li>
</ul>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
_gaq.push([ '_trackPageview' ]);
<h3>Performance features</h3>
<ul>
<li>Hardware acceleration on iOS <span class="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
<li><span class="quiet">Clever tricks to make</span> panning and zooming really smooth</li>
<li>Smart polyline/polygon rendering <span class="quiet">makes it responsive even when displaying objects with thousands of points</span></li>
<li>Modular design and a build system<span class="quiet"> allow you to reduce the size of the library by leaving out the code you don't need</span></li>
</ul>
</div>
(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>
<div class="span-5 last">
<h3>Map controls</h3>
<ul>
<li>Zoom buttons</li>
<li>Attribution</li>
<li>Layer switcher</li>
<li>Scale</li>
</ul>
<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>
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
<h3>Browser support</h3>
<h4>On desktop</h4>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari 5+</li>
<li>Opera 11.11+</li>
<li>IE 7&ndash;9</li>
<li>IE 6 <span class="quiet">(not perfect but accessible)</span></li>
</ul>
<h4>On mobile</h4>
<ul>
<li>Safari for iOS 3/4/5+</li>
<li>Android browser 2.2+,&nbsp;3.1+,&nbsp;4+</li>
<li>Chrome for Android 4+ and iOS</li>
<li>Firefox for Android</li>
<li>Other webkit-based browsers (webOS, Blackberry 6+, etc.)</li>
<li class="noimpl">IE for Windows Phone 7</li>
</ul>
</div>
</div>
<p>If you find some feature really missing in Leaflet, please vote for it on the <a href="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>

68
index.md Normal file
View File

@ -0,0 +1,68 @@
---
layout: default
---
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by [Vladimir Agafonkin][] of [CloudMade][] with a team of dedicated [contributors][]. Weighing just about <abbr title="That's 97 KB minified and 166 KB in the source form, with 8 KB of CSS (1.8 KB gzipped) and 11 KB of images">25 KB of gzipped JS code</abbr>, it still has all the [features][] most developers ever need for online maps, while providing a smooth, pleasant user experience.
It is built from the ground up to work efficiently on both desktop and mobile platforms like iOS and Android, taking advantage of HTML5 and CSS3 on modern browsers. The focus is on usability, performance, small size, [A-grade][] browser support and [a simple API][] with <abbr title="Simplicity and reasonable defaults so that the API doesn't get in your way, while not losing flexibility">convention over configuration</abbr>. The OOP-based [code of the library][] is designed to be modular, extensible and very easy to understand.
### Basic usage example
<div id="map"></div>
Here we create a map with <abbr title="Here we use the beautiful CloudMade tiles which require an API key (get one for free!), but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:
<!--- manually colored to support raw HTML inside the code -->
<pre><code class="javascript"><span class="comment">// create a map in the "map" div, set the view to a given place and zoom</span>
<span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">51.505</span>, -<span class="number">0.09</span>], <span class="number">13</span>);
<span class="comment">// add a CloudMade tile layer with style #997</span>
L.tileLayer(<span class="string">'http://{s}.tile.cloudmade.com/<a href="http://cloudmade.com/register">[API-key]</a>/997/256/{z}/{x}/{y}.png'</span>, {
attribution: <span class="string">'Map data <span class="text-cut" data-cut="[&hellip;]">&amp;copy; &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 © &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>'</span>
}).addTo(map);
<span class="comment">// add a marker in the given location, attach some popup content to it and open the popup</span>
L.marker([<span class="number">51.5</span>, -<span class="number">0.09</span>]).addTo(map)
.bindPopup(<span class="string">'A pretty CSS3 popup. &lt;br&gt; Easily customizable.'</span>).openPopup();</code></pre>
Check out the [examples](examples.html) section for more examples, or head straight to the [documentation](reference.html).
### Contributing to Leaflet
The project is [hosted on GitHub][], waiting for your contributions --- just send your pull requests to [@mourner][] (Vladimir Agafonkin, Leaflet author and maintainer). Let’s make the best library for maps that can possibly exist!
You can also help the project a lot by reporting bugs on the [GitHub issues page][], showing your support for your favorite feature suggestions on [Leaflet UserVoice page][], tweeting to [@LeafletJS][] or joining the [Leaflet mailing list][].
[Vladimir Agafonkin]: http://agafonkin.com/en
[CloudMade]: http://cloudmade.com
[contributors]: https://github.com/CloudMade/Leaflet/graphs/contributors
[features]: features.html
[A-grade]: http://developer.yahoo.com/yui/articles/gbs/
[a simple API]: reference.html "Leaflet API reference"
[code of the library]: https://github.com/CloudMade/Leaflet
"Leaflet GitHub repository"
[hosted on GitHub]: http://github.com/CloudMade/Leaflet
[@mourner]: http://github.com/mourner
[GitHub issues page]: http://github.com/CloudMade/Leaflet/issues
[Leaflet UserVoice page]: http://leaflet.uservoice.com
[@LeafletJS]: http://twitter.com/LeafletJS
[Leaflet mailing list]: https://groups.google.com/group/leaflet-js
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map');
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);
marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
</script>

6063
reference.html
View File

File diff suppressed because it is too large Load Diff