merge gh-pages
This commit is contained in:
Vladimir Agafonkin
commit
664491d4be
@ -8,7 +8,7 @@
|
||||
<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:description" content="Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps." />
|
||||
<meta property="og:image" content="http://leafletjs.com/docs/images/logo.png" />
|
||||
|
||||
<meta itemprop="name" content="Leaflet">
|
||||
@ -46,19 +46,22 @@
|
||||
'Imagery © <a href="http://cloudmade.com">CloudMade</a>';
|
||||
|
||||
CM_URL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
|
||||
|
||||
OSM_URL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
OSM_ATTRIB = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
|
||||
</script>
|
||||
</head>
|
||||
<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
|
||||
<div class="container">
|
||||
<h1><a href="http://leafletjs.com">Leaflet</a></h1>
|
||||
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps<!-- by <a href="http://cloudmade.com">CloudMade</a>--></h3>
|
||||
|
||||
<div class="social-buttons">
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=CloudMade&repo=Leaflet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=Leaflet&repo=Leaflet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
|
||||
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=CloudMade&repo=Leaflet&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
|
||||
<!--<iframe src="http://ghbtns.com/github-btn.html?user=Leaflet&repo=Leaflet&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>-->
|
||||
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leafletjs.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade" data-count="none">Tweet</a>
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leafletjs.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps" data-via="LeafletJS" data-related="CloudMade" data-count="none">Tweet</a>
|
||||
|
||||
<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
|
||||
|
||||
@ -130,18 +133,18 @@
|
||||
</li>
|
||||
<li><a class="forum-link" href="https://groups.google.com/forum/#!forum/leaflet-js">Forum</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>
|
||||
<li><a class="github-link" href="http://github.com/Leaflet/Leaflet">GitHub</a></li>
|
||||
</ul>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<div class="footer">
|
||||
<hr />
|
||||
<p class="quiet">© 2011–2012 <a href="http://cloudmade.com">CloudMade</a>, <a href="http://agafonkin.com/en">Vladimir Agafonkin</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>
|
||||
<p class="quiet">© 2010–2013 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010–2011 <a href="http://cloudmade.com">CloudMade</a>. Maps © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
|
||||
</div>
|
||||
</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>
|
||||
<a href="http://github.com/Leaflet/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 = ' ';
|
||||
|
||||
@ -6,7 +6,7 @@ author: Vladimir Agafonkin
|
||||
authorsite: http://agafonkin.com/en
|
||||
---
|
||||
|
||||
After 5.5 months of development with [33 contributors](https://github.com/CloudMade/Leaflet/graphs/contributors?from=2012-02-15&to=2012-07-30&type=c) involved since the previous stable release, I'm proud to announce the release of Leaflet 0.4! It comes with a simpler API and *lots* of great improvements and important bugfixes, along with a major update to documentation, an official plugins page and the launch of this developer blog. Lets take a look at the improvements one by one.
|
||||
After 5.5 months of development with [33 contributors](https://github.com/Leaflet/Leaflet/graphs/contributors?from=2012-02-15&to=2012-07-30&type=c) involved since the previous stable release, I'm proud to announce the release of Leaflet 0.4! It comes with a simpler API and *lots* of great improvements and important bugfixes, along with a major update to documentation, an official plugins page and the launch of this developer blog. Lets take a look at the improvements one by one.
|
||||
|
||||
### Simpler API
|
||||
|
||||
@ -116,7 +116,7 @@ Moreover, now if you only specify an event type to the `off` method, it will rem
|
||||
|
||||
#### Other API Improvements
|
||||
|
||||
Leaflet 0.4 features more than 30 new methods, options and events across different Leaflet classes that make the API more complete and powerful. Check out the [full changelog](https://github.com/CloudMade/Leaflet/blob/master/CHANGELOG.md#other-api-improvements) for the complete list.
|
||||
Leaflet 0.4 features more than 30 new methods, options and events across different Leaflet classes that make the API more complete and powerful. Check out the [full changelog](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#other-api-improvements) for the complete list.
|
||||
|
||||
### Performance and Usability Improvements
|
||||
|
||||
@ -137,11 +137,11 @@ In addition, there are several usability improvents not already mentioned:
|
||||
|
||||
Leaflet 0.4 brings around 45 bugfixes that make it more stable and reliable across all browsers and platforms. Notable bugfixes include the dreaded iOS bug that caused the map to completely disappear after pinch-zooming in some rare cases, broken zooming on IE10 beta, broken Leaflet maps on pages served with an XHTML content type, and incorrect zooming on maps inside a fixed-position element.
|
||||
|
||||
Here's [a full list of bugfixes](https://github.com/CloudMade/Leaflet/blob/master/CHANGELOG.md#bug-fixes) in the changelog.
|
||||
Here's [a full list of bugfixes](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#bug-fixes) in the changelog.
|
||||
|
||||
### Upgrading from older versions
|
||||
|
||||
Besides the GeoJSON and Icon changes mentioned above, here's a [list of potentially breaking changes](https://github.com/CloudMade/Leaflet/blob/master/CHANGELOG.md#other-breaking-api-changes) --- read it carefully when updating your code (shouldn't take much time though).
|
||||
Besides the GeoJSON and Icon changes mentioned above, here's a [list of potentially breaking changes](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#other-breaking-api-changes) --- read it carefully when updating your code (shouldn't take much time though).
|
||||
|
||||
Download options for Leaflet 0.4 (including the actual download, the CDN-hosted version, and intructions for building manually) are listed on the [download page](../../../download.html).
|
||||
|
||||
|
||||
@ -22,26 +22,26 @@ Grab the new Leaflet 0.4.3 at the [download page](../../../download.html). Enjoy
|
||||
* Added `GeoJSON` `resetStyle(layer)`, useful for resetting hover state.
|
||||
* Added `feature` property to layers created with `GeoJSON` (containing the GeoJSON feature data).
|
||||
* Added `FeatureGroup` `bringToFront` and `bringToBack` methods (so that they would work for multipolys).
|
||||
* Added optional `animate` argument to `Map` `invalidateSize` (by [@ajbeaven](https://github.com/ajbeaven)). [#857](https://github.com/CloudMade/Leaflet/pull/857)
|
||||
* Added optional `animate` argument to `Map` `invalidateSize` (by [@ajbeaven](https://github.com/ajbeaven)). [#857](https://github.com/Leaflet/Leaflet/pull/857)
|
||||
|
||||
#### Bugfixes
|
||||
|
||||
* Fixed a bug where tiles sometimes disappeared on initial map load on Android 2/3 (by [@danzel](https://github.com/danzel)). [#868](https://github.com/CloudMade/Leaflet/pull/868)
|
||||
* Fixed a bug where tiles sometimes disappeared on initial map load on Android 2/3 (by [@danzel](https://github.com/danzel)). [#868](https://github.com/Leaflet/Leaflet/pull/868)
|
||||
* Fixed a bug where map would occasionally flicker near the border on zoom or pan on Chrome.
|
||||
* Fixed a bug where `Path` `bringToFront` and `bringToBack` didn't return `this`.
|
||||
* Removed zoom out on Win/Meta key binding (since it interferes with global keyboard shortcuts). [#869](https://github.com/CloudMade/Leaflet/issues/869)
|
||||
* Removed zoom out on Win/Meta key binding (since it interferes with global keyboard shortcuts). [#869](https://github.com/Leaflet/Leaflet/issues/869)
|
||||
|
||||
### 0.4.2 (August 1, 2012)
|
||||
|
||||
* Fixed a bug where layers control radio buttons would not work correctly in IE7 (by [@danzel](https://github.com/danzel)). [#862](https://github.com/CloudMade/Leaflet/pull/862)
|
||||
* Fixed a bug where `FeatureGroup` `removeLayer` would unbind popups of removed layers even if the popups were not put by the group (affected [Leaflet.markercluster](https://github.com/danzel/Leaflet.markercluster) plugin) (by [@danzel](https://github.com/danzel)). [#861](https://github.com/CloudMade/Leaflet/pull/861)
|
||||
* Fixed a bug where layers control radio buttons would not work correctly in IE7 (by [@danzel](https://github.com/danzel)). [#862](https://github.com/Leaflet/Leaflet/pull/862)
|
||||
* Fixed a bug where `FeatureGroup` `removeLayer` would unbind popups of removed layers even if the popups were not put by the group (affected [Leaflet.markercluster](https://github.com/danzel/Leaflet.markercluster) plugin) (by [@danzel](https://github.com/danzel)). [#861](https://github.com/Leaflet/Leaflet/pull/861)
|
||||
|
||||
### 0.4.1 (July 31, 2012)
|
||||
|
||||
* Fixed a bug that caused marker shadows appear as opaque black in IE6-8. [#850](https://github.com/CloudMade/Leaflet/issues/850)
|
||||
* Fixed a bug with incorrect calculation of scale by the scale control. [#852](https://github.com/CloudMade/Leaflet/issues/852)
|
||||
* Fixed broken L.tileLayer.wms class factory (by [@mattcurrie](https://github.com/mattcurrie)). [#856](https://github.com/CloudMade/Leaflet/issues/856)
|
||||
* Improved retina detection for `TileLayer` `detectRetina` option (by [@sxua](https://github.com/sxua)). [#854](https://github.com/CloudMade/Leaflet/issues/854)
|
||||
* Fixed a bug that caused marker shadows appear as opaque black in IE6-8. [#850](https://github.com/Leaflet/Leaflet/issues/850)
|
||||
* Fixed a bug with incorrect calculation of scale by the scale control. [#852](https://github.com/Leaflet/Leaflet/issues/852)
|
||||
* Fixed broken L.tileLayer.wms class factory (by [@mattcurrie](https://github.com/mattcurrie)). [#856](https://github.com/Leaflet/Leaflet/issues/856)
|
||||
* Improved retina detection for `TileLayer` `detectRetina` option (by [@sxua](https://github.com/sxua)). [#854](https://github.com/Leaflet/Leaflet/issues/854)
|
||||
|
||||
Sincerely, <br />
|
||||
Vladimir Agafonkin, Leaflet maintainer.
|
||||
|
||||
@ -16,7 +16,7 @@ Everyone is encouraged to upgrade (before Chrome 23 turns stable). As always, yo
|
||||
|
||||
As Leaflet approaches feature-complete state and API stabilization, we naturally shift our focus from new features towards performance and usability improvements, better browser and device support, bugfixes and internal refactoring to make certain parts of Leaflet (like projections and vector rendering) easier to extend and customize for plugin developers and advanced users.
|
||||
|
||||
Highlights of things already implemented in the `master` branch include touch interaction support for **IE10 touch devices and Metro apps** and a more smooth and responsive panning inertia. Follow the [full changelog](https://github.com/CloudMade/Leaflet/blob/master/CHANGELOG.md) for more details.
|
||||
Highlights of things already implemented in the `master` branch include touch interaction support for **IE10 touch devices and Metro apps** and a more smooth and responsive panning inertia. Follow the [full changelog](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md) for more details.
|
||||
|
||||
We're also in the process of a major refactoring of vector rendering code to allow much simpler extension of base functionality with custom shapes, additional rendering systems (like WebGL in addition to existing SVG/VML and Canvas renderers), easy switching between renderers, also making the code simpler and easier to understand.
|
||||
|
||||
@ -28,7 +28,7 @@ The current plan is to release 0.5 stable sometime in mid-November. Stay tuned!
|
||||
|
||||
### Contributing to Leaflet
|
||||
|
||||
Leaflet is a true open source project, so we're always happy to meet new contributors, accept patches and bugreports. To help others become involved with Leaflet development and make managing contributions easier, I've put up a [Contributing to Leaflet](https://github.com/CloudMade/Leaflet/blob/master/CONTRIBUTING.md) guide with best practices and advices — check it out!
|
||||
Leaflet is a true open source project, so we're always happy to meet new contributors, accept patches and bugreports. To help others become involved with Leaflet development and make managing contributions easier, I've put up a [Contributing to Leaflet](https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md) guide with best practices and advices — check it out!
|
||||
|
||||
Thanks to everyone! Leaflet has got quite an amazing community which makes me really proud. Keep it up!
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
body {
|
||||
background: #f0f0f0;
|
||||
background: #f0f0f0 url(../images/paper.png);
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -16,7 +16,7 @@ body {
|
||||
box-shadow: 0 0 60px rgba(0,0,0,0.15);
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1 a {
|
||||
display: block;
|
||||
@ -99,6 +99,7 @@ h3.alt {
|
||||
font-family: Georgia, serif;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
.container code, .container pre code {
|
||||
@ -402,7 +403,7 @@ table.factory-table td, table.factory-table th {
|
||||
}
|
||||
|
||||
.social-buttons {
|
||||
margin: 18px 0;
|
||||
margin: 18px 0 0;
|
||||
padding: 6px 0 2px 8px;
|
||||
background: #f3f3f3;
|
||||
position: absolute;
|
||||
|
||||
BIN
docs/images/paper.png
Normal file
BIN
docs/images/paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
@ -13,20 +13,20 @@ Besides the library itself, the download package contains full source code, unit
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="width100"><a href="https://github.com/CloudMade/Leaflet/zipball/v0.4.5">Leaflet 0.4.5</a></td>
|
||||
<td class="width100"><a href="https://github.com/Leaflet/Leaflet/zipball/v0.4.5">Leaflet 0.4.5</a></td>
|
||||
<td>Stable version, released on October 25, 2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="width100"><a href="https://github.com/CloudMade/Leaflet/zipball/v0.3.1">Leaflet 0.3.1</a></td>
|
||||
<td class="width100"><a href="https://github.com/Leaflet/Leaflet/zipball/v0.3.1">Leaflet 0.3.1</a></td>
|
||||
<td>Previous stable version, released on February 14, 2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://github.com/CloudMade/Leaflet/zipball/master">Leaflet master</a></td>
|
||||
<td><a href="http://github.com/Leaflet/Leaflet/zipball/master">Leaflet master</a></td>
|
||||
<td>In-progress version, developed on the <code>master</code> branch</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
[View Changelog](https://github.com/CloudMade/Leaflet/blob/master/CHANGELOG.md)
|
||||
[View Changelog](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md)
|
||||
|
||||
Note that the master version can contain incompatible changes, so please read the changelog carefully when upgrading to it.
|
||||
|
||||
|
||||
@ -50,16 +50,16 @@ Now putting a marker with this icon on a map is easy:
|
||||
|
||||
What if we need to create several icons that have lots in common? Lets define our own icon class containing the shared options, inheriting from `L.Icon`! It's really easy in Leaflet:
|
||||
|
||||
var LeafIcon = L.Icon.extend({
|
||||
options: {
|
||||
shadowUrl: 'leaf-shadow.png',
|
||||
iconSize: [38, 95],
|
||||
shadowSize: [50, 64],
|
||||
iconAnchor: [22, 94],
|
||||
shadowAnchor: [4, 62],
|
||||
popupAnchor: [-3, -76]
|
||||
}
|
||||
});
|
||||
var LeafIcon = L.Icon.extend({
|
||||
options: {
|
||||
shadowUrl: 'leaf-shadow.png',
|
||||
iconSize: [38, 95],
|
||||
shadowSize: [50, 64],
|
||||
iconAnchor: [22, 94],
|
||||
shadowAnchor: [4, 62],
|
||||
popupAnchor: [-3, -76]
|
||||
}
|
||||
});
|
||||
|
||||
Now we can create all three of our leaf icons from this class and use them:
|
||||
|
||||
|
||||
95
index.md
95
index.md
@ -2,71 +2,96 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<p class="notice">October 25, 2012 — Leaflet 0.4.5 bugfix release and plans for 0.5 — <a href="2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5.html">Read More in the Blog</a></p>
|
||||
<!--<p class="notice">October 25, 2012 — Leaflet 0.4.5 bugfix release and plans for 0.5 — <a href="2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5.html">Read More in the Blog</a></p>-->
|
||||
|
||||
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 102 KB minified and 176 KB in the source form, with 8 KB of CSS (1.8 KB gzipped) and 10 KB of images">27 KB of gzipped JS code</abbr>, it has all the [features][] most developers ever need for online maps.
|
||||
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps.
|
||||
It is developed by [Vladimir Agafonkin][] with a team of dedicated [contributors][].
|
||||
Weighing just about <abbr title="27KB gzipped — that's 102 KB minified and 176 KB in the source form, with 8 KB of CSS (1.8 KB gzipped) and 10 KB of images.">27 KB of JS code</abbr>,
|
||||
it has all the [features][] most developers ever need for online maps.
|
||||
|
||||
Leaflet is designed with _simplicity_, _performance_ and _usability_ in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can also be extended with many [plugins][], has a beautiful, easy to use and [well-documented][] API and a simple, readable [source code][] that is a joy to [contribute][] to.
|
||||
Leaflet is designed with _simplicity_, _performance_ and _usability_ in mind.
|
||||
It works efficiently across all major desktop and mobile platforms out of the box,
|
||||
taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.
|
||||
It can be extended with many [plugins][], has a beautiful, easy to use and [well-documented API][]
|
||||
and a simple, readable [source code][] that is a joy to [contribute][] to.
|
||||
|
||||
{: .usedby}
|
||||
Used by: [Flickr](http://flickr.com/map) [foursquare](https://foursquare.com/) [craigslist](http://t.co/V4EiURIA) [IGN](http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim) [Wikimedia](http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/) [Meetup](http://www.meetup.com/) [WSJ](http://projects.wsj.com/campaign2012/maps/) [Geocaching](http://geocaching.com) [StreetEasy](http://streeteasy.com/) [Nestoria](http://www.nestoria.co.uk) [Topix](http://topix.com/) [Chartbeat](http://chartbeat.com/) [GIS Cloud](http://www.giscloud.com/) ...
|
||||
Used by:
|
||||
[Flickr](http://flickr.com/map)
|
||||
[foursquare](https://foursquare.com/)
|
||||
[craigslist](http://t.co/V4EiURIA)
|
||||
[IGN](http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim)
|
||||
[Wikimedia](http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/)
|
||||
[OSM](http://openstreetmap.org)
|
||||
[Meetup](http://www.meetup.com/)
|
||||
[WSJ](http://projects.wsj.com/campaign2012/maps/)
|
||||
[Geocaching](http://geocaching.com)
|
||||
[StreetEasy](http://streeteasy.com/)
|
||||
[Nestoria](http://www.nestoria.co.uk)
|
||||
[Chartbeat](http://chartbeat.com/)
|
||||
[GIS Cloud](http://www.giscloud.com/)
|
||||
...
|
||||
|
||||
<div id="map" class="map" style="height: 300px"></div>
|
||||
|
||||
In this basic example, 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:
|
||||
In this basic example, we create a map with <abbr title="Here we use OpenStreetMap tiles, 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:
|
||||
|
||||
// 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);
|
||||
|
||||
<!--- 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="[…]">&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>'</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. <br> Easily customizable.'</span>).openPopup();</code></pre>
|
||||
// add an OpenStreetMap tile layer
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).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();
|
||||
|
||||
Learn more with the [quick start guide](examples/quick-start.html), check out [other tutorials](examples.html), or head straight to the [API documentation](reference.html).
|
||||
|
||||
|
||||
## Getting Involved
|
||||
|
||||
Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist. However, they're not the only way to get involved with the development of Leaflet. You can help the project tremendously by discovering and [reporting bugs][], [improving documentation][], helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js) and [GitHub issues](https://github.com/CloudMade/Leaflet/issues), showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com), tweeting to [@LeafletJS](http://twitter.com/LeafletJS) and spreading the word about Leaflet among your colleagues and friends.
|
||||
Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist.
|
||||
However, they're not the only way to get involved with the development of Leaflet.
|
||||
You can help the project tremendously by discovering and [reporting bugs][], [improving documentation][],
|
||||
helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js)
|
||||
and [GitHub issues](https://github.com/Leaflet/Leaflet/issues),
|
||||
showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com),
|
||||
tweeting to [@LeafletJS](http://twitter.com/LeafletJS)
|
||||
and spreading the word about Leaflet among your colleagues and friends.
|
||||
|
||||
Check out the [contribution guide][contribute] for more information on getting involved with Leaflet development.
|
||||
|
||||
[Vladimir Agafonkin]: http://agafonkin.com/en
|
||||
[CloudMade]: http://cloudmade.com
|
||||
[contributors]: https://github.com/CloudMade/Leaflet/graphs/contributors
|
||||
[contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
|
||||
[features]: features.html
|
||||
[plugins]: plugins.html
|
||||
[well-documented]: reference.html "Leaflet API reference"
|
||||
[source code]: https://github.com/CloudMade/Leaflet "Leaflet GitHub repository"
|
||||
[hosted on GitHub]: http://github.com/CloudMade/Leaflet
|
||||
[contribute]: https://github.com/CloudMade/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
|
||||
[reporting bugs]: https://github.com/CloudMade/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs
|
||||
[improving documentation]: https://github.com/CloudMade/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation
|
||||
[well-documented API]: reference.html "Leaflet API reference"
|
||||
[source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
|
||||
[hosted on GitHub]: http://github.com/Leaflet/Leaflet
|
||||
[contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
|
||||
[reporting bugs]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs
|
||||
[improving documentation]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation
|
||||
[@mourner]: http://github.com/mourner
|
||||
[GitHub issues page]: http://github.com/CloudMade/Leaflet/issues
|
||||
[GitHub issues page]: http://github.com/Leaflet/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 © <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 osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
||||
|
||||
var map = new L.Map('map');
|
||||
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
|
||||
var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
|
||||
|
||||
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();
|
||||
L.marker([51.504, -0.159])
|
||||
.addTo(map)
|
||||
.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
|
||||
.openPopup();
|
||||
</script>
|
||||
|
||||
125
plugins.md
125
plugins.md
@ -19,7 +19,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a>
|
||||
<a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet.markercluster</a>
|
||||
</td><td>
|
||||
Beautiful, sophisticated, high performance marker clustering solution with smooth animations and lots of great features. <em>Recommended!</em>
|
||||
</td><td>
|
||||
@ -53,7 +53,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="http://mackerron.com">George MacKerron</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/aparshin/leaflet-boundary-canvas">TileLayer.BoundaryCanvas</a>
|
||||
</td><td>
|
||||
@ -62,13 +62,24 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="https://github.com/aparshin">Alexander Parshin</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/domoritz/leaflet-maskcanvas">MaskCanvas</a>
|
||||
</td><td>
|
||||
Canvas layer that can be used to visualize coverage.
|
||||
</td><td>
|
||||
<a href="https://github.com/domoritz">Dominik Moritz</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/sunng87/heatcanvas">HeatCanvas</a>
|
||||
</td><td>
|
||||
Simple heatmap api based on HTML5 canvas.
|
||||
</td><td>
|
||||
<a href="https://github.com/sunng87">Sun Ning</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="http://moonlite.github.com/Leaflet.MultiTileLayer/">Leaflet.MultiTileLayer</a>
|
||||
@ -78,6 +89,51 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="https://github.com/moonlite">Mattias Bengtsson</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/openplans/Leaflet.AnimatedMarker">Leaflet.AnimatedMarker</a>
|
||||
</td><td>
|
||||
Animate a marker along a polyline.
|
||||
</td><td>
|
||||
<a href="https://github.com/atogle">Aaron Ogle</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/jieter/Leaflet-semicircle">Leaflet-semicircle</a>
|
||||
</td><td>
|
||||
Adds functionality to <code>L.Circle</code> to draw semicircles.
|
||||
</td><td>
|
||||
<a href="https://github.com/jieter">Jieter</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/ismyrnow/Leaflet.functionaltilelayer">Leaflet.FunctionalTileLayer</a>
|
||||
</td><td>
|
||||
Allows you to define tile layer URLs using a function, with support for jQuery deferreds.
|
||||
</td><td>
|
||||
<a href="https://github.com/ismyrnow">Ishmael Smyrnow</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/joker-x/Leaflet.geoCSV">Leaflet.geoCSV</a>
|
||||
</td><td>
|
||||
Leaflet plugin for loading a CSV file as geoJSON layer.
|
||||
</td><td>
|
||||
<a href="https://github.com/joker-x">Iván Eixarch</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/bbecquet/Leaflet.PolylineDecorator">Leaflet.PolylineDecorator</a>
|
||||
</td><td>
|
||||
Allows you to draw patterns (like dashes, arrows or evenly spaced Markers) along Polylines or coordinate paths.
|
||||
</td><td>
|
||||
<a href="https://github.com/bbecquet">Benjamin Becquet</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -170,6 +226,24 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="https://github.com/jieter">Jieter</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/calvinmetcalf/leaflet.pouch">Leaflet.Pouch</a>
|
||||
</td><td>
|
||||
Use PouchDB to sync CouchDB data to local storage (indexedDB), to just add couchDB data or as just a less confusing implementation of indexedDB.
|
||||
</td><td>
|
||||
<a href="https://github.com/calvinmetcalf/">Calvin Metcalf</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/calvinmetcalf/leaflet-ajax">Leaflet Ajax</a>
|
||||
</td><td>
|
||||
Add GeoJSON data via ajax or jsonp.
|
||||
</td><td>
|
||||
<a href="https://github.com/calvinmetcalf/">Calvin Metcalf</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -183,13 +257,22 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a>
|
||||
<a href="https://github.com/Leaflet/Leaflet.draw">Leaflet.draw</a>
|
||||
</td><td>
|
||||
Enables drawing features like polylines, polygons, rectangles, circles and markers through a very nice user-friendly interface with icons and hints. <em>Recommended!</em>
|
||||
</td><td>
|
||||
<a href="https://github.com/jacobtoye">Jacob Toye</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/danzel/Leaflet.utfgrid">Leaflet.utfgrid</a>
|
||||
</td><td>
|
||||
Provides a utfgrid interaction handler for leaflet a very small footprint.
|
||||
</td><td>
|
||||
<a href="https://github.com/danzel">Dave Leaver</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/kartena/Leaflet.EditableHandlers">Leaflet.EditableHandlers</a>
|
||||
@ -201,7 +284,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/kartena/Leaflet.Pancontrol">Leaflet.Pancontrol</a>
|
||||
<a href="http://kartena.github.com/Leaflet.Pancontrol/">Leaflet.Pancontrol</a>
|
||||
</td><td>
|
||||
A simple panning control.
|
||||
</td><td>
|
||||
@ -210,13 +293,22 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/kartena/Leaflet.zoomslider">Leaflet.zoomslider</a>
|
||||
<a href="http://kartena.github.com/Leaflet.zoomslider/">Leaflet.zoomslider</a>
|
||||
</td><td>
|
||||
A zoom slider control.
|
||||
</td><td>
|
||||
<a href="http://www.kartena.se/">Kartena</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/domoritz/leaflet-locatecontrol">Leaflet.Locate</a>
|
||||
</td><td>
|
||||
A customizable locate control.
|
||||
</td><td>
|
||||
<a href="https://github.com/domoritz">Dominik Moritz</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="http://elidupuis.github.com/leaflet.zoomfs">leaflet.zoomfs</a>
|
||||
@ -246,13 +338,32 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/tripbirds/leaflet-locationfilter/">leaflet-locationfilter</a>
|
||||
<a href="https://github.com/kajic/leaflet-locationfilter/">leaflet-locationfilter</a>
|
||||
</td><td>
|
||||
A draggable/resizable rectangle for selecting an area on the map.
|
||||
</td><td>
|
||||
<a href="https://github.com/kajic">Robert Kajic</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/Norkart/Leaflet-MiniMap">Leaflet.MiniMap</a>
|
||||
</td><td>
|
||||
A small minimap showing the map at a different scale to aid navigation.
|
||||
</td><td>
|
||||
<a href="https://github.com/robpvn">Robert Nordan</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="http://erictheise.github.com/rrose">Leaflet.Rrose</a>
|
||||
</td><td>
|
||||
A Leaflet Plugin for Edge Cases. For use when you want popups on <em>mouseover</em>, not <em>click</em>, and
|
||||
you need popup tips to reorient as you get close to the edges of your map.
|
||||
</td><td>
|
||||
<a href="http://www.linkedin.com/in/erictheise">Eric Theise</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@ bodyclass: api-page
|
||||
<!--<a href="#toc" id="back-to-top">↑</a>-->
|
||||
|
||||
<hr />
|
||||
<p>This reference reflects <strong>Leaflet 0.4.3</strong>. You can find docs for the in-progress master version in <code>reference.html</code> of <a href="https://github.com/CloudMade/Leaflet/zipball/gh-pages-master">gh-pages-master branch</a>.<br />Older docs for version 0.3 can be <a href="https://github.com/CloudMade/Leaflet/zipball/7fde9938fa36070191f939c9948285d7ddc07368">downloaded here</a></p>
|
||||
<p>This reference reflects <strong>Leaflet 0.4.5</strong>. You can find docs for the in-progress master version in <code>reference.html</code> of <a href="https://github.com/Leaflet/Leaflet/zipball/gh-pages-master">gh-pages-master branch</a>.<!--<br />Older docs for version 0.3 can be <a href="https://github.com/Leaflet/Leaflet/zipball/7fde9938fa36070191f939c9948285d7ddc07368">downloaded here</a>--></p>
|
||||
|
||||
<h2 id="map-class">L.Map</h2>
|
||||
|
||||
@ -425,12 +425,12 @@ var map = L.map('map', {
|
||||
<td>Fired when the user pushes the mouse button on the map.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>mouseenter</b></code></td>
|
||||
<td><code><b>mouseover</b></code></td>
|
||||
<td><code><a href="#mouse-event">MouseEvent</a></code>
|
||||
<td>Fired when the mouse enters the map.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>mouseleave</b></code></td>
|
||||
<td><code><b>mouseout</b></code></td>
|
||||
<td><code><a href="#mouse-event">MouseEvent</a></code>
|
||||
<td>Fired when the mouse leaves the map.</td>
|
||||
</tr>
|
||||
@ -3291,7 +3291,7 @@ map.panBy(new L.Point(200, 300));</code></pre>
|
||||
<td>Creates a Bounds object from two coordinates (usually top-left and bottom-right corners).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>L.LatLngBounds</b>(
|
||||
<td><code><b>L.Bounds</b>(
|
||||
<nobr><<a href="#point">Point</a>[]> <i>points</i> )</nobr>
|
||||
</code></td>
|
||||
|
||||
@ -4501,7 +4501,7 @@ L.map('map');</code></pre>
|
||||
<td>Applies a unique key to the object and returns that key.</td>
|
||||
</tr>
|
||||
<!-- TODO Commented out for the time being:
|
||||
https://github.com/CloudMade/Leaflet/pull/793#discussion_r1134904
|
||||
https://github.com/Leaflet/Leaflet/pull/793#discussion_r1134904
|
||||
<tr>
|
||||
<td><code><b>requestAnimFrame</b>()</code></td>
|
||||
<td></td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user