Geekly Articles each Day
📜 ⬆️ ⬇️

Leaflet 0.4 - a new version of the open JS-library for interactive maps



After five and a half months of development since the release of the previous version, I am very glad to finally present you Leaflet 0.4 - a new version of the lightweight JavaScript library for interactive maps that works equally well on desktop browsers and mobile devices.

This release, to which 33 developers had a hand, carries a simpler, more convenient API and a huge number of improvements and fixes, along with a massive update of the documentation , the launch of the official blog and a plugin page . Let's look at the improvements in order.
')

Simplified API


By the following changes (and many others) I was pushed by a critical review of Habré from forgotten . For which he thanks a lot!

Leaflet 0.4 contains several API improvements that allow you to write simpler and shorter code (in jQuery style), while remaining backward-compatible with the previous approach (so that you can mix both styles):

L.marker([51.5, -0.09]) .addTo(map) .bindPopup('Hello world!') .openPopup();

First, the methods now accept LatLng , LatLngBounds , Point and Bounds objects in the form of simple arrays - now there is no need to create them explicitly:

 map.panTo([50, 30]); //   , : map.panTo(new L.LatLng(50, 30));

Secondly, such methods of the Map class as addLayer , addControl and openPopup , got their counterparts from the other side:

 marker.addTo(map); //  map.addLayer(marker) control.addTo(map); // map.addControl(control) popup.openOn(map); // map.openPopup(popup)

Considering that in the Leaflet all methods that do not return any explicit value return the object itself ( this ), this makes it more convenient to call the methods “by chain”.

Thirdly, each class in Leaflet now has its own class factory (with the same name, but starting with a small letter), which allows you to create objects without the new operator (which makes code with many chain calls more beautiful).

 L.map('map').fitWorld(); //   , : (new L.Map('map')).fitWorld();

New opportunities


Improved zoom animation

Markers, popups, vector objects and layers from the images in the previous version were hidden during zoom, but now they are animated nicely and smoothly with tiles. If you have many hundreds of markers on the map and the animation is not very smooth (say, more than 1000 in the case of Chrome), you can disable it with the markerZoomAnimation map markerZoomAnimation , although in this case it would be more expedient to use the marker clustering plugin .

Keyboard control

The availability of Leaflet cards has improved markedly thanks to a new keyboard management feature enabled by default. It allows you to control the map by pressing the arrow keys and +/- . Very convenient, by the way - try it!

Inertia effect

Dragging the card with your mouse or fingers now also becomes more pleasant due to the effect of inertia, in which the card continues to slowly slow down in the same direction in which you pulled it. This effect is quite flexibly adjusted - you can control the maximum initial speed, deceleration and the threshold of sensitivity at which the inertia is triggered.

Scaling with your fingers on Android 4

In the previous version of Leaflet, the gesture for zooming in / out on the map worked only on iOS, and Android users had to be content with buttons. Now, with gestures, you can change the map scale on Android 4+, and not only in the built-in browser, but also on Chrome and Firefox for Android.

Scale indicator

A simple indicator of the current scale in the metric and / or imperial measurement systems. As usual, the look can be completely changed with CSS.

Editing broken lines and polygons

Allows you to edit broken lines and polygons using a simple, intuitive interface. True, this feature in future versions will most likely be transferred to a separate plugin for drawing shapes Leaflet.draw .

Lightweight div icons for markers

In addition to traditional icons for markers from images, you can now use lightweight icons, which are a regular HTML-specific div c, styled with external CSS. For example, now they are used when editing (squares at the vertices) and in the plugin for clustering (color clusters).

 L.marker([50.505, 30.57], { icon: L.divIcon({className: 'my-div-icon'}) }).addTo(map);

Rectangle

A simple way to create rectangular areas on a map. The same could have been done before with the help of polygons, but it’s more convenient:

 L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);

API improvements


GeoJSON API

The API for displaying GeoJSON layers has been significantly improved to make it more flexible and easier to use. The updated API can be found using the training article on the site . True, these changes are not backward compatible, so you have to update your old code.

Icon API

The icon API has been improved and simplified, although the changes are also not backward compatible. How it looks now can be viewed in the relevant training article , or immediately in the documentation .

Control API

It is now much easier to create your own controls - you can see an example in the documentation .

Improved work with events

Methods for working with on and off events can now accept several types of events in one line (with spaces between types):

 map.on('click dblclick moveend', doStuff);

Even in them it is now possible to transfer objects with pairs of events / listeners:

 marker.on({ click: onMarkerClick, dragend: onMarkerDragEnd });

In addition, now, if nothing is transferred to the off method except the name of the event, the object will write off all listeners who have subscribed to this event:

 map.off('click');

Other improvements

Leaflet 0.4 contains more than 30 new methods, options and events in different classes, making the library more complete and powerful. You can see the full list .

Performance and usability improvements


The new version contains several improvements that make Leaflet even faster:


In addition, there have been several usability improvements:


Fixes


Leaflet 0.4 contains about 45 fixes that make the library more stable and reliable among all supported browsers and platforms. Corrections that I want to emphasize: a dumb glitch on iOS, which in some rare cases led to the disappearance of the map after the zoom; broken zoom on IE10; breaking cards when a page is rendered with a strict XHTML content-type in the headers; Incorrectly working zoom on maps inside an element with position: fixed . Here is the complete list of fixes .

Upgrade from previous version


In addition to the changes mentioned above in GeoJSON and Icon, when upgrading from a previous version to 0.4, you should familiarize yourself with a short list of potentially incompatible changes (although it will hardly take more than a few minutes to fix the old code).

Download the new version, get links to the library in the CDN, or read the instructions for your own build from the source code on the download page .

Code statistics


I remain committed to keeping the library as lightweight as possible. Here are some statistics on the new version:


Documentation update


Until then, the Leaflet documentation was incomplete and not always contained in a fully up-to-date state. For this release, a lot of effort has gone into bringing the documentation to the state of complete and relevant 100%. All the remaining classes, methods, properties, options, and events were carefully documented and accompanied by a large number of code examples. From now on, the documentation will be kept in top condition.

In addition, the design of the documentation page was seriously improved - the colors, font, indents, hyphenation, even the width of the columns - many details were worked out to make the page easy and enjoyable to read.

Plugin Page


The Leaflet website finally has a page with a list of third-party plug-ins that can expand the library with a variety of interesting features and help integration with third-party services.

One plugin I would like to note separately - this is Leaflet.markercluster , at the moment the best plugin for clustering markers that I have ever seen from solutions for all sorts of API cards. It is beautiful, fast, with smooth animations for clusters, includes a clever solution for clusters of markers at the last scale level (in Google Earth style), can highlight the area covered by certain clusters by mouse-pointing, works well on mobile devices, and is flexible. Be sure to take a look!

Another noteworthy plugin is Leaflet.draw , which adds the ability to create different shapes, such as broken lines, polygons, circles, rectangles and points, using a convenient and understandable interface with icons and tooltips. In the future, all the code associated with editing vector layers will most likely be transferred to this plugin.

Also, thanks to the Proj4Leaflet plugin, which integrates Leaflet with the Proj4js geographic projection library, Leaflet can now be used with many non-standard projections.

In addition, be sure to take a look at OSM Buildings , the JS library, which allows you to visualize OpenStreetMap, given the elevation of houses in a perspective 3D projection on Leaflet cards. It looks very cool.

Big companies using Leaflet


From the moment of the previous release, Leaflet began to use a lot of great companies, but I would like to mention three proudly - Flickr , foursquare and the Wikimedia Foundation . Several other eminent users now flaunt on the main page of the site .

thank


I would like to say a big thank you to everyone who helped develop the library - to everyone who sent patches to GitHub , reported bugs, used Leaflet on their websites, talked about it to colleagues and mentioned at conferences. I am very glad that such a wonderful community has gathered around the library I created.

Thanks for attention! I will be glad to any feedback.

PS: This article is a slightly modified Russian-language version of my own official announcement on the Leaflet site , but since I am the author myself, I decided that it still does not apply to translations. Correct me if that.

Source: https://habr.com/ru/post/148744/

More articles:


All Articles