Обзор визуальных плагинов Leaflet. Часть 1.

Leaflet.ellipse

Позволяет помещать на карту эллипсы с указанными координатами центра, размерами полуосей и углом наклона.

Адрес примера и описание http://jdfergason.github.io/Leaflet.Ellipse.

Leaflet.Plotter

Плагин позволяет создавать пути на карте, есть возможность создавать новые точки внутри пути и перетаскивать существующие. 

Адрес ресурса https://github.com/scripter-co/leaflet-plotter

Leaflet.markercluster

Позволяет группировать значения точек на карте.

Позволяет работать с большими наборами точек.

https://github.com/Leaflet/Leaflet.markercluster

Leaflet.label

Позволяет привязывать текстовые комментарии и фигуры к векторным объектам карты.

Существует альтернативная версия плагина Leaflet.iconlabel.

RaphaelLayer

Позволяет помещать на карту объекты, созданные в библиотеке векторной графики JavaScript Raphaël.

http://dynmeth.github.io/RaphaelLayer/

OverlappingMarkerSpiderfier-Leaflet

Позволяет перекрывать большое количество маркеров в одной точке одним маркером. При клике на такой маркер появляется красивое отображение перекрытых значений.

https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet

TileLayer.BoundaryCanvas

Позволяет отображать часть карты, ограниченной указанной геометрической фигурой.

https://github.com/aparshin/leaflet-boundary-canvas

Leaflet MaskCanvas

Позволяет создавать Canvas слой для отображения большого количества данных на карте.

https://github.com/domoritz/leaflet-maskcanvas

HeatCanvas

Позволяет добавлять "тепловую карту". Для построения использует стили CSS3 и классы divIcon.

https://github.com/sunng87/heatcanvas

heatmap.js

Позволяет добавлять "тепловую карту" на базе Canvas HTML5. 

Leaflet divHeatmap Layer

Легковесный плагин для создания "тепловой карты" используя CSS3 и divIcon.

WebGL Heatmap

Высокопроизводительный плагин для создание "тепловой карты" с использованием WebGL.

Leaflet.MultiTileLayer

Дозволяет комбинировать тайловые слои в одном слое на карте.

var map = L.map('map').setView(L.latLng(57.7, 11.9), 12);
L.TileLayer.multi({
    14: {
        url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
        subdomains:'1234'
    },
    17: {
        url: 'http://server.arcgisonline.com/ArcGIS/'
            'rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
    }
}, {
    minZoom: 0,
    maxZoom: 17,
    attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; '
         '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
         '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
         '&mdash; '
        'Tiles &copy; Esri &mdash; '
        'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, '
        'Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);

Leaflet.AnimatedMarker

Позволяет создавать движущиеся маркеры на карте.

Демо доступно по адресу http://openplans.github.io/Leaflet.AnimatedMarker