Leaflet — новая JavaScript-библиотека для карт от CloudMade

Привет всем русскоязычным осмерам! :slight_smile:

Сегодня CloudMade анонсировал Leaflet — новую JavaScript-библиотеку с открытым исходным кодом для интерактивных карт. Я являюсь автором этой библиотеки — буду рад услышать ваши отзывы и ответить на все вопросы.

Leaflet задумана как библиотека, одинаково хорошо работающая и на десктопных браузерах, и на мобильных устройствах (iPhone/iPad, Android) — очень быстрая, легковесная, с простым API, красивым и понятным ООП-кодом. В отличии от OpenLayers (самого популярного выбора на сегодняшний день) мы не пытаемся впихнуть в нее все фичи, о которых только можно помыслить, раздувая код до немыслимых размеров — только самое основное, минимальный набор, который удовлетворяет нужды 99% применений карт в онлайне (тайлы, маркеры, векторы, попапы), но реализовывая их максимально лучшим образом.

Официальный сайт Leaflet: http://leaflet.cloudmade.com (описание, примеры, документация)
Репозиторий на GitHub: http://github.com/CloudMade/Leaflet (будем счастливы видеть контрибьюторов :))

Спасибо!

FUCK YEA! Огромный вам респект! А то раньше только http://opentouchmap.org тачи умел.

Одно из самых приятных событий года в OSM, однозначно. OpenLayers мне осточертел своим весом и тормознутостью. 58 килобайт!

Баг-не баг, судите сами: На страничке http://leaflet.cloudmade.com/examples/quick-start.html есть примеры. В любом из них дохожу до максимального зума с использованием колесика мышки, зум перестает работать (не уменьшает ни колёсиком мышки, ни нажатием кнопки). При этом на страничке http://leaflet.cloudmade.com/ всё работает как надо. Наблюдается если использовать для зума только колёсико мыши, если нажимать на кнопки + и -, то всё работает / google chrome 10, xp

WMS-то эта новая библиотека хотя бы поддерживает ?

А я уже создал багу про это :3

Все зависит от приложений. Мне вот не хватает в openlayers полнофункциональных
SOS и CSW клиентов, приходится дописывать самому из имеющихся кусков.

Вот именно, и для бытового применения Leaflet куда как приятнее. Показать несколько маркеров или многоугольников, «да с таким-то зумом»! :slight_smile:

Спасибо. :slight_smile: Собственно именно по этой причине я и начал в своё время писать Web Maps API с нуля, хотя CloudMade изначально хотели, чтобы я просто сделал враппер вокруг OpenLayers. И вот полгода назад начал писать Leaflet, используя предыдущие наработки.

Справедливости ради надо отметить, что есть еще Modest Maps JS и Polymaps. Но первый активизировался после долгого простоя только в последние пару месяцев, а второй - клёвая либа, но без поддержки IE6-8 и Андроида (из-за требования SVG) и с очень странным API и кодом (из-за функционального подхода вместо ООП).

Да, спасибо! Уже зарепортили (https://github.com/CloudMade/Leaflet/issues/47), в ближайшее время пофикшу. Баг проявляется, когда на карте есть полигон и ты зумишься в место, которое его не содержит.

Вы на самом деле довольно редкое исключение. :slight_smile: Например, за три года работы в CloudMade я ни разу (!) не встретил практического применения WMS в каком-либо стартапе, популярном веб-сайте или веб-приложении — всё, что встречалось, относилось сугубо к научно-исследовательской сфере. Подавляющее большинство применений сводятся в итоге к простой тайловой карте с маркерами, полилайнами/полигонами и попапами.

Для более сложных вещей пускай народ пишет плагины, а Leaflet пускай остаётся максимально сконцентрированной на самых простых и необходимых вещах.

Mourner, geoJSON?..

Он у него в трекере вместе с kml в числе приоритетных стоит вроде. :slight_smile:

Скорее бы, очень уж актуально. :3

GeoJSON будет в течении пары недель, с KML сложнее, но тоже запланировано. Баг с зумом только что пофиксил. :slight_smile:

Ну не такое уж и редкое. У нас несколько приложений построено на базе OL + WMS. WMS очень удобен чтобы рисовать много данных - сервер генерит картинку быстро, а клиенту надо только её показать. Рисование векторных данных средствами JavaScript хорошо только в ограниченых пределах.
Сейчас вот делаем портал для простых юзеров, на котором можно будет мониторить автобусы/троллейбусы/трамваи по всему Питеру. Пока не вижу альтернативы WMS-у для показа их на карте (несколько тысяч отметок в перспективе и чтоб не тормозило при показе). Была бы у вас поддержка - могли бы попробовать встроить, маленький размер скрипта тут важен.

Мне не нравится сложность спецификации WMS. Скажем, для рисования данных картинками с помощью тайл-сервиса достаточно просто условиться насчёт проекции (скажем, стандартный гугл меркатор) и URL-шаблона для тайлов, и добавить на карту с помощью обычного TileLayer — это просто и легковесно. Аналогично если это картинка по текущему bbox-у, а не тайлами - обычный ImageLayer и вручную обновлять на moveend.

Попробую разобраться с WMS, возможно напишем плагин. Или кто-то напишет в качестве контрибьюшна. :slight_smile:

Ну, вам же не сервер писать. Для клиента там ничего сложного. Просто сформировать get-запрос нужными параметрами и отобразить картинку, пришедшую в ответ. Посмотрите OpenLayers.Layer.WMS - там кода всего ничего.

Можно пойти по пути JOSM, когда со стороны пользователя приходит только ссылка к которой достаточно &bbox=… добавить.

Действительно! Тогда скоро реализуем, спасибо. :slight_smile: https://github.com/CloudMade/Leaflet/issues/50

Появится ли в ближайшее время документация на Basic types → Icon?

Да, в течении пары дней! Пример использования:

var MyIconClass = L.Icon.extend({
iconUrl: ‘…’,
shadowUrl: ‘…’,
iconSize: new L.Point(…),
shadowSize: new L.Point(…),
iconAnchor: new L.Point(…),
popupAnchor: new L.Point(…),
});

var myIcon = new MyIconClass();

var marker = new L.Marker(latlng, {icon: myIcon});