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

Mourner · 2011-05-13 15:29:57

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

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

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

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

Спасибо!

Last edited by Mourner (2011-05-13 15:31:01)

Hind · 2011-05-13 16:18:38

и на мобильных устройствах (iPhone/iPad, Android)

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

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

Last edited by Hind (2011-05-13 16:23:03)

metadenisik · 2011-05-13 17:15:18

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

usm78-gis · 2011-05-13 17:31:10

Mourner wrote:

удовлетворяет нужды 99% применений карт в онлайне

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

Hind · 2011-05-13 17:34:30

metadenisik wrote:

Баг-не баг, судите сами

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

usm78-gis · 2011-05-13 17:37:54

Hind wrote:

OpenLayers мне осточертел своим весом и тормознутостью.

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

Hind · 2011-05-13 17:49:20

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

Mourner · 2011-05-14 15:51:32

Hind wrote:

и на мобильных устройствах (iPhone/iPad, Android)
FUCK YEA! Огромный вам респект! А то раньше только http://opentouchmap.org тачи умел.
Одно из самых приятных событий года в OSM, однозначно. OpenLayers мне осточертел своим весом и тормознутостью. 58 килобайт!

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

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

Mourner · 2011-05-14 15:53:20

metadenisik wrote:

Баг-не баг, судите сами: ...

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

Mourner · 2011-05-14 16:01:14

usm78-gis wrote:

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

usm78-gis wrote:

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

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

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

Last edited by Mourner (2011-05-14 17:33:24)

Komяpa · 2011-05-14 16:20:10

Mourner, geoJSON?..

Hind · 2011-05-14 16:34:30

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

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

Last edited by Hind (2011-05-14 16:49:10)

Mourner · 2011-05-14 18:27:32

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

Sergey Astakhov · 2011-05-14 21:39:34

Mourner wrote:

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

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

Mourner · 2011-05-16 12:32:23

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

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

Sergey Astakhov · 2011-05-16 12:43:58

Mourner wrote:

Мне не нравится сложность спецификации WMS.

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

Aleksandr Dezhin · 2011-05-16 12:46:49

Mourner wrote:

Мне не нравится сложность спецификации WMS.

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

Mourner · 2011-05-16 13:11:46

Sergey Astakhov wrote:

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

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

Last edited by Mourner (2011-05-16 13:11:57)

PaulKaz · 2011-05-16 14:03:31

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

Mourner · 2011-05-16 14:23:21

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

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});

Mourner · 2011-05-16 16:08:11

Реализовал WMS в первом приближении (пока что поддерживает только EPSG 3857 / 900913), сегодня-завтра закоммичу.

update: пробуем, https://github.com/CloudMade/Leaflet/co … 4256aee9c6

Last edited by Mourner (2011-05-16 17:43:35)

Ezhick · 2011-05-17 12:34:15

Кластеризация объектов планируется? Для меня - единственное, чего сейчас не хватает, чтобы перейти с клайдмейдовской же web-maps-lite...

Mourner · 2011-05-17 12:38:34

Кластеризация наверное будет частью следующей версии Web Maps API, которая будет переписана на ядре Leaflet (вместо с роутингом, геокодингом, всякими виджетами и т.д.).

Ezhick · 2011-05-17 12:58:20

То есть Web Maps API будет продолжать развиваться? Я уж решил, что Leaflet должен ее заменить...

Mourner · 2011-05-17 13:07:54

Да, по задумке Leaflet будет оставаться минимальной библиотекой с самыми основными функциями, в то время как Web Maps API - полным набором функциональности для поддержки всех сервисов CloudMade и дополнительными фичами.

#1 2011-05-13 15:29:57

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

#2 2011-05-13 16:18:38

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

#3 2011-05-13 17:15:18

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

#4 2011-05-13 17:31:10

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

#5 2011-05-13 17:34:30

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

#6 2011-05-13 17:37:54

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

#7 2011-05-13 17:49:20

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

#8 2011-05-14 15:51:32

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

#9 2011-05-14 15:53:20

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

#10 2011-05-14 16:01:14

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

#11 2011-05-14 16:20:10

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

#12 2011-05-14 16:34:30

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

#13 2011-05-14 18:27:32

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

#14 2011-05-14 21:39:34

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

#15 2011-05-16 12:32:23

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

#16 2011-05-16 12:43:58

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

#17 2011-05-16 12:46:49

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

#18 2011-05-16 13:11:46

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

#19 2011-05-16 14:03:31

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

#20 2011-05-16 14:23:21

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

#21 2011-05-16 16:08:11

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

#22 2011-05-17 12:34:15

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

#23 2011-05-17 12:38:34

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

#24 2011-05-17 12:58:20

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

#25 2011-05-17 13:07:54

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

Board footer