165 lines
11 KiB
HTML
165 lines
11 KiB
HTML
<!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">
|
|
|
|
<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 class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
|
|
<li><span>Overview</span></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>
|
|
|
|
|
|
<div class="social-buttons">
|
|
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&repo=Leaflet&type=watch&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&repo=Leaflet&type=fork&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&layout=button_count&show_faces=false&width=430&action=like&font=arial&colorscheme=light&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>About the library</h3> -->
|
|
<p>Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by <a href="http://agafonkin.com/en">Vladimir Agafonkin</a> of <a href="http://cloudmade.com">CloudMade</a> with a team of dedicated <a href="https://github.com/CloudMade/Leaflet/graphs/contributors">contributors</a>. 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 <a href="features.html">features</a> most developers ever need for online maps, while providing a smooth, pleasant user experience.</p>
|
|
<p>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 href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support and <a href="reference.html" title="Leaflet API reference">a simple API</a> 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 <a href="https://github.com/CloudMade/Leaflet" title="Leaflet GitHub repository">code of the library</a> is designed to be modular, extensible and very easy to understand.</p>
|
|
|
|
<h3>Basic usage example</h3>
|
|
<div id="map"></div>
|
|
<script>
|
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
|
cloudmadeAttribution = 'Map data © <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>',
|
|
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>
|
|
|
|
<p>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 — 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:</p>
|
|
|
|
<!--<pre><code><div id="map"></div></code></pre>-->
|
|
|
|
<pre><code class="javascript">// create a map in the "map" div, set the view to a given place and zoom
|
|
var map = L.map('map').setView([51.505, -0.09], 13);
|
|
|
|
// add a CloudMade tile layer with style #997
|
|
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 <span class="text-cut" data-cut="[…]">&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></span>'
|
|
}).addTo(map);
|
|
|
|
// add a marker in the given location, attach some popup content to it and open the popup
|
|
L.marker([51.5, -0.09]).addTo(map)
|
|
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.').openPopup();</code></pre>
|
|
|
|
<!--<p>Note that Leaflet uses a hybrid OOP/chaining approach to API, so the following lines are equivalent:</p>
|
|
|
|
<pre><code>// jQuery-like
|
|
L.map('map').setView([50, 30], 13);
|
|
|
|
// old-school OOP
|
|
var map = new L.Map('map');
|
|
map.setView(new L.LatLng(50, 30), 13);</code></pre>-->
|
|
|
|
<p>Check out the <a href="examples.html">examples</a> section for more examples, or head straight to the <a href="reference.html">documentation</a>.</p>
|
|
|
|
<h3>Contributing to Leaflet</h3>
|
|
<p>The project is <a href="http://github.com/CloudMade/Leaflet">hosted on GitHub</a>, waiting for your contributions — just send your pull requests to <a href="http://github.com/mourner">Vladimir Agafonkin</a> (Leaflet maintainer). Let's make the best library for maps that can possibly exist! </p>
|
|
<p>You can also help the project a lot by reporting bugs on the <a href="http://github.com/CloudMade/Leaflet/issues">GitHub issues page</a>, showing your support for your favorite feature suggestions on <a href="http://leaflet.uservoice.com">Leaflet UserVoice page</a>, tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a> or joining the <a href="https://groups.google.com/group/leaflet-js">Leaflet mailing list</a>.
|
|
|
|
<hr />
|
|
<p class="quiet">© 2012 <a href="http://cloudmade.com">CloudMade</a>. Map data © 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 = ' ';
|
|
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>
|
|
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
|