Leaflet Dev Blog
2024-03-01T11:17:49+00:00
https://leafletjs.com/
Volodymyr Agafonkin
Leaflet 1.9 released
2022-09-21T00:00:00+00:00
https://leafletjs.com/2022/09/21/leaflet-1.9.0
<p>The v1.9 release is setting the stage for the first major version bump of Leaflet since 2016! A lot has changed since then, and it’s time for Leaflet to grow together with the web platform.</p>
<p>After this release, we are branching off the 1.x code and putting it in <em>maintenance mode</em> — reserving potential 1.x releases <em>only</em> for critical bugfixes. Although <strong>version 2.0</strong> is still far away and will take some time to take shape, we plan to make the following changes:</p>
<ul>
<li><strong>Dropping support for Internet Explorer</strong>.
This has been a long time coming, but now that Internet Explorer is <a href="https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/">officially end-of-life</a>, it’s time to say goodbye. Going forward, Leaflet will move to an evergreen strategy that targets browsers like Firefox, Chrome, Edge and Safari.</li>
<li><strong>Embracing modern JavaScript</strong>.
To maintain backwards compatibility, Leaflet is written entirely in ES5, a version of JavaScript supported by legacy browsers. So we have not been able to make use of many great JavaScript features (e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">standardized classes</a>, instead having to rely on our <a href="https://leafletjs.com/reference.html#class">own implementation</a>). By adopting a more modern version of the ECMAScript standard, we can start working towards aligning Leaflet with what is expected from a modern JavaScript library.</li>
<li><strong>Standardized modules</strong>.
When we released Leaflet v1, the landscape in the JavaScript world was very different and full of competing module standards such as CommonJS, AMD and UMD. Today, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">ECMAScript modules</a> have become the clear way forward to unite the JavaScript ecosystem under one banner. Moving forward, Leaflet will only be distributed in a single standardized module system, greatly reducing complexity of our distributed code.</li>
<li><strong>Removing the Leaflet global</strong>.
As a developer using Leaflet, the capital letter <code class="language-plaintext highlighter-rouge">L</code> is probably intimately familiar to you. This is the Leaflet global where all of Leaflet’s functionality lives. To allow compiler tooling to better eliminate dead-code through a process called <a href="https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking">tree-shaking</a>, we are removing this global variable. To preserve backwards compatibility with older plugins, we will provide a shim that can be imported manually that will restore this functionality.</li>
</ul>
<p>Check out <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.0">the full changelog here</a>.</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.1">v1.9.1 patch</a> has been released to address compatibility with <em>Leaflet.markercluster</em> plugin.</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.2">v1.9.2 patch</a> has been released which reverts ESM support because of numerous compatibility issues with plugins.</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.3">v1.9.3 patch</a> has been released which resolves some bug fixes and accessibility issues.</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.4">v1.9.4 patch</a> has been released which resolves some bug fixes.</p>
<p>Cheers,<br />
The Leaflet team.</p>
<p><a href="https://stand-with-ukraine.pp.ua"><img src="https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg" alt="Stand With Ukraine" /></a></p>
Leaflet 1.8 released in the middle of war
2022-04-18T00:00:00+00:00
https://leafletjs.com/2022/04/18/leaflet-1.8.0
<p>We have just released Leaflet v1.8.0, a culmination of 1.5 years of development. This is a huge release focused on <strong>bug fixes</strong>, major <strong>reliability</strong> and <strong>accessibility</strong> improvements, <strong>cleaning up</strong> legacy code, and numerous improvements to documentation, development workflow and release process. A culmination of hundreds of contributions, and a preparation for bigger changes to come. 🍃 From now on, releases will become much more frequent.</p>
<p>I’m making this release just as an <a href="https://observablehq.com/@mourner/sirens">air raid alert</a> is sounding outside, in Kyiv, warning about an imminent Russian air strike. This release is dedicated to Ukrainian fight for freedom and democracy against the Russian invasion 🇺🇦 (see how you can <a href="https://stand-with-ukraine.pp.ua/">support Ukraine here</a>).</p>
<p>Thanks to our amazing community for all your help and patience. ❤️🙏 Special thanks to <a href="https://github.com/johnd0e">@johnd0e</a> who revived Leaflet development after long stagnation and made the biggest contributions, <a href="https://github.com/Falke-Design">@Falke-Design</a> for doing the bulk of the work organizing development and preparing the release, <a href="https://github.com/Malvoz">@Malvoz</a> for his numerous accessibility contributions, and <a href="https://github.com/jonkoops">@jonkoops</a> for help with workflow automations. ❤️</p>
<p>Check out <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.8.0">the full changelog here</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
<p><a href="https://stand-with-ukraine.pp.ua"><img src="https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg" alt="Stand With Ukraine" /></a></p>
Leaflet 1.7 released
2020-09-04T00:00:00+00:00
https://leafletjs.com/2020/09/04/leaflet-1.7.1
<p>During the last year or so, mainstream web browsers have subtly changed the way touchscreens work; unfortunately, Leaflet 1.6.0 and previous versions now exhibit some quirks on touchscreens.</p>
<p>Leaflet 1.7.1 fixes that by bringing several changes to how <code class="language-plaintext highlighter-rouge">PointerEvent</code>s are detected and handled, and using passive touch event listeners when available.</p>
<p>The release was supposed to be numbered as 1.7.0, but a problem with the NPM dependencies appeared at the last minute, generating a bad build. Version 1.7.0 has been marked as deprecated in NPM, and shouldn’t be used - use 1.7.1 instead.</p>
<p>Besides that, there’s a bunch of small bug and documentation fixes, detailed in <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">the changelog</a>. Thanks to everyone who sent a fix, no matter how small!</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.6.0
2019-11-17T00:00:00+00:00
https://leafletjs.com/2019/11/17/leaflet-1.6.0
<p>Leaflet 1.6.0 is out!</p>
<p>This release brings some new features, as well as bugfixes and improvements!</p>
<p>Here are some highlights:</p>
<ul>
<li>add <code class="language-plaintext highlighter-rouge">oldLatLng</code> coordinates to <code class="language-plaintext highlighter-rouge">L.CircleMarker</code> <code class="language-plaintext highlighter-rouge">move</code> event</li>
<li>add new <code class="language-plaintext highlighter-rouge">markersInheritOptions</code> option to <code class="language-plaintext highlighter-rouge">L.GeoJSON</code></li>
<li>fix <code class="language-plaintext highlighter-rouge">dblclick</code> on iOS 13</li>
<li>use passive event listeners</li>
</ul>
<p>Big thanks to all contributors who made this release possible!</p>
<p>Changelog is available <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">here</a>.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.5.1
2019-05-08T00:00:00+00:00
https://leafletjs.com/2019/05/08/leaflet-1.5.1
<p>Leaflet 1.5.1 is out!</p>
<p>This is a hotfix release, which fixes module export regression in 1.5.0.</p>
<p>Changelog is available <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">here</a>.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.5.0
2019-05-08T00:00:00+00:00
https://leafletjs.com/2019/05/08/leaflet-1.5.0
<p>Leaflet 1.5.0 is out!</p>
<p>This release brings some new features, as well as bugfixes and improvements!</p>
<p>Here are some highlights:</p>
<ul>
<li>new <code class="language-plaintext highlighter-rouge">keepAspectRatio</code> option for <code class="language-plaintext highlighter-rouge">VideoOverlay</code></li>
<li>support for <code class="language-plaintext highlighter-rouge">keydown</code> and <code class="language-plaintext highlighter-rouge">keyup</code> events</li>
<li>new <code class="language-plaintext highlighter-rouge">shadowPane</code> option for <code class="language-plaintext highlighter-rouge">Marker</code></li>
<li>fixed layers controls state when using multiple maps</li>
<li>update attribution link to HTTPS</li>
</ul>
<p>Big thanks to all contributors who made this release possible!</p>
<p>Changelog is available <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">here</a>.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.4.0
2018-12-30T00:00:00+00:00
https://leafletjs.com/2018/12/30/leaflet-1.4.0
<p>Leaflet 1.4.0 is out!</p>
<p>This minor version release brings new useful <a href="https://leafletjs.com/reference.html#map-paninside">Map.panInside</a> method, as well as bugfixes and improvements! :)
Big thanks to all contributors who made this release possible!</p>
<p>Changelog is available <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">here</a>.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Happy New Year,<br />
The Leaflet team.</p>
Announcing Leaflet 1.3.4
2018-08-21T00:00:00+00:00
https://leafletjs.com/2018/08/21/leaflet-1.3.4
<p>Leaflet 1.3.4 is out!</p>
<p>This release contains some bugfixes and improvements :)
Big thanks to all contributors who made this release possible!</p>
<p>Changelog is available <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">here</a>.</p>
<p>Want to receive notification when new Leaflet release is available? Subscribe to <a href="https://github.com/Leaflet/Leaflet/issues/6295">this issue</a>.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.3.3
2018-07-18T00:00:00+00:00
https://leafletjs.com/2018/07/18/leaflet-1.3.3
<p>Leaflet 1.3.3 is out!</p>
<p>This release fixes global variable <code class="language-plaintext highlighter-rouge">L</code> not being exposed. See <a href="https://github.com/Leaflet/Leaflet/issues/6238">#6238</a> for details.</p>
<p>Big thanks to our users for reporting this issue!</p>
<p>Changelog is available <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">here</a>.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.3.2
2018-07-17T00:00:00+00:00
https://leafletjs.com/2018/07/17/leaflet-1.3.2
<p>Leaflet 1.3.2 is out!</p>
<p>This release contains some bugfixes and improvements :)
Big thanks to all contributors who made this release possible! See the full <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">changelog</a> for details.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.3.1
2018-01-18T00:00:00+00:00
https://leafletjs.com/2018/01/18/leaflet-1.3.1
<p>Leaflet 1.3.1 has just been released!</p>
<p>This release fixes <code class="language-plaintext highlighter-rouge">L.TileLayer</code> regression, introduced in 1.3.0. Oops!</p>
<p>See <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">changelog</a> for details.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.3.0
2018-01-15T00:00:00+00:00
https://leafletjs.com/2018/01/15/leaflet-1.3.0
<p>Long awaited Leaflet 1.3.0 has just been released!</p>
<p>This release contains a lot of bugfixes, improvements and a couple new options.
Big thanks to all contributors who made this release possible! See the full <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">changelog</a> for details.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Leaflet 1.2.0 has been released
2017-08-08T00:00:00+00:00
https://leafletjs.com/2017/08/08/leaflet-1.2.0
<p>Leaflet 1.2.0 has just been released. The major reason for this release is to address an unfortunate regression in the 1.1.0 release, <a href="https://github.com/Leaflet/Leaflet/issues/5589">causing trouble with several plugins</a>. Traditionally, Leaflet plugins has altered and added to Leaflet’s namespace (the <code class="language-plaintext highlighter-rouge">L</code> global), something which is no longer allowed after Leaflet was rebuilt on ES6 modules (an imported module is read-only). To preserve backwards compatibility, we have made a workaround to make the Leaflet namespace and its contents mutable again.</p>
<p>For the future, we expect to work out a new recommendation for authoring Leaflet plugins, that takes into account how modern JavaScript is built with ES6 modules, instead of modifying the Leaflet namespace.</p>
<p>As usual, we also managed to close off a number of other bugs and make a couple of minor improvements, all with the help of our many contributors - a big thank you to all who contributed to the release this summer! See the full <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">changelog</a> for details.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.1.0
2017-06-27T00:00:00+00:00
https://leafletjs.com/2017/06/27/leaflet-1.1.0
<p>We have released Leaflet version 1.1.0, the first version built with <a href="https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules">ES6 modules</a> - a big step forward ensuring Leaflet is up to date with how modern JavaScript is written. For users upgrading to this release, this change should not make a difference, while it offers the possibility to import individual parts of Leaflet individually if your app is built with ES6. As a consequence, 1.1.0 is also the first version built without Leaflet’s now deprecated custom build system, in favor of using <a href="https://rollupjs.org/">Rollup</a>.</p>
<p>Also new in this release is the new <code class="language-plaintext highlighter-rouge">L.VideoOverlay</code> class, allowing <a href="https://leafletjs.com/examples/video-overlay/">overlaying video on your maps</a>.</p>
<p>We also managed to fix over 30 bugs with the help of about 20 different contributors: see the full <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">changelog</a> for details.</p>
<p>To get the new release, update your dependencies in your favorite package manager, or check the <a href="https://leafletjs.com/download.html">downloads page</a>.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.0.3
2017-01-23T00:00:00+00:00
https://leafletjs.com/2017/01/23/leaflet-1.0.3
<p>Leaflet 1.0.3 is now out, with about a dozen bugfixes since 1.0.2.</p>
<p>One of the main highlights is the handling of <code class="language-plaintext highlighter-rouge">dblblick</code> events for web browsers
which support <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent"><code class="language-plaintext highlighter-rouge">PointerEvent</code>s</a>.
Until now, the only browser which used <code class="language-plaintext highlighter-rouge">PointerEvent</code>s were Internet Explorer and Edge;
but now that Chrome has <a href="https://developers.google.com/web/updates/2016/11/nic55#pointer-events">enabled support in version 55</a>,
the Leaflet code for checking for double clicks and touchscreens had to change.</p>
<p>Leaflet 1.0.3 also improved the performance and behaviour of <code class="language-plaintext highlighter-rouge">L.Canvas</code> rendering,
backported a few fixes for Internet Explorer 8, and some miscellaneous fixes.</p>
<p>The full list of changes can be found on <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">the changelog</a>.</p>
<p>As usual, check the <a href="https://leafletjs.com/download.html">downloads page</a> to get this release.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Announcing Leaflet 1.0.2
2016-11-21T00:00:00+00:00
https://leafletjs.com/2016/11/21/leaflet-1.0.2
<p>As part of our “we really promised a faster release cycle” vision, we are publishing Leaflet 1.0.2.</p>
<p>Compared to 1.0.1, this release fixes about a dozen bugs, and a couple new options. The full list of changes can be found on <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">the changelog</a>.</p>
<p>As usual, check the <a href="https://leafletjs.com/download.html">downloads page</a> to get this release.</p>
<h3 id="next-plans">Next plans?</h3>
<p>Now, Leaflet uses a set of scripts to put a lot of files together. While this has been reliable for years, we want to embrace some of the features of contemporary JavaScript.</p>
<p>We have been working on reorganizing the codebase to implement ES6 modules. This means a cleaner, easier to understand build system, and slightly smaller file sizes thanks to <a href="http://rollupjs.org/">RollupJS</a>.</p>
<p>We aim for a 1.1.0 release with the new rollup builds. Even though it’s not a very exciting development, this will pave the way for experimenting with new ways of having Leaflet plugins.</p>
<p>Cheers,<br />
The Leaflet team.</p>
Meet Leaflet 1.0.
2016-09-27T00:00:00+00:00
https://leafletjs.com/2016/09/27/leaflet-1.0-final
<p><img alt="This is totally not making fun of the announcements by a company with a fruit logo." src="https://cloud.githubusercontent.com/assets/25395/18873565/c4856f70-84c8-11e6-82b1-48992fc5afe8.png" width="800" /></p>
<p>Today marks the final release of Leaflet 1.0. It’s a culmination of several years of work by dozens of contributors from all over the world. This is the fastest, most stable and polished Leaflet release ever.</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">The changelog</a> contains <em>over 400 changes</em> compared to the previous stable, v0.7.7. The highlights include:</p>
<ul>
<li>Huge performance improvements in all aspects of the library and vector layers in particular.</li>
<li>New <code class="language-plaintext highlighter-rouge">L.Tooltip</code> class for all your dynamic labeling needs.</li>
<li>Flyover animations (zooming and panning in a curve with <code class="language-plaintext highlighter-rouge">map.flyTo</code>).</li>
<li>Fractional zoom level support (<code class="language-plaintext highlighter-rouge">map.setZoom(12.34)</code>).</li>
<li>Much better tile loading algorithm with less flickering.</li>
<li>Custom pane management (including multiple vector layer panes and interleaving vectors and tile layers).</li>
<li>Better support for non-standard projections.</li>
<li>More accessibility features.</li>
<li>Vastly improved documentation.</li>
<li><em>Tons</em> of bugfixes and stability improvements.</li>
</ul>
<p>This release wouldn’t be possible without such an amazing, diverse, loving community. We’re incredibly proud to be a part of it. Thank you very much for your kind support!</p>
<h3 id="new-release-cycle">New release cycle</h3>
<p>This release is a way overdue and has taken too long. In part this can be attributed to our initial ambition for 1.0 that required rewriting many parts of the library almost from scratch, in part due to perfectionism (some of the beta/rc releases were already more stable than our last stable release), and in part because we underestimated the cost of introducing big breaking changes in a library used by thousands of developers.</p>
<p>Starting with 1.0, we’re switching to a fast release cycle, where a new version will come out every 2–4 weeks. We’ll also prefer many small, incremental changes (with releases in between) over ambitious rewriting quests.</p>
<h3 id="whats-next">What’s next?</h3>
<p>In addition to supporting the new release with fixes and improvements, the following areas will now get our close attention:</p>
<ul>
<li>A cleaner, more stable plugin ecosystem. We want to make sure that all popular plugins work well with the latest release and are maintained. We’ll revise our plugin list page, tighten our review process, take more key plugins under the wing of the Leaflet organization on GitHub and spend more time working on them.</li>
<li>Tutorials and examples to cover more advanced features of the library, its popular plugins, and integrations with libraries like D3 and React/Angular.</li>
<li>Explore switching to a more modern JavaScript flavor and module system (ES6, Babel, Rollup).</li>
<li>Map rotation support.</li>
</ul>
<p>Please help us test this new release, make sure it works with your favorite plugins, get involved in discussions on GitHub, and don’t forget we’re always looking for <a href="https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md">new contributors</a>!</p>
<p>And of course, let’s celebrate!</p>
<p>Love,<br />
The Leaflet team.</p>
<p><img src="https://www.reactiongifs.com/wp-content/uploads/2013/06/umad.gif" alt="" /></p>
Announcing Leaflet 1.0-rc3
2016-08-05T00:00:00+00:00
https://leafletjs.com/2016/08/05/leaflet-1.0-rc3
<p>A regression in the way event listeners were called pushed the Leaflet team to freeze a new release candidate, so here is the third one.</p>
<h3 id="bug-fixing-bug-fixing-bug-fixing">Bug fixing, bug fixing, bug fixing!</h3>
<p>The previous release candidate landed an event refactoring and the new <code class="language-plaintext highlighter-rouge">L.Tooltip</code> class, and, how bizarre,
almost all the fixes in this release are related to those two changes!</p>
<p>The main regression affected the way Leaflet was calling the event listeners: the order we were calling the listeners was not the same they have been registered.</p>
<p>Before the rc2, Leaflet was handling differently listeners with and without explicit context. The former were always called before the later, no matter the order they were registered, but their order was unpredictable. In the meantime, listeners without explicit context, while always called after the other ones, were called in registration order.</p>
<p>While in the task of refactoring events for rc2, in order to make them faster, we also factorized those pieces of code. But we did it the wrong way!</p>
<p>This third release is then about making all the listeners behave in a predictable way. While this is a clear improvement, it may have side effects in corner cases. So be warry when upgrading!</p>
<p>Nothing more to highlight about this quick fixup release, check the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#10-rc3-august-3-2016">1.0.0-rc3 changelog</a> for the full list of changes.</p>
<h3 id="summer-hacking">Summer hacking</h3>
<p>Releasing during summer, while all the team is having a break, has some funny side effects. This release was mainly done while traveling, by train and airplane.
And partly in some small village in Iraq under 53° Celsius!</p>
<p><img src="/docs/images/2016-08-03-iraq-hacking.jpg" alt="Iraq hacking" /></p>
<h3 id="get-the-release-candidate">Get the release candidate</h3>
<p>As with previous releases, you can use the CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
</code></pre></div></div>
<p>A non-minified version of the javascript file is also available at:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet-src.js"></script>
</code></pre></div></div>
<p>The release is also available through NPM (<code class="language-plaintext highlighter-rouge">npm install leaflet@rc</code>), <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-rc.3.zip">GitHub download</a>, and <a href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.3/leaflet.zip">CDN download</a>. We discourage using Bower.</p>
<p>Use it, enjoy it, and please report any <a href="https://github.com/Leaflet/Leaflet/issues">issue</a> to help preparing the final Leaflet 1.0 release!</p>
<p>Best,</p>
<p>The “Leafteam”</p>
Announcing Leaflet 1.0-rc2
2016-07-16T00:00:00+00:00
https://leafletjs.com/2016/07/16/leaflet-1.0-rc2
<p>Here comes the second release candidate for Leaflet 1.0, the most stable Leaflet version ever!</p>
<p>Leaflet 1.0-rc2 is mainly bug fixing, with two notable exceptions. The full list of changes is in the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#10-rc2-july-18-2016">1.0.0-rc2 changelog</a> as usual.</p>
<h3 id="notable-changes">Notable changes</h3>
<ul>
<li>
<p>Event refactoring: thanks to an initial work from <a href="https://github.com/fab1an">@fab1an</a>, coordinated by <a href="https://github.com/perliedman">@perliedman</a>, the events are greatly optimized: they are faster, and consume less memory.</p>
</li>
<li>
<p>New <code class="language-plaintext highlighter-rouge">L.Tooltip</code> class: started as a port of Leaflet.Label plugin to Leaflet core, and then reworked, this new class allows to display small tooltips attached to map features. The API is very similar to what Leaflet.Label was (with some exceptions in <a href="https://github.com/Leaflet/Leaflet.label#upgrade-path-to-ltooltip">options naming and default values</a>), so the upgrade path from Leaflet.Label to <code class="language-plaintext highlighter-rouge">L.Tooltip</code> should be straightforward, and we encourage you to do so while upgrading your Leaflet to 1.0.</p>
</li>
</ul>
<p><img src="/docs/images/2016-07-18-tooltip.png" alt="L.Tooltip" /></p>
<p>More in the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#10-rc2-july-18-2016">1.0.0-rc2 changelog</a>.</p>
<h2 id="whats-left-for-100-final">What’s left for 1.0.0-final</h2>
<p>The Leaflet team is very happy about the progress from rc1 to rc2, but not all features were tackled.</p>
<p>Notably, the scroll zoom with an Apple Magic Mouse has proven to be very tricky to debug (especially since not all members of the team have access to one). Getting a good experience when scroll-zooming with this particular device had been planned for rc2 but ultimately it was pushed back for 1.0.0-final.</p>
<p>While there are no big features planned, a few but <a href="https://github.com/Leaflet/Leaflet/milestone/21">mischievous and tricky bugs are left</a> - such as subpixel offset, CSS trickery, zoom vibration.</p>
<h3 id="leafdays">Leafdays</h3>
<p>The core team being spread all over Europe, we are doing so called “Leafdays” from time to time to remotely work together during one full day. Here is a debug session with <a href="https://github.com/perliedman">@perliedman</a> screen sharing:</p>
<p><img src="/docs/images/2016-07-18-remote-session.png" alt="Remote session" /></p>
<p>Next face-to-face session will be during <a href="http://2016.foss4g.org/">FOSS4G</a> in Bonn, in August, and we hope to see you there. Will this be the final 1.0 release session?</p>
<h3 id="get-the-release-candidate">Get the release candidate</h3>
<p>As with previous releases, you can use the CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
</code></pre></div></div>
<p>A non-minified version of the javascript file is also available as:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet-src.js"></script>
</code></pre></div></div>
<p>The release is also available through NPM (<code class="language-plaintext highlighter-rouge">npm install leaflet@rc</code>), <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-rc.2.zip">GitHub download</a>, and <a href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.2/leaflet.zip">CDN download</a>. We discourage using Bower.</p>
<p>Use it, enjoy it, and please report any <a href="https://github.com/Leaflet/Leaflet/issues">issue</a> to help preparing the final Leaflet 1.0 release!</p>
<p>Best,</p>
<p>The “Leafteam”</p>
Announcing Leaflet 1.0-rc1
2016-04-18T00:00:00+00:00
https://leafletjs.com/2016/04/18/leaflet-1.0-rc1
<p>The road to Leaflet 1.0 continues - we’re proud to get the first release candidate for 1.0 into the wild.</p>
<p>Leaflet 1.0-rc1 closes down on edge cases and API inconsistencies that were present in beta2. The full list of changes is in the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#10-rc1-april-18-2016">1.0.0-rc1 changelog</a>) as usual, with about 50 bugfixes and a dozen improvements and minor API changes.</p>
<h3 id="notable-changes">Notable changes</h3>
<ul>
<li>
<p>Fractional zoom controls: In beta2, developers could set a fractional zoom level only by code, running e.g. <code class="language-plaintext highlighter-rouge">map.setZoom(8.5)</code>. Now the map has options (<code class="language-plaintext highlighter-rouge">zoomSnap</code> and <code class="language-plaintext highlighter-rouge">zoomDelta</code>) to let the user navigate through fractional zoom levels.</p>
</li>
<li>
<p>Better handling of vector layers when using the <code class="language-plaintext highlighter-rouge"><canvas></code> renderer, when layers are non-interactive and lines are dashed.</p>
</li>
<li>
<p>The first ever Microsoft Edge hack (handle inconsistent <code class="language-plaintext highlighter-rouge">dblclick</code> behaviour on Win10 touchscreens)</p>
</li>
<li>
<p>Unit tests with <code class="language-plaintext highlighter-rouge">prosthetic-hand</code>, letting us be sure that touch interactions behave consistently. This has its <a href="https://leafletjs.com/2016/03/20/debugging-touch-interactions.html">own blog post</a>.</p>
</li>
</ul>
<h3 id="changes-in-the-api-documentation">Changes in the API documentation</h3>
<p>The API documentation is now generated from docstrings, thanks to a new tool dubbed <a href="https://github.com/Leaflet/Leafdoc">🍂doc</a> (or “leafdoc”).</p>
<p>Previously, the API documentation was edited manually. This involved a lot of copy-pasting and - over time - bits of code started not to match the documentation.</p>
<p>Most complex software projects use some form of <a href="https://en.wikipedia.org/wiki/Docstring">docstrings</a> and tools like <a href="https://en.wikipedia.org/wiki/Javadoc">JavaDoc</a>, <a href="http://www.naturaldocs.org/">NaturalDocs</a> or <a href="http://usejsdoc.org/">JSdoc</a> to convert the docstrings into webpages.</p>
<p>But the documentation for Leaflet requires a few special bits - docstrings cover methods and properties, but they do not cover options nor events, and we wanted to maintain the current look and feel of the documentation. 🍂doc was then born to overcome these limitations.</p>
<p>Leaflet uses class inheritance quite extensively, and the old documentation was sometimes not clear about it. Some users struggled to find the available methods for some of the classes, and inherited options were sometimes mentioned, sometimes not. 🍂doc fixes this by including the documentation of all inherited methods/options/events/properties, collapsed by default:</p>
<p><img src="/docs/images/2016-04-18-inheritances.gif" alt="Collapsed inheritances for L.Polygon" /></p>
<p>The <a href="https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md#setting-up-the-build-system">build system</a> now builds a HTML file with the API docs alongside the minified <code class="language-plaintext highlighter-rouge">leaflet.js</code> file. Documentation will be updated on every release based on that file, and pull requests to the <code class="language-plaintext highlighter-rouge">gh-pages</code> branch to fix the documentation will be automatically rejected.</p>
<h3 id="get-the-release-candidate">Get the release candidate</h3>
<p>As with previous releases, you can use our CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
</code></pre></div></div>
<p>A non-minified version of the javascript file is also available as:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
</code></pre></div></div>
<p>The release is also available through NPM (<code class="language-plaintext highlighter-rouge">npm install leaflet@rc</code>), <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-rc.1.zip">GitHub download</a>, and <a href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.zip">CDN download</a>. We discourage using Bower.</p>
<h3 id="the-team-in-person">The team in person</h3>
<p>This Release Candidate leapt forward when most of the Leaflet team met in Madrid for a weekend to fix bugs and discuss architectural decisions, and whether some big features should make it to 1.0 or be postponed.</p>
<table class="image">
<caption align="bottom"><small>This photograph <em>might</em> have been digitally altered to include somebody who couldn't come to Madrid that weekend.</small></caption>
<tr><td style="text-align:center"><img src="/docs/images/2016-04-18-madrid-leaflet-864px.jpg" alt="The Leaflet team in Madrid" /></td></tr>
</table>
<table class="image">
<caption align="bottom"><small>Iván and Yohan want to extend a special thanks to the roll of toilet paper.</small></caption>
<tr><td style="text-align:center"><img src="/docs/images/2016-04-18-leaflet-toilet-paper.jpeg" alt="The Leaflet team in Madrid" width="864" /></td></tr>
</table>
<p>We enjoyed meeting in person and fighting bugs together. It proved to be a very productive thing to do, as about 20 issues were closed that day. Hopefully another in-person meeting will happen soon, with another release!</p>
<p>We hope you enjoy Leaflet 1.0-rc1 as much as we did coding it!</p>
<p>Best,
Iván & Vladimir & Yohan & Per & Zsolt.</p>
Debugging touch interactions
2016-03-20T00:00:00+00:00
https://leafletjs.com/2016/03/20/debugging-touch-interactions
<p>Most of the time, fixing bugs in the Leaflet code is a breeze. The code is simple, easy to read (for the most part) and well structured. Code conventions and unit tests make it easy for newcomers to try some modifications to the core code. During the past few months we’ve sent a few simple bug reports to the folks at <a href="https://yourfirstpr.github.io/">Your First PR</a> - we love to see first-timers contributing fixes to Leaflet!</p>
<p>Some of the difficulties of maintaining/developing a javascript library like Leaflet is making sure that everything works on every major browser out there. A technique that works on Firefox on a Ubuntu desktop might result in glitches in Safari on a Macbook; something that works in Edge on Windows 10 might break completely in Chrome on Android.</p>
<p>Fortunately, all of the browser-specific hacks in Leaflet can be easily seen by looking at the <a href="https://github.com/search?q=Browser+repo%3ALeaflet%2FLeaflet+language%3AJavaScript+extension%3Ajs+path%3A%2Fsrc&ref=searchresults&type=Code&utf8=%E2%9C%93">references to <code class="language-plaintext highlighter-rouge">L.Browser</code></a> in the code.</p>
<p>This can lead to somewhat <a href="https://github.com/Leaflet/Leaflet/blob/main/src/dom/DomEvent.DoubleTap.js#L65">undesirable code</a> sometimes:</p>
<pre><code class="javascript"> // On some platforms (notably, chrome on win10 + touchscreen + mouse),
// the browser doesn't fire touchend/pointerup events but does fire
// native dblclicks. See #4127.
if (!L.Browser.edge) {
obj.addEventListener('dblclick', handler, false);
}
</code></pre>
<p>I’ve been told more than a few times by browser developers that browser sniffing is wrong, and that feature detection is right. I mean, detecting 3D CSS transforms and HTML5 <code class="language-plaintext highlighter-rouge"><video></code> support is easy, but there is no (sane) way to detect if a browser fires a <code class="language-plaintext highlighter-rouge">dblclick</code> event by itself when double-tapping a touchscreen.</p>
<p>Debugging touch interactions is particularly tricky. Sometimes the conditions to reproduce a touch-interaction bug is simple (double-tap the touchscreen in the same spot), but sometimes they are more specific. In <a href="https://github.com/Leaflet/Leaflet/issues/3798">#3798</a> and <a href="https://github.com/Leaflet/Leaflet/issues/3814">#3814</a> the conditions are “drag with one finger, then put down another finger and pinch”, and in <a href="https://github.com/Leaflet/Leaflet/issues/3530">#3530</a> it’s “pinch in until <code class="language-plaintext highlighter-rouge">maxZoom</code> is reached, then do a two-finger drag”.</p>
<p>The problem with this kind of bugs is that they’re <strong>frustrating</strong> and <strong>time-consuming</strong> to reproduce under controlled conditions. Imagine having a code editor and a browser debugger when at the same time using two hands to perform a very specific touch gesture while watching the debugger. Then you want to inspect a variable in the debugger but you cannot move your fingers even a pixel because that will run more code and change the state.</p>
<p>And then, for the fifth time in the last hour, the wobbly phone charger connector wobbles again, and the debugger disconnects, and you have to start all over again.</p>
<table class="image">
<!-- <caption align="bottom"><small></small></caption> -->
<tr><td style="text-align:center"><img src="https://i.chzbgr.com/full/4896152320/h3FAAE99E/" alt="rage quit" /></td></tr>
</table>
<p>If I had an extra hand or two, debugging touch interactions would be much simpler, but biotechnology is still far away from allowing me to grow an extra hand.</p>
<p>Fortunately, we can leverage <a href="https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent">dispatching custom events to the browser</a>. Normally, when we use a mouse (or a touchpad, or a touchscreen, or a digitizer tablet), the web browser will generate a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent"><code class="language-plaintext highlighter-rouge">MouseEvent</code></a> (or a <a href="https://developer.mozilla.org/docs/Web/API/TouchEvent"><code class="language-plaintext highlighter-rouge">TouchEvent</code></a> or a <a href="https://developer.mozilla.org/docs/Web/API/PointerEvent"><code class="language-plaintext highlighter-rouge">PointerEvent</code></a>). But instead of that, we javascript programmers can create a synthetic (i.e. fake) event, then throw it to the browser so it can dispatch it to whatever code is listening for an event.</p>
<p>Unfortunately creating and dispatching such events is cumbersome. A touch gesture involves <em>at least</em> 4 to 8 events in a particular order, with particular data, with a particular timing. There have been a few attempts to automate this (the best I could find was the <a href="https://github.com/hammerjs/simulator">hammer.js simulator</a>), but there is no good way of emulating complex custom touch gestures.</p>
<p>Until now.</p>
<p>I’m proud to introduce <a href="https://github.com/Leaflet/prosthetic-hand"><strong>prosthetic-hand</strong></a>, for all you javascript debugging needs that require you to have an extra hand.</p>
<p>With prosthetic-hand, I can now automate a pinch-zoom gesture in a Leaflet webpage:</p>
<table class="image">
<caption align="bottom"><small>You get to see my disembodied fingers as a bonus</small></caption>
<tr><td style="text-align:center"><img src="/docs/images/2016-03-20-prosthetic-hand-zooming.gif" alt="Animated screenshot of prosthetic-hand zooming in and out" /></td></tr>
</table>
<p>With this library loaded, just ask for an extra hand (with a specific timing mode):</p>
<pre><code class="javascript">var h = new Hand({ timing: 'frame' });
</code></pre>
<p>Then grow some fingers:</p>
<pre><code class="javascript">var f1 = h.growFinger('touch');
var f2 = h.growFinger('touch');
</code></pre>
<p>Then move the fingers around (using pixel coordinates and milliseconds):</p>
<pre><code class="javascript">f1.wait(100).moveTo(250, 200, 0)
.down().wait(500).moveBy(-200, 0, 1000).wait(500).up().wait(500)
.down().wait(500).moveBy( 200, 0, 1000).wait(500).up().wait(500);
f2.wait(100).moveTo(350, 200, 0)
.down().wait(500).moveBy( 200, 0, 1000).wait(500).up().wait(500)
.down().wait(500).moveBy(-200, 0, 1000).wait(500).up().wait(500);
</code></pre>
<p>You can check this in the <a href="https://leaflet.github.io/prosthetic-hand/demos/">live prosthetic-hand demos</a>.</p>
<p>The prosthetic-hand library is not perfect, and some types of events only work in some browsers, but it can help trigger mouse/touch/pointer events in a repeatable way, with adjustable timing, allowing developers to keep both hands at the debugger. The timing modes allow granular control of the events fired, allowing to run less iterations of the code for the same gesture, which in turn means a simpler, better understanding of what’s going on.</p>
<hr />
<p>A famous quote (often <a href="http://quoteinvestigator.com/2014/03/29/sharp-axe/">misattributed to Abraham Lincoln</a>) says:</p>
<blockquote>A woodsman was once asked, “What would you do if you had just five minutes to chop down a tree?” He answered, “I would spend the first two and a half minutes sharpening my axe.”</blockquote>
<p>Web development is no different - having the right tools will make your task so much easier.</p>
<p>It’s not just a matter of time. Maybe writing a tool from scratch was time-consuming, but the best gain is that debugging <strong>stops being frustrating</strong>. Before, it was “use a hand on the touchscreen, look closely at the debugger, don’t use breakpoints because you don’t have enough hands”. Now it’s “change the timing on the prosthetic-hand events, set a breakpoint, <em>boom</em>”.</p>
<p>And what’s even better, having an automated tool means that Leaflet now has <a href="https://github.com/Leaflet/Leaflet/blob/main/spec/suites/map/handler/Map.TouchZoomSpec.js"><strong>unit tests for touch interactions</strong></a>. The PhantomJS headless web browser can understand the <code class="language-plaintext highlighter-rouge">TouchEvent</code>s that prosthetic-hand generates, and can check if a map behaves as expected when that gesture is performed.</p>
<p>The amount of time and headaches we’ll save in Leaflet by having automated touch tests is going to be huge. We can only hope more projects will benefit from similar automated testing.</p>
<hr />
<p>Don’t just write open-source code. Make better tools for everybody.</p>
<p>Yours,
Iván</p>
Announcing Leaflet 1.0 beta 2
2015-10-14T00:00:00+00:00
https://leafletjs.com/2015/10/14/leaflet-1.0-beta2-released
<p>Since the 1.0.0-beta1 release a couple months ago, the Leaflet team has been busy fixing bugs reported by users of beta1, plus a few small changes to the API that were overlooked previously. You can find the complete list of fixes and changes in the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#10-beta2-october-14-2015">1.0.0-beta2 changelog</a>.</p>
<h3 id="get-the-new-release">Get the new release</h3>
<p>As with previous releases, you can use our CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
</code></pre></div></div>
<p>The release is also available through NPM (<code class="language-plaintext highlighter-rouge">npm install leaflet@beta</code>), Bower, and <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-beta.2.zip">GitHub download</a>.</p>
<p>The API reference for 1.0 is still temporarily <a href="http://mourner.github.io/Leaflet/reference.html">available here</a>.</p>
<h3 id="the-future">The future</h3>
<p>Work is not yet done, though. There will probably be a beta3, sporting bugfixes in the tile loading algorithm, API methods for fractional zoom and documentation improvements, among other pending items.</p>
<p>We hope to have fixed the most problematic bugs in the previous beta, but maybe there is a bug that we are not aware of. We encourage users of 1.0.0-beta1 to upgrade to beta2 and keep reporting problems.</p>
<p>Help us help you by taking a minute to learn <a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html">how to write a good bug report</a>, and check if a <a href="https://github.com/Leaflet/Leaflet/issues">similar issue</a> has already been reported. Or better even, dive into the Leaflet code if you can!</p>
<p>Last but not least, huge thanks to everybody using Leaflet. Keep creating great maps!</p>
<p><strong>Note to plugin developers</strong>: we encourage you to upgrade your plugins to be compatible with the latest beta release. The 1.0 API is pretty stable at this point and many users are starting to use the beta version in production. Additionally, as 1.0 final release approaches, we want to get more serious about the quality of plugins that get <a href="https://leafletjs.com/plugins.html">on the official list</a>, making sure they’re maintained and compatible with recent Leaflet releases.</p>
<p>Best,
Iván & Vladimir & Yohan.</p>
Leaflet 0.7.5 Release
2015-09-01T00:00:00+00:00
https://leafletjs.com/2015/09/01/leaflet-0.7.4-released
<p>While the Leaflet development team is busy with the 1.0 betas, there have been a few bugs affecting 0.7.3, important enough to spend some effort in porting a fix back. They are not much, though:</p>
<ul>
<li>Workarounds for issues derived from new browsers (touch-capable browsers, tile loading in recent Chrome)</li>
<li>Backport fixes for styling and events for canvas-based vector layers</li>
<li>Fix edge cases involving <code class="language-plaintext highlighter-rouge">maxZoom</code>, <code class="language-plaintext highlighter-rouge">minZoom</code>, <code class="language-plaintext highlighter-rouge">maxNativeZoom</code> on tile layers and popup events</li>
<li>Revert a regression bug in 0.7.4 which conflicted with marker clusters</li>
</ul>
<p>The detailed list of changes can be found <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#074-sep-01-2015">in the changelog</a></p>
<p>The fact that it has been over <em>a year and half</em> since the last stable release should be a testament of the quality and stability of the Leaflet API. If you think that development of Leaflet 1.0 is taking a long time, remember that we want to keep the same level of quality for the final 1.0 release.</p>
<p>The 0.7.x releases will not implement new features. Stay tuned for more news on the 1.0 beta releases instead!</p>
<h3 id="get-the-update">Get the update</h3>
<p>Developers using Leaflet 0.7.3 are advised to upgrade to 0.7.5 to prevent problems arising from modern browsers.</p>
<p>The release is also available through NPM, Bower, <a href="http://cdn.leafletjs.com/downloads/leaflet-0.7.5.zip">direct download</a>, or through our CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
</code></pre></div></div>
Announcing Leaflet 1.0 beta 1
2015-07-15T00:00:00+00:00
https://leafletjs.com/2015/07/15/leaflet-1.0-beta1-released
<p>Over the past year, we set out on an ambitious quest to implement pretty much all the features Leaflet users have been asking for years, while heavily focusing on performance, code cleanup and stabilizing the API. It was an extremely challenging road with many bumps, but now we’re finally approaching the finish line.</p>
<p>Today, I’m happy and proud to announce the release of <em>Leaflet 1.0 beta 1</em>, our first formal release after more than a year of work and a thousand commits by 36 contributors.</p>
<h3 id="whats-new">What’s new</h3>
<p>1.0 will be the best Leaflet release ever, bringing a <em>huge</em> amount of improvements and bugfixes. Highlights of the release include:</p>
<ul>
<li><em>huge</em> performance improvements, especially for vector layers</li>
<li>flyover animations (zooming and panning in a curve with <code class="language-plaintext highlighter-rouge">map.flyTo</code>)</li>
<li>fractional zoom level support (<code class="language-plaintext highlighter-rouge">map.setZoom(12.34)</code>)</li>
<li>much nicer tile loading with less flickering</li>
<li>custom pane management (including multiple vector layer panes)</li>
<li>better support for non-standard projections</li>
<li>more accessibility features</li>
<li>lots of bugfixes and stability improvements</li>
</ul>
<p>A much more detailed list of changes can be found <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">in the changelog</a> (beware, it’s a long read).</p>
<p><img src="https://camo.githubusercontent.com/07c492b230f1a3762118eaf457f0cc182fb0a98d/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f32353339352f313936353934392f32613934343166342d383263312d313165332d393836372d6230343033663266643966372e676966" alt="" /></p>
<h3 id="beta-cycle-and-upgrading">Beta cycle and upgrading</h3>
<p>The release sports a number of minor breaking API changes, and some of the plugins will have to be updated. To make the upgrade less painful, we’re doing a short beta cycle before the final 1.0 to allow users and plugin developers to catch up to the changes while we find and fix remaining issues.</p>
<p>A lot of effort since the last stable release has been put into refactoring. Many changes that we made are not visible to users, but make the source code much simpler and easier to understand and also open up many new possibilities for our wonderful community of plugin developers. Basically, half of Leaflet code was fully rewritten under the hood, and now the codebase is ready for some pretty extreme extensions (who just said “rotation” and “WebGL”?).</p>
<p>We plan to write a comprehensive 1.0 upgrade guide before the release. Meanwhile, if something breaks after you upgrade to 1.0-beta, please look through the changelog. If you can’t find the corresponding breaking change, please file a GitHub issue.</p>
<p>The API reference for 1.0 is temporarily <a href="http://mourner.github.io/Leaflet/reference.html">available here</a>. It’s built from Leaflet <code class="language-plaintext highlighter-rouge">gh-pages-master</code> branch — fixes and additions are welcome!</p>
<h3 id="get-the-new-release">Get the new release</h3>
<p>Test out the new release on your app, and help us catch remaining issues to bring the final 1.0 close to perfection!</p>
<p>You can use our CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
</code></pre></div></div>
<p>The release is also available through NPM, Bower, and <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-beta.1.zip">GitHub download</a>.</p>
<h3 id="thank-you">Thank you</h3>
<p>I’m incredibly thankful to everyone who made this release possible — by using the library, spreading the word about it, reporting issues and sending your contributions. Your help is invaluable!</p>
<p>Special thanks to <a href="https://github.com/IvanSanchez">Iván Sánchez</a>, <a href="https://github.com/yohanboniface">Yohan Boniface</a>, <a href="https://github.com/jfirebaugh">John Firebaugh</a>, <a href="https://github.com/danzel">Dave Leaver</a>, <a href="https://github.com/patrickarlt">Patrick Arlt</a>, <a href="https://github.com/perliedman">Per Liedman</a>, <a href="https://github.com/Jakobud">Jake Wilson</a> and <a href="https://github.com/snkashis">Steve Kashishian</a> for lots of amazing contributions and support throughout the last year. All these people are now a part of the core Leaflet team. Keep’em coming!</p>
<p><img src="https://www.reactiongifs.com/r/msy.gif" alt="" /></p>
<p>Love,<br />
Vladimir.</p>
Leaflet is Alive and Kicking, Stay Tuned for 1.0!
2015-07-01T00:00:00+00:00
https://leafletjs.com/2015/07/01/leaflet-is-alive-and-kicking
<p>I know this blog hasn’t been updated for a long time — 1.5 years actually! But that’s just because I’m a lazy blogger, and there has been <em>a lot</em> going on with Leaflet during this time despite the lack of blog posts and major releases.</p>
<p>We’re on the finishing line of releasing Leaflet 1.0 — the biggest and greatest Leaflet release <em>ever</em>. The latest stable version, 0.7.3, is already perfect, so you won’t believe how much awesome stuff we’ve managed to pack into the upcoming release — 914 commits later! But I’ll leave that for a separate <code class="language-plaintext highlighter-rouge">1.0-beta1</code> blog post after we fix <a href="https://github.com/Leaflet/Leaflet/pull/3307">that one last issue</a>.</p>
<p>Meanwhile, I’m happy to present you the new redesigned <a href="https://leafletjs.com/">Leaflet website</a>! Now finally mobile-friendly, simple, clean, minimal and modern, just like the library itself. Also notice the floating menu when scrolling down the <a href="/reference.html">Docs</a> and <a href="/plugins.html">Plugins</a> pages, a highly requested feature that’ll make navigation much easier. Big thanks to <a href="https://github.com/rowanhogan">Rowan Hogan</a> for the help with the new design!</p>
<p>P.S. I recently made a quirky 13-minute video for the <a href="http://www.geospatialworldforum.org/">Geospatial World Forum</a>, sharing the fun story behind Leaflet and how it became what it is today. Watch it and share it with your geofriends so that we can make the GIS world fun again!</p>
<p>Love,<br />
Vladimir.</p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/NLbyHffKQuU" frameborder="0" allowfullscreen=""></iframe>
Leaflet 0.7 Release, MapBox and Plans for Future
2013-11-18T00:00:00+00:00
https://leafletjs.com/2013/11/18/leaflet-0-7-released-plans-for-future
<p><em>Leaflet 0.7 Released — with IE11 touch support, upscaling tiles and tons of other improvements and bugfixes! Meanwhile, I’ve joined the MapBox team full-time…</em></p>
<p>After another 5 months of active development with <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2013-06-27&to=2013-11-18&type=c">lots of contributors involved</a>, I’m happy to announce the <strong>release of Leaflet 0.7</strong> stable.</p>
<p>This is a bugfix-heavy release — as Leaflet becomes more and more stable feature-wise, the focus shifts towards stability, usability and API improvements over new features. I’ve also been holding back some of the planned deep refactorings (which I’ll talk about later in the post) until 0.7 is released, so that the heavy risky stuff is done at the beginning of the release cycle, leaving plenty of room to catch bugs and incompatible changes that can unintentionally break existing apps.</p>
<h3 id="joining-mapbox">Joining MapBox</h3>
<p>In other news, I <a href="https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/">joined the MapBox team full-time</a>. This is extremely exciting for me, as this was my dream job for quite a while — <a href="https://www.mapbox.com">MapBox</a> have changed the world of interactive mapping forever with all their amazing work, having some of the greatest geomapping engineers and designers of the world working together, pushing the boundaries of what’s possible and inspiring others every day.</p>
<p>For Leaflet, this can only mean very good things — much more time on Leaflet development, more enthusiasm, more play, more crazy experiments with maps (like <a href="https://www.mapbox.com/blog/dynamic-hill-shading/">this one</a>), and lots of learning. I’m now one of the happiest map geeks ever. Stay tuned for tons of awesome!</p>
<h3 id="07-changes">0.7 changes</h3>
<p>You can check out the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#07-dev-master">detailed changelog</a> of what’s already done over the recent months for 0.7 (about 90 improvements and bugfixes), but I’d like to mention some highlights:</p>
<ul>
<li>Added the ability to <strong>upscale tiles</strong> to higher zoom levels (e.g. have zoom 19-20 when the source has 18 max).</li>
<li>Added support for <strong>IE11 touch devices</strong>. MS unexpectedly broke their pointer API compatibility between Developer Preview and final IE11 release, and we eventually rewrote quite a bit of code to make everything work smoothly across all IE versions (both desktop & mobile), fixing a bunch of IE10 bugs along the way as well.</li>
<li>Officially <strong>dropped IE6 support</strong> (nobody cares anyway) and cleaned up/fixed IE7-8 styles.</li>
<li>Dropped the need for <strong>IE conditional comment</strong> when including Leaflet, making the snippet much simpler — all IE7/8-specific styles got simplified and moved to the main <code class="language-plaintext highlighter-rouge">leaflet.css</code> file.</li>
<li>Fixed an <strong>obscure iOS7 memory leak</strong> that crashed Safari when you tried to create several thousands of layers (e.g. markers for clustering). I still don’t understand why it happens, but we managed to fix it with a bit of trickery.</li>
<li>Fixed a critical <strong>Chrome for Android</strong> bug that made the tiles disappear after zooming on some devices.</li>
<li>Removed some <strong>Earth-related hardcode</strong> in TileLayer implementation to make it easier for plugins like Proj4Leaflet to handle complex projections without horrible hacks. Some other work in this direction to follow in 0.8.</li>
<li>Improved <strong>panning performance</strong> on complex pages with significant number of elements — we found out that simple things like setting a different cursor to <code class="language-plaintext highlighter-rouge">document</code> (for a “grabbing” hand) caused noticeable performance hit on some browsers (Chrome in particular).</li>
<li><strong>Changed the way maxBounds works</strong>, not enforcing a derived <code class="language-plaintext highlighter-rouge">minZoom</code> from it but restricting panning across lower zoom levels, along with some tricks to make it play better with panning inertia or offset zooming, etc.</li>
</ul>
<h3 id="plans-for-08">Plans for 0.8</h3>
<p>There are several big undertakings in refactoring Leaflet that I’d want to switch to immediately after releasing 0.7 — I’ve been holding them off for too long, and they’ll be extremely beneficial for plugin and Leaflet-based API authors. Some of them are already in progress.</p>
<ul>
<li>Refactoring the <strong>layers</strong> architecture. Currently there’s a lot of duplication of logic across implementation of different layers (map, markers, vector layers, etc.), specifically event handling, zoom animation logic, zIndex and pane handling (what appears on top of what etc.). Making the code consistent, more universal and shared across different layers will make it much easier to customize layers and make your own (e.g. integrate d3, etc.)</li>
<li>Splitting the huge TileLayer implementation into <strong>GridLayer and TileLayer</strong>, separating image tiles-related logic and grid-logic that will make other grid-like layer implementations (e.g. UTFGrid interaction or tiled GeoJSON) much simpler.</li>
<li>Refactoring <strong>zoom animation logic</strong> to make the long-awaited Easey-style animations (zoom-panning between points) possible.</li>
<li>Refactoring <strong>projections</strong> code to make it easier to set up flat maps and weird projections and customize how Leaflet handles them.</li>
<li>Refactoring the <strong>vector layers</strong> code to make it possible to use different rendering backends (Canvas, SVG, etc.) for different layers on the same map and switch between them easily. This will also open it up for interesting extensions, like indexing layers with <a href="https://github.com/mourner/rbush">RBush</a> for fast interaction features.</li>
</ul>
<p>While it’s an ambitious plan and it may take more than one stable release, finishing all those refactorings will mean that Leaflet is getting ready for a 1.0 release.</p>
<p>Another direction I’d like to focus on after releasing 0.7 is <strong>website and documentation improvements</strong>. First, Leaflet is begging for <strong>more step-by-step tutorials</strong> (with more advanced features like custom layers, custom controls, etc.), and I’d love to do a docs/tutorials sprint some time in future. Second, the presentation could be significantly improved — adding a prominent visual <strong>showcase</strong> or app gallery, making Leaflet users more prominent with some logos and quotes/testimonials, and updating the layout/design for a more stylish, clean look, etc.</p>
<p>Hope that gives a good glimpse of the stuff to expect from Leaflet in near future, and don’t hesitate to ask any questions in comments — I’ll be happy to answer!</p>
<p>Grab the CDN links or downloads for the new release on the <a href="../../../download.html">download page</a> as always. Be sure to try it out on your apps and report any regressions so that we can patch them up immediately. And lets make some nice Twitter buzz about the release as usual!</p>
<p>To all the people wo’ve been involved in Leaflet contributions, bug reports, mailing list, Twitter buzz, making awesome apps and spreading the word about Leaflet — thank you! You are the most awesome community ever.</p>
<p>Cheers,<br />
Vladimir.</p>
Leaflet Plugin Authoring Guide
2013-06-28T00:00:00+00:00
https://leafletjs.com/2013/06/28/leaflet-plugin-authoring-guide
<p>One of the greatest things about Leaflet is its powerful plugin ecosystem.
The <a href="https://leafletjs.com/plugins.html">Leaflet plugins page</a> lists dozens of awesome plugins, and more are being added every week.</p>
<p>This guide lists a number of best practices for publishing a Leaflet plugin that meets the quality standards of Leaflet itself. Also available <a href="https://github.com/Leaflet/Leaflet/blob/main/PLUGIN-GUIDE.md">in the repo</a>.</p>
<h3 id="presentation">Presentation</h3>
<h4 id="repository">Repository</h4>
<p>The best place to put your Leaflet plugin to is a separate <a href="http://github.com">GitHub</a> repository.
If you create a collection of plugins for different uses,
don’t put them in one repo —
it’s usually easier to work with small, self-contained plugins in individual repositories.</p>
<h4 id="demo">Demo</h4>
<p>The most essential thing to do when publishing a plugin is to include a demo that showcases what the plugin does —
it’s usually the first thing people will look for.</p>
<p>The easiest way to put up a demo is using <a href="http://pages.github.com/">GitHub Pages</a>.
A good <a href="https://help.github.com/articles/creating-project-pages-manually">starting point</a> is creating a <code class="language-plaintext highlighter-rouge">gh-pages</code> branch in your repo and adding an <code class="language-plaintext highlighter-rouge">index.html</code> page to it —
after pushing, it’ll be published as <code class="language-plaintext highlighter-rouge">http://<user>.github.io/<repo></code>.</p>
<h4 id="readme">Readme</h4>
<p>The next thing you need to have is a descriptive <code class="language-plaintext highlighter-rouge">README.md</code> in the root of the repo (or a link to a website with a similar content).
At a minimum it should contain the following items:</p>
<ul>
<li>name of the plugin</li>
<li>a simple, concise description of what it does</li>
<li>requirements
<ul>
<li>Leaflet version</li>
<li>other external dependencies (if any)</li>
<li>browser / device compatibility</li>
</ul>
</li>
<li>links to demos</li>
<li>instructions for including the plugin</li>
<li>simple usage code example</li>
<li>API reference (methods, options, events)</li>
</ul>
<h4 id="license">License</h4>
<p>Every open source repository should include a license.
If you don’t know what open source license to choose for your code,
<a href="http://opensource.org/licenses/MIT">MIT License</a> and <a href="http://opensource.org/licenses/BSD-2-Clause">BSD 2-Clause License</a> are both good choices.
You can either put it in the repo as a <code class="language-plaintext highlighter-rouge">LICENSE</code> file or just link to the license from the Readme.</p>
<h3 id="code">Code</h3>
<h4 id="file-structure">File Structure</h4>
<p>Keep the file structure clean and simple,
don’t pile up lots of files in one place —
make it easy for a new person to find their way in your repo.</p>
<p>A barebones repo for a simple plugin would look like this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>my-plugin.js
README.md
</code></pre></div></div>
<p>An example of a file structure for a more sophisticated plugin:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/src JS source files
/dist minified plugin JS, CSS, images
/spec test files
/examples HTML examples of plugin usage
README.md
LICENSE
package.json
</code></pre></div></div>
<h4 id="code-conventions">Code Conventions</h4>
<p>Everyone’s tastes are different, but it’s important to be consistent with whatever conventions you choose for your plugin.</p>
<p>For a good starting point, check out <a href="https://github.com/airbnb/javascript">Airbnb JavaScript Guide</a>.
Leaflet follows pretty much the same conventions
except for using smart tabs (hard tabs for indentation, spaces for alignment)
and putting a space after the <code class="language-plaintext highlighter-rouge">function</code> keyword.</p>
<h4 id="plugin-api">Plugin API</h4>
<p>Never expose global variables in your plugin.<br />
If you have a new class, put it directly in the <code class="language-plaintext highlighter-rouge">L</code> namespace (<code class="language-plaintext highlighter-rouge">L.MyPlugin</code>).<br />
If you inherit one of the existing classes, make it a sub-property (<code class="language-plaintext highlighter-rouge">L.TileLayer.Banana</code>).<br />
If you want to add new methods to existing Leaflet classes, you can do it like this: <code class="language-plaintext highlighter-rouge">L.Marker.include({myPlugin: …})</code>.</p>
<p>Function, method and property names should be in <code class="language-plaintext highlighter-rouge">camelCase</code>.<br />
Class names should be in <code class="language-plaintext highlighter-rouge">CapitalizedCamelCase</code>.</p>
<p>If you have a lot of arguments in your function, consider accepting an options object instead (putting default values where possible so that users don’t need specify all of them):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// bad
marker.myPlugin('bla', 'foo', null, {}, 5, 0);
// good
marker.myPlugin('bla', {
optionOne: 'foo',
optionThree: 5
});
</code></pre></div></div>
<p>And most importantly, keep it simple. Leaflet is all about <em>simplicity</em>.</p>
<p>Cheers,<br />
Vladimir.</p>
Leaflet 0.6 Released, Code Sprint in DC with MapBox
2013-06-26T00:00:00+00:00
https://leafletjs.com/2013/06/26/leaflet-0-6-released-dc-code-sprint-mapbox
<p><em>Leaflet 0.6 released — with nicer controls, better usability and tons of API improvements and various bugfixes — more than 120 changes! The first ever Leaflet Code Sprint happening in Washington, DC with the MapBox team…</em></p>
<p>After 5 months of active development with <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2013-01-18&to=2013-06-26&type=c">36 contributors involved</a> since the previous major version, today I’m excited to finally announce the <strong>release of Leaflet 0.6</strong> stable.</p>
<p>0.6 highlights include nicer controls, lots of interaction usability improvements, many new API methods, events and options, ability to save layers as <a href="http://en.wikipedia.org/wiki/GeoJSON">GeoJSON</a>, much better test infrastructure and TONS of bugfixes that made Leaflet significantly more reliable. Checkout the huge detailed list of changes (<strong>120+ total</strong>!) <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">in the changelog</a>. The <a href="../../../reference.html">API reference</a> was also updated to reflect all these changes.</p>
<p>The final push for the release (last 2 days) was a part of the first ever <strong>Leaflet Code Sprint</strong>, organized in Washington DC by the amazing <a href="http://mapbox.com">MapBox</a>, a company responsible for perhaps the greatest innovations and awesome tools in the geospatial world of recent years, now <a href="mapbox.com/blog/mapbox-js-with-leaflet/">using Leaflet for its JS API</a> too. The sprint will go on for a week and there are many more awesome improvements to come in upcoming days (and lots of partying as well).</p>
<p>On a related note, even GitHub itself is now <a href="https://github.com/blog/1541-geojson-rendering-improvements">using Leaflet for GeoJSON visualizations</a>, along with <a href="github.com/Leaflet/Leaflet.markercluster">Leaflet.markercluster</a> & MapBox tiles! How cool is that?</p>
<p>Special thanks go to <a href="http://universalmind.com/">Universal Mind</a>, my awesome employer and sponsor of Leaflet development for the past 5 months, to the most active contributors — <a href="https://github.com/jfirebaugh">John Firebaugh</a> and <a href="https://github.com/tmcw">Tom MacWright</a> of <a href="http://mapbox.com">MapBox</a>, <a href="https://github.com/danzel">Dave Leaver</a> and <a href="https://github.com/jacobtoye">Jacob Toye</a> of <a href="http://www.smartrak.co.nz/">Smartrak</a>, <a href="https://github.com/snkashis">Steve Kashishian</a> of <a href="http://www.firstmilegeo.com/">First Mile Geo</a>, and to everyone else involved in contributions, bug reports, mailing list, Twitter, making awesome apps, etc. You’re such an amazing community! I’m really happy to be a part of it.</p>
<p>Grab the CDN links or downloads for the new release on the <a href="../../../download.html">download page</a> as always. Enjoy! And be sure try it out and report any regressions in your apps so that we can patch them up immediately.</p>
<p><strong>update</strong> (June 27): 0.6.1 hotfix released with a couple of regressions fixed (particularly the one with FF scroll-zooming too fast).<br />
<strong>update</strong> (June 28): 0.6.2 hotfix released with a couple more minor issues fixed.<br />
<strong>update</strong> (July 17): 0.6.3 released with lots of regressions and bugs fixed.<br />
<strong>update</strong> (July 25): 0.6.4 released with a fix to 0.6.3 regression.</p>
<p>P.S. Everyone who tweets/posts about the new Leaflet release or why he loves Leaflet over the next few days will get a karma boost of over 9000 points. I heard that from a passing monk in Georgetown yesterday, true story!</p>
<p>Cheers,<br />
Vladimir, Leaflet creator and maintainer.</p>
Leaflet.draw 0.2 Released
2013-02-20T00:00:00+00:00
https://leafletjs.com/2013/02/20/guest-post-draw
<p><em>This is a guest post from Jacob Toye, an active Leaflet contributor and also the author of the most sophisticated vector drawing and editing plugin out there, which is presented in this post.</em></p>
<p><a href="https://github.com/Leaflet/Leaflet.draw/">Leaflet.draw</a> was born from the need to provide users with the ability draw polygons on the map. Leaflet already provided a very nice way of editing existing polylines and polygons. The logical next step was to expand on this functionality to allow the creation of these layers, and ultimately the other vector layers.</p>
<p>Upon release the immediate response from the Leaflet community was very positive. It became clear that the next step would be progressing this tool to a state where users could edit and delete shapes in addition to creating them. This is ultimately what Leaflet.draw 0.2 set out to do.</p>
<p>After a few months of off and on development, with most of this spare time kindly sponsored by my employer <a href="http://www.smartrak.co.nz" title="GPS Fleet Management solutions" target="_blank">Smartrak</a>, we proudly present Leaflet.draw 0.2 – your one stop plugin for drawing, editing and deleting vectors and markers on Leaflet maps. :)</p>
<p><em>Note from Vladimir: the polyline/polygon editing functionality from Leaflet core has been moved into this plugin where it fits much better. The plugin in turn has moved into <a href="https://github.com/Leaflet">Leaflet organization on GitHub</a> and is now officially supported by the Leaflet development team. Note that version 0.2 currently depends on Leaflet master (in-progress development version) to work.</em></p>
<p>You can download the latest version from the <a href="https://github.com/Leaflet/Leaflet.draw/" target="_blank">github repo</a>. Please report any bugs you come across on the <a href="https://github.com/Leaflet/Leaflet.draw/issues" target="_blank">issues page</a>.</p>
<div id="map" class="map" style="height: 288px"></div>
<h3 id="plugin-features">Features</h3>
<p>Leaflet.draw is designed to not only be easy for end users to use, but also for developers to integrate.</p>
<ul>
<li>Draw shapes on your map with easy to use drawing tools.</li>
<li>Edit and delete vectors and markers.</li>
<li>Super customizable:
<ul>
<li>Customize the styles of each shape to fit in with your maps theme.</li>
<li>Pick and choose the which tools you want to use.</li>
<li>Roll your own by simply using the drawing and editing handlers.</li>
</ul>
</li>
<li>Event based system allows you to perform any necessary actions when shapes are created, edited or deleted.</li>
</ul>
<h3 id="how-to-use">How to use</h3>
<p>Leaflet.draw is very simple to drop into you Leaflet application. The following example will add both the draw and edit toolbars to a map:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([175.30867, -37.77914], 13);
// add an OpenStreetMap tile layer
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Initialize the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialize the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
</code></pre></div></div>
<h4 id="handling-newly-created-layers">Handling newly created layers</h4>
<p>Once you have successfully added the Leaflet.draw plugin your map you will want to respond to the different actions users can trigger.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
}
// Do whatever else you need to. (save to db, add to map etc)
drawnItems.addLayer(layer);
});
map.on('draw:edited', function () {
// Update db to save latest changes.
});
map.on('draw:deleted', function () {
// Update db to save latest changes.
});
</code></pre></div></div>
<p>See the <a href="https://github.com/Leaflet/Leaflet.draw" target="_blank">Leaflet.draw README</a> for more details on how to configure the plugin.</p>
<h3 id="thanks">Thanks</h3>
<p>First and foremost I would like to thank my employer <a href="http://www.smartrak.co.nz" title="GPS Fleet Management solutions" target="_blank">Smartrak</a>. Without their attitude to open source software I would not have had the time to complete this plugin.</p>
<p>The Leaflet developer community have been great in supporting this plugin through inspiration, pull requests and issue reports. Special thanks to: <a href="https://github.com/mourner" title="@mourner" target="_blank">@mourner</a>, <a href="https://github.com/danzel" title="@danzel" target="_blank">@danzel</a>, <a href="https://github.com/brunob" title="@brunob" target="_blank">@brunob</a>, <a href="https://github.com/tnightingale" title="@tnightingale" target="_blank">@tnightingale</a>, <a href="https://github.com/Starefossen" title="@Starefossen" target="_blank">@Starefossen</a>, and <a href="https://github.com/shramov" title="@shramov" target="_blank">@shramov</a>.</p>
<h3 id="closing">Closing</h3>
<p>I’ve had a great time implementing this plugin. I hope you enjoy using it. If you have a question or just want to say hi, send me an email at <a href="mailto:jacob.toye@gmail.com">jacob.toye@gmail.com</a>.</p>
<p>Cheers,
Jacob Toye</p>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.ie.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.ie.css" />
<![endif]-->
<script src="https://leaflet.github.io/Leaflet.draw/libs/leaflet/leaflet.js"></script>
<script src="https://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<style>
.leaflet-bar {
border: none;
}
</style>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([-37.77914, 175.30867], 16);
// add an OpenStreetMap tile layer
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Initialize the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialize the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var layer = e.layer;
if (e.layerType === 'marker') {
layer.bindPopup('A popup!');
}
// Do whatever else you need to. (save to db, add to map etc)
drawnItems.addLayer(layer);
});
</script>
Leaflet 0.5 Released
2013-01-17T00:00:00+00:00
https://leafletjs.com/2013/01/17/leaflet-0-5-released
<p>Rejoice, everyone — after 4.5 months of development with <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2012-08-30&to=2013-01-17&type=c">26 contributors involved</a> since the previous major release, I’m happy to announce the release of Leaflet 0.5 stable, hooray!</p>
<p>0.5 highlights include IE10 touch devices and Metro apps support, retina-enabled markers, a much better panning inertia implementation, hand cursors for dragging and a new zoom control design. But the real power of this release comes with about a hundred of subtle improvements and bugfixes, improving usability, performance and overall “feel” of browsing the map even further.</p>
<p>As always, you can find CDN links and downloads for the new release on the <a href="../../../download.html">download page</a>.</p>
<p>The huge detailed list of changes is documented in the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">changelog</a>. Be sure to read the “Breaking Changes” part of it before upgrading to avoid any issues! The <a href="../../../reference.html">API reference</a> was updated to accommodate all the changes too.</p>
<p>In other news, <a href="https://github.com/Leaflet/Leaflet">Leaflet repository</a> has moved to <a href="https://github.com/Leaflet">its own GitHub organization</a>, along with the two of the most important plugins — <a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet.markercluster</a> and <a href="https://github.com/Leaflet/Leaflet.draw">Leaflet.draw</a>. As some of you have noticed, this is one of the clues to a really nice upcoming announcement about Leaflet future — stay tuned. :)</p>
<p>Thanks to everyone! It’s absolutely breathtaking to see what the Leaflet community has achieved over the last months with all the contributions, amazing projects and demos, and I’m honestly proud to be a part of it.</p>
<p>P.S. I also heard in a dream that everyone who tweets about the new Leaflet release will get an incredible luck boost for the next month. Sounds like true to me.</p>
<p>Cheers,<br />
Vladimir, Leaflet creator and maintainer.</p>
Leaflet 0.4.5 Bugfix Release and Plans for 0.5
2012-10-25T00:00:00+00:00
https://leafletjs.com/2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5
<h3 id="045-release">0.4.5 release</h3>
<p>While we continue working on the next major release (0.5), today we decided to release <strong>Leaflet 0.4.5</strong>. It contains only one small but important bugfix for <strong>wonky zoom animation</strong> on upcoming <strong>Chrome 23</strong> (currently in beta and to be released in a couple of weeks) and <strong>Internet Explorer 10</strong> (that will eventually hit Windows 7 in addition to Windows 8).</p>
<p>Everyone is encouraged to upgrade (before Chrome 23 turns stable). As always, you can find CDN links and downloads for the new release on the <a href="../../../download.html">download page</a>.</p>
<h3 id="plans-for-05">Plans for 0.5</h3>
<p>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.</p>
<p>Highlights of things already implemented in the <code class="language-plaintext highlighter-rouge">master</code> branch include touch interaction support for <strong>IE10 touch devices and Metro apps</strong> and a more smooth and responsive panning inertia. Follow the <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md">full changelog</a> for more details.</p>
<p>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.</p>
<p>The same goes for projection-related code to make using Leaflet with non-standard projections easier, including plain projections for game and indoor maps. Thanks to these changes, in addition to making advanced GIS folks happier, we’ll see much more awesome Leaflet projects like <a href="http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim">interactive Skyrim map on IGN</a> or <a href="http://www.wowhead.com/map">World of Warcraft map on Wowhead</a>.</p>
<p>Another important task for upcoming weeks is working more closely with plugin developers. In particular, one of the areas of focus will be the <a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a> plugin that will soon become a state-of-the-art map vector drawing/editing solution, just as Dave’s <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> became the best marker clustering solution among all mapping platforms out there.</p>
<p>The current plan is to release 0.5 stable sometime in mid-November. Stay tuned!</p>
<h3 id="contributing-to-leaflet">Contributing to Leaflet</h3>
<p>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 <a href="https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md">Contributing to Leaflet</a> guide with best practices and advices — check it out!</p>
<p>Thanks to everyone! Leaflet has got quite an amazing community which makes me really proud. Keep it up!</p>
<p>Cheers,<br />
Vladimir, Leaflet author and maintainer.</p>
Leaflet.MarkerCluster 0.1 Released
2012-08-20T00:00:00+00:00
https://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released
<p><em>This is a guest post from Dave Leaver, an active Leaflet contributor (particularly, he implemented 0.4 zoom animation improvements) and also the author of the best marker clustering plugin out there, which is presented in this post.</em></p>
<p>Almost anyone who has a map with markers on it will eventually end up having those markers overlap. At my day job at <a href="http://www.smartrak.co.nz/" title="Smartrak GPS Fleet Tracking">Smartrak</a> we regularly have customers with thousands of points on the map. When you zoom it out, these markers all overlap and make the map look messy and crowded. There are also cases where the markers overlap even on the maximum zoom level, which makes interacting with them impossible. Also, having a large amount of markers on the map usually ends up lowering performance to an unacceptable level.</p>
<p>To improve this, many sites use marker clustering, a technique of grouping markers that are close to each other together on each zom level. One good example of this is <a href="http://www.redfin.com/homes-for-sale">Redfin</a>. We needed something like this, but in Leaflet. In the spirit of open source we developed and released our solution so that everyone can take advantage of it. So we proudly present <a href="https://github.com/leaflet/Leaflet.markercluster">Leaflet.MarkerCluster</a>.</p>
<div id="map" class="map" style="height: 320px"></div>
<h3 id="plugin-features">Features</h3>
<p>The clusterer has all sorts of great built in behaviour:</p>
<ul>
<li>Everything is brilliantly animated. As you zoom in and out you can logically see which clusters have become which markers.</li>
<li>It is very fast, so for example <a href="https://leaflet.github.com/Leaflet.markercluster/example/marker-clustering-realworld.50000.html">clustering 50,000 points</a> isn’t a problem. Also, all the heavy calculation happens on initial page load, and after this the map works smoothly.</li>
<li>Markers that don’t need clustering aren’t and will be visible at the relevant zoom levels.</li>
<li>When you mouse over a cluster the bounds of the marker within that cluster are shown.</li>
<li>Clicking a cluster will zoom you in to the bounds of its children.</li>
<li>At the bottom zoom level if there are still clusters you can click on them to “spiderfy” them, which makes interaction with individual markers within the cluster possible (based on <a href="https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet">jawj’s Overlapping MarkerSpidifer</a>).</li>
<li>Cluster and markers that are further than a screen width from the view port are removed from the map to increase performance.</li>
<li>As with core Leaflet, everything works on both mobile and desktop browsers and is tested all the way back to IE6.</li>
<li>Supports adding and removing markers after being added to the map (see Best Practices below!).</li>
<li>It is highly customizable, allowing you to easily change the appearance of clusters, disable certain features and add custom behavior on cluster interaction.</li>
</ul>
<h3 id="usage">Usage</h3>
<p>Using the Marker Clusterer is easy, just replace your existing <a href="../../../examples/layers-control.html">LayerGroup</a> usage with an <code class="language-plaintext highlighter-rouge">L.MarkerClusterGroup</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var markers = new L.MarkerClusterGroup();
markers.addLayer(L.marker([175.3107, -37.7784]));
// add more markers here...
map.addLayer(markers);
</code></pre></div></div>
<p>You can also use all of the <a href="../../../reference.html#featuregroup">FeatureGroup events</a> (and additionally <code class="language-plaintext highlighter-rouge">clusterclick</code>) for both individual markers and clusters.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>markers.on('clusterclick', function (a) { alert('Cluster Clicked'); });
markers.on('click', function (a) { alert('Marker Clicked'); });
</code></pre></div></div>
<h3 id="best-practices">Best Practices</h3>
<ul>
<li>To get the best performance from the clusterer, you should add all of your markers to it before adding it to the map (like we did in the example).</li>
<li>If you are going to move a marker that is in a L.MarkerClusterGroup you must remove it first, then move it, then re-add it. If you move it while it is in the MarkerClusterGroup we can’t track it and that marker will become lost.</li>
<li>Although the clusterer supports having markers added and removed from it while it is on the map it does not perform as well as when they are added while it is not on the map. If you need to do a large update to the markers in a <code class="language-plaintext highlighter-rouge">MarkerClusterGroup</code> you may want to remove it from the map, change the markers then re-add it.</li>
</ul>
<h3 id="get-it">Get It</h3>
<p>You can download the latest release on the <a href="https://github.com/leaflet/Leaflet.markercluster/downloads">github download page</a>.</p>
<h3 id="the-technical-bits">The Technical Bits</h3>
<p>The underlying clustering algorithm (<code class="language-plaintext highlighter-rouge">MarkerClusterGroup._cluster</code>) is plain greedy clustering.</p>
<div class="language-plaintext no-highlight highlighter-rouge"><div class="highlight"><pre class="highlight"><code>foreach marker
if there is a cluster within the clustering distance, join it.
else if there is an unclustered marker within the clustering distance, form a cluster with it.
</code></pre></div></div>
<p>The first clustering step we do for the maximum (bottom most) zoom level, we then cluster all of the resulting markers and clusters to generate the next zoom level up and so on until we have reached the top.
These clusters are stored in a tree (A cluster contains its child clusters) with good geospatial qualities. We use this tree to optimise identifying what markers and clusters are on screen at any particular zoom level.</p>
<h4 id="ldistancegrid">L.DistanceGrid</h4>
<p><code class="language-plaintext highlighter-rouge">L.DistanceGrid</code> provides some nice optimization when clustering (contributed by <a href="http://agafonkin.com/en/">Vladimir</a>, Leaflet maintainer).</p>
<p>To cluster the markers, we need to compare every marker with every other marker to try form a cluster.
To make this quicker, we need reduce the set of markers we need to compare with. <code class="language-plaintext highlighter-rouge">DistanceGrid</code> does this by putting all markers on a grid sized the same as the distance we need to search. Then, when looking for a marker to cluster with, we only need to look at markers in the grid square we are in and its immediate neighbours. This can be quite a big performance win as we only look at markers that we are likely to form a cluster with. (<a href="https://github.com/leaflet/Leaflet.markercluster/pull/29">check out the initial PR for numbers</a>)</p>
<h3 id="closing-words">Closing Words</h3>
<p>I hope you enjoy using the clusterer and get everything you want out of it. If you do use it in a public site please <a href="mailto:danzel@localhost.geek.nz">throw me an email</a> so I can check it out and potentially link it on the github site.</p>
<p>If you have any issues also please log a bug on <a href="https://github.com/leaflet/Leaflet.markercluster">the github page</a>.</p>
<p>Enjoy!<br />
Dave Leaver.</p>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.ie.css" /><![endif]-->
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
<script>
var mapbox = new L.TileLayer(MB_URL, {maxZoom: 18, attribution: MB_ATTR, id: 'examples.map-i875mjb7'}),
latlng = new L.LatLng(-37.820, 175.217);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [mapbox]});
map.attributionControl.addAttribution("Points © 2012 LINZ");
var markers = new L.MarkerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>
Leaflet 0.4.3 and a New Tutorial
2012-08-07T00:00:00+00:00
https://leafletjs.com/2012/08/07/leaflet-0-4-3-and-a-new-tutorial
<p>Following the <a href="leaflet-0-4-released.html">Leaflet 0.4 release</a>, there were several minor bugfix releases over the past week, with Leaflet 0.4.3 released today. They contain fixes for some bugs that were discovered and also bring some improvements to the new GeoJSON API to make it even more flexible — see the changelog below.</p>
<p>I’ve also written <a href="../../../examples/choropleth.html">a new tutorial</a>, inspired by the <a href="http://www.texastribune.org/library/data/us-senate-runoff-results-map/">Texas Tribune US Senate Runoff Results map</a> by <a href="http://www.texastribune.org/about/staff/ryan-murphy/">Ryan Murphy</a> (also powered by Leaflet). It will show you step-by-step how to create a beautiful interactive <a href="http://en.wikipedia.org/wiki/Choropleth_map">choropleth map</a> of US States Population Density with the help of GeoJSON and custom controls, and hopefully convince more major news and government websites to switch to Leaflet. :)</p>
<p>Grab the new Leaflet 0.4.3 at the <a href="../../../download.html">download page</a>. Enjoy!</p>
<p><strong>update</strong>: IE9 regression was discovered in 0.4.3, so I had to release 0.4.4 with a fix. Sorry!</p>
<h3 id="043-august-7-2012">0.4.3 (August 7, 2012)</h3>
<h4 id="improvements">Improvements</h4>
<ul>
<li>Improved <code class="language-plaintext highlighter-rouge">GeoJSON</code> <code class="language-plaintext highlighter-rouge">setStyle</code> to also accept function (like the corresponding option).</li>
<li>Added <code class="language-plaintext highlighter-rouge">GeoJSON</code> <code class="language-plaintext highlighter-rouge">resetStyle(layer)</code>, useful for resetting hover state.</li>
<li>Added <code class="language-plaintext highlighter-rouge">feature</code> property to layers created with <code class="language-plaintext highlighter-rouge">GeoJSON</code> (containing the GeoJSON feature data).</li>
<li>Added <code class="language-plaintext highlighter-rouge">FeatureGroup</code> <code class="language-plaintext highlighter-rouge">bringToFront</code> and <code class="language-plaintext highlighter-rouge">bringToBack</code> methods (so that they would work for multipolys).</li>
<li>Added optional <code class="language-plaintext highlighter-rouge">animate</code> argument to <code class="language-plaintext highlighter-rouge">Map</code> <code class="language-plaintext highlighter-rouge">invalidateSize</code> (by <a href="https://github.com/ajbeaven">@ajbeaven</a>). <a href="https://github.com/Leaflet/Leaflet/pull/857">#857</a></li>
</ul>
<h4 id="bugfixes">Bugfixes</h4>
<ul>
<li>Fixed a bug where tiles sometimes disappeared on initial map load on Android 2/3 (by <a href="https://github.com/danzel">@danzel</a>). <a href="https://github.com/Leaflet/Leaflet/pull/868">#868</a></li>
<li>Fixed a bug where map would occasionally flicker near the border on zoom or pan on Chrome.</li>
<li>Fixed a bug where <code class="language-plaintext highlighter-rouge">Path</code> <code class="language-plaintext highlighter-rouge">bringToFront</code> and <code class="language-plaintext highlighter-rouge">bringToBack</code> didn’t return <code class="language-plaintext highlighter-rouge">this</code>.</li>
<li>Removed zoom out on Win/Meta key binding (since it interferes with global keyboard shortcuts). <a href="https://github.com/Leaflet/Leaflet/issues/869">#869</a></li>
</ul>
<h3 id="042-august-1-2012">0.4.2 (August 1, 2012)</h3>
<ul>
<li>Fixed a bug where layers control radio buttons would not work correctly in IE7 (by <a href="https://github.com/danzel">@danzel</a>). <a href="https://github.com/Leaflet/Leaflet/pull/862">#862</a></li>
<li>Fixed a bug where <code class="language-plaintext highlighter-rouge">FeatureGroup</code> <code class="language-plaintext highlighter-rouge">removeLayer</code> would unbind popups of removed layers even if the popups were not put by the group (affected <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> plugin) (by <a href="https://github.com/danzel">@danzel</a>). <a href="https://github.com/Leaflet/Leaflet/pull/861">#861</a></li>
</ul>
<h3 id="041-july-31-2012">0.4.1 (July 31, 2012)</h3>
<ul>
<li>Fixed a bug that caused marker shadows appear as opaque black in IE6-8. <a href="https://github.com/Leaflet/Leaflet/issues/850">#850</a></li>
<li>Fixed a bug with incorrect calculation of scale by the scale control. <a href="https://github.com/Leaflet/Leaflet/issues/852">#852</a></li>
<li>Fixed broken L.tileLayer.wms class factory (by <a href="https://github.com/mattcurrie">@mattcurrie</a>). <a href="https://github.com/Leaflet/Leaflet/issues/856">#856</a></li>
<li>Improved retina detection for <code class="language-plaintext highlighter-rouge">TileLayer</code> <code class="language-plaintext highlighter-rouge">detectRetina</code> option (by <a href="https://github.com/sxua">@sxua</a>). <a href="https://github.com/Leaflet/Leaflet/issues/854">#854</a></li>
</ul>
<p>Sincerely, <br />
Vladimir Agafonkin, Leaflet maintainer.</p>
Leaflet 0.4 Released
2012-07-30T00:00:00+00:00
https://leafletjs.com/2012/07/30/leaflet-0-4-released
<p>After 5.5 months of development with <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2012-02-15&to=2012-07-30&type=c">33 contributors</a> involved since the previous stable release, I’m proud to announce the release of Leaflet 0.4! It comes with a simpler API and <em>lots</em> 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.</p>
<h3 id="simpler-api">Simpler API</h3>
<p>Leaflet 0.4 contains several API improvements that allow you to write simpler, terser code (<a href="http://jquery.com">jQuery</a>-like), while being backwards compatible with the previous approach (so that you can use both styles).</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.marker([51.5, -0.09])
.addTo(map)
.bindPopup('Hello world!')
.openPopup();
</code></pre></div></div>
<p>First, Leaflet methods now accept <a href="../../../reference.html#latlng">LatLng</a>, <a href="../../../reference.html#latlngbounds">LatLngBounds</a>, <a href="../../../reference.html#point">Point</a> and <a href="../../../reference.html#bounds">Bounds</a> objects in a simple array form, so you don’t need to always create them explicitly:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.panTo([50, 30]); // the same as:
map.panTo(new L.LatLng(50, 30));
</code></pre></div></div>
<p>Second, Map methods like <a href="../../../reference.html#map-addlayer">addLayer</a>, <a href="../../../reference.html#map-addcontrol">addControl</a>, <a href="../../../reference.html#map-openpopup">openPopup</a> got their counterparts from the other side:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>marker.addTo(map); // same as map.addLayer(marker)
control.addTo(map); // map.addControl(control)
popup.openOn(map); // map.openPopup(popup)
</code></pre></div></div>
<p>Along with the fact that all Leaflet methods that don’t explicitly return a value return the object itself, this allows for convenient method chaining.</p>
<p>Third, Leaflet classes now come with lowercase shortcuts (class factories) that allow you to create objects without the <code>new</code> keyword, which makes chained code look nicer:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.map('map').fitWorld(); // same as
(new L.Map('map')).fitWorld();
</code></pre></div></div>
<h3 id="notable-new-features">Notable New Features</h3>
<div id="map" class="map" style="height: 250px"></div>
<h4 id="improved-zoom-animation">Improved Zoom Animation</h4>
<p>Markers, popups, vector layers and image overlays were hidden during zoom in the previous version, but now (thanks to <a href="https://github.com/danzel">Dave Leaver</a>) they all have beautiful, smooth zoom animation unlike any other existing mapping libraries. Try zooming on the map above to see how it looks! If you have thousands of markers on a map though, you can turn off the marker animation if it gets slow with the Map’s <code class="language-plaintext highlighter-rouge">markerZoomAnimation</code> option.</p>
<p>In addition, now tiles won’t disappear if you zoom in or out more than once quickly.</p>
<h4 id="keyboard-navigation">Keyboard Navigation</h4>
<p>Leaflet maps got a nice accessibility boost in 0.4 with the new keyboard handler (contributed by <a href="https://github.com/ericmmartinez">Eric Martinez</a>), enabled by default. It allows users to navigate the map by using arrow keys for panning and <code>+/-</code> keys for zooming (after making the map focused either by tabbing to it or clicking on it). Try it on the map above, it feels very nice!</p>
<h4 id="panning-inertia">Panning Inertia</h4>
<p>Another nice improvement comes to the panning experience — now it has an inertial movement effect, where the map smoothly continues to move after a quick pan. Feels especially natural on touch devices — and it’s enabled by default too, try it now! It’s also highly configurable, allowing you to set the maximum speed of the effect, deceleration, and time threshold under which it triggers.</p>
<h4 id="pinch-zoom-on-android-4">Pinch-Zoom on Android 4</h4>
<p>In the previous Leaflet version, pinch-zoom only worked on iOS devices, but now it finally comes to Android! Works for Android 4+ not only in the stock browser, but also on Chrome and Firefox for Android.</p>
<h4 id="scale-control">Scale Control</h4>
<p>A simple, lightweight control that indicates the scale of the current map view in metric and/or imperial systems. As usual, you can customize its appearance with CSS. Take a look at the bottom left corner of the map above!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.control.scale().addTo(map);
</code></pre></div></div>
<h4 id="polyline-and-polygon-editing">Polyline and Polygon Editing</h4>
<p>Allows users to edit polylines and polygons with a simple, intuitive interface. Note that this feature will eventually be merged into <a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a> — an awesome plugin for drawing shapes by Jacob Toye.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>polygon.editing.enable();
</code></pre></div></div>
<h4 id="div-based-icons">Div-based Icons</h4>
<p>In addition to the image-based <a href="../../../reference.html#icon">Icon</a> class, Leaflet 0.4 gets a <a href="../../../reference.html#divicon">DivIcon</a> class for creating lightweight div-based markers (that can contain custom HTML and can be styled with CSS). For example, you can see them in action when editing polylines (the square handles), or in the <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> plugin I’ll talk about later (the colored clusters).</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.marker([50.505, 30.57], {
icon: L.divIcon({className: 'my-div-icon'})
}).addTo(map);
</code></pre></div></div>
<h4 id="rectangle-layer">Rectangle Layer</h4>
<p>Rectangle is a convenient shortcut for creating rectangular area layers. You could do this earlier with polygons, but this is easier:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);
</code></pre></div></div>
<h3 id="api-improvements">API improvements</h3>
<h4 id="geojson-api">GeoJSON API</h4>
<p><a href="../../../reference.html#geojson">GeoJSON</a> API was improved to be simpler and much more flexible. <a href="https://github.com/JasonSanford">Jason Sanford</a> wrote a <a href="../../../examples/geojson.html">great tutorial</a> that showcases the new API. The changes are not backwards-compatible though, so be sure to update your old code.</p>
<h4 id="icon-api">Icon API</h4>
<p><a href="../../../reference.html#icon">Icon</a> API was improved to be simpler and more flexible, and the changes are not backwards-compatible too (the old code can be updated very quickly though). Check out the updated <a href="../../../examples/custom-icons.html">Custom Icons tutorial</a>, or head straight to the <a href="../../../reference.html#icon">API docs</a>.</p>
<h4 id="control-api">Control API</h4>
<p>Custom Controls are much easier to create now — checkout the <a href="../../../reference.html#icontrol">API docs</a> that also have a simple example.</p>
<h4 id="better-events-api">Better Events API</h4>
<p><a href="https://github.com/Guiswa">Aaron King</a> brought some improvements to <a href="../../../reference.html#events">event methods</a>. <code class="language-plaintext highlighter-rouge">on</code> and <code class="language-plaintext highlighter-rouge">off</code> methods can now accept multiple event types at once as a string space-separated types:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.on('click dblclick moveend', doStuff);
</code></pre></div></div>
<p>Also, they can accept an object with types and listener functions as key/value pairs, like this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>marker.on({
click: onMarkerClick,
dragend: onMarkerDragEnd
});
</code></pre></div></div>
<p>Moreover, now if you only specify an event type to the <code class="language-plaintext highlighter-rouge">off</code> method, it will remove all listeners tied to this event.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.off('click');
</code></pre></div></div>
<h4 id="other-api-improvements">Other API Improvements</h4>
<p>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 <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#other-api-improvements">full changelog</a> for the complete list.</p>
<h3 id="performance-and-usability-improvements">Performance and Usability Improvements</h3>
<p>You may think that Leaflet is unbelievably fast already, but this version brings several performance improvements that make it even faster.</p>
<ul>
<li>Panning, map resizing and pinch-zoom performance was improved (some tricks behind this will be explained in a future blog post).</li>
<li>Updating and removing vector layers on the canvas backend (e.g. on Android 2) works many times faster.</li>
<li>Box shadows on controls were replaced with simple borders on mobile devices to improve performance.</li>
<li>Vector layers won’t flicker after each panning on iOS now.</li>
</ul>
<p>In addition, there are several usability improvements not already mentioned:</p>
<ul>
<li>Panning now works even if there are markers under the cursor (helps on crowded maps).</li>
<li>Popup appearance is slightly improved.</li>
<li>Tile layer now has <code>detectRetina</code> option that, when enabled, doubles the tile resolution for retina displays (contributed by <a href="https://github.com/Mithgol">Mithgol</a>) .</li>
</ul>
<h3 id="bugfixes">Bugfixes</h3>
<p>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.</p>
<p>Here’s <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#bug-fixes">a full list of bugfixes</a> in the changelog.</p>
<h3 id="upgrading-from-older-versions">Upgrading from older versions</h3>
<p>Besides the GeoJSON and Icon changes mentioned above, here’s a <a href="https://github.com/Leaflet/Leaflet/blob/main/CHANGELOG.md#other-breaking-api-changes">list of potentially breaking changes</a> — read it carefully when updating your code (shouldn’t take much time though).</p>
<p>Download options for Leaflet 0.4 (including the actual download, the CDN-hosted version, and instructions for building manually) are listed on the <a href="../../../download.html">download page</a>.</p>
<h3 id="code-stats">Code Stats</h3>
<p>I’m still committed to keeping Leaflet as small and lightweight as possible. Here’s a breakdown of the current size of the library:</p>
<ul>
<li>JavaScript: <strong>27 KB</strong> minified and gzipped (102 KB minified, 176 KB in source, 7578 lines of code)</li>
<li>CSS: <strong>1.8 KB</strong> gzipped (8 KB, 377 lines of code)</li>
<li>Images: <strong>10 KB</strong> (5 PNG images)</li>
</ul>
<h3 id="documentation-update">Documentation Update</h3>
<p>Until now, Leaflet API reference was incomplete. But for this release, enormous effort was put into making it 100% complete, up-to-date and generally the best API reference page you’ve ever seen. All remaining classes, methods, options, events and properties were carefully documented and more code examples added, and the docs will always be kept up-to-date from now on.</p>
<p>Besides, the design of the page was significantly improved — with better colors, font, spacing, hyphenation, manually adjusted column widths, etc. — lots of detail to make it beautiful and easy to read.</p>
<h3 id="plugins-page">Plugins Page</h3>
<p>Leaflet website now has an official <a href="../../../plugins.html">plugins page</a> that lists many Leaflet plugins created by the awesome Leaflet community, adding lots of great features and helping with service integration.</p>
<p>One plugin I’d like to mention is <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> by <a href="https://github.com/danzel">Dave Leaver</a>, currently the best marker clustering plugin I’ve ever seen among any mapping libraries — it’s fast, beautiful, provides smooth animations for clusters, includes a smart Google Earth-style solution for crowded markers on the last zoom level (by <a href="https://github.com/jawj/">George MacKerron</a>), can highlight the area covered by a cluster on hover, works well on mobile devices, and can be customized easily. I think we’ll cover this plugin in more detail in one of the next posts.</p>
<p>Another plugin to note is <a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a> by <a href="https://github.com/jacobtoye">Jacob Toye</a>, inspired by a similar plugin by <a href="https://github.com/brunob">Bruno B</a>. It enables drawing features like polylines, polygons, rectangles, circles and markers through a very nice user-friendly interface with icons and hints. Other editing-related code will probably move into this plugin in future.</p>
<p>Also, thanks to <a href="https://github.com/kartena/Proj4Leaflet">Proj4Leaflet</a> plugin by <a href="http://www.kartena.se/">Kartena</a>, GIS enthusiasts can now enjoy Leaflet for maps with some quirky and rare projections.</p>
<p>One more Leaflet-based creation everyone needs to check out is <a href="http://flyjs.com/buildings/">OSM Buildings</a> by <a href="http://flyjs.com/buildings/about.php">Jan Marsch</a>, an amazing JS library for visualizing 3D OSM building data on top of Leaflet maps. Incredibly cool stuff.</p>
<h3 id="developer-blog">Developer Blog</h3>
<p>This is the first post of the official Leaflet developer blog, that will become the main place for all important Leaflet-related news, tutorials, tips and development notes.</p>
<h3 id="big-players-using-leaflet">Big Players Using Leaflet</h3>
<p>Since the previous release, Leaflet got adopted by many great companies, including <a href="http://flickr.com/map">Flickr</a>, <a href="http://foursquare.com">foursquare</a> and <a href="http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/">Wikimedia Foundation</a> (featured on <a href="../../../index.html">frontpage</a> now). This is a really exciting time for Leaflet and open source maps, and I look forward to see many other companies follow this awesome trend in future.</p>
<h3 id="thank-you">Thank You</h3>
<p>I’d like to thank all the awesome people that helped Leaflet becoming what it is now — contributed code, reported bugs, used Leaflet on their websites, told colleagues about it, talked about it on conferences, etc. Keep up the great work!</p>
<p>Special thanks go to <a href="https://github.com/danzel">Dave Leaver</a> for his inspiring contributions including improved zoom animation and the state-of-the-art clustering plugin, and <a href="https://github.com/JasonSanford">Jason Sanford</a> for his friendly support (and setting up the Leaflet CDN among other things).</p>
<p>And, of course, thanks to my amazing company, <a href="http://cloudmade.com">CloudMade</a>, for embracing open source and supporting this development.</p>
<p>Sincerely, <br />
Vladimir Agafonkin, Leaflet maintainer.</p>
<script>
var map = L.map('map').setView([51.503, -0.09], 13);
L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'examples.map-i875mjb7'}).addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
], {color: 'red'}).addTo(map).bindPopup('I am an editable polygon.');
polygon.editing.enable();
L.control.scale().addTo(map);
L.marker([51.5, -0.095]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.marker([51.505, -0.115]).addTo(map).bindPopup("I am a second popup.");
L.marker([51.496, -0.13]).addTo(map).bindPopup("I am a third popup.");
L.rectangle([
[51.505, -0.03],
[51.5, -0.045]
], {weight: 1, opacity: 0.8}).addTo(map).bindPopup('I am a rectangle.');
</script>