Клуб API Карт

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

Пост в архиве.
infieldsystems
7 декабря 2010, 22:06

Привет.

 

Не так давно потребовалось сделать элемент управления зумом в нарисованном дизайнером стиле.. поискал немного в интернете - ничего для Я.карт не нашел... написал сам и решил поделиться: 

 

пример: http://yamaps.lsd-dev.info/test1.html

Код контрола: http://pastebin.com/GAGqkkA4

 

В целом код понятный, но если кому нужно будет комментарии напишу.

25 комментариев
Симпатичный контрол.

Просто стало интересно,
то что Вы создаете DOM-элементы и навешиваете события не через jQuery (хотя подключаете дополнительно к той что есть в АПИ 1.4) чем-то обусловлено?
на самом деле ничем... просто в тот момент вот так захотелось :) можно в целом для красоты переписать через Ymaps.jQuery .. тогда будет вообще как родной контрол :)

З.Ы. можно на "ты" :))
Ага. Тогда твой код можно будет скопировать и он заработает.
А сейчас будет ошибка jQuery - undefined
(т.к. YaZoomSlider зависит от подключения 1.4)
на самом деле фишка в том, что оно еще и jquery-ui зависит ибо в отличии от GMaps Я.Карты не имею встроенного интерфейса Draggable... попытался вчера полностью избавится от внешнего jQuery... Вообщем в изолированном примере получилось это сделать вот так http://pastebin.com/SA253d34 .. но как это будет работать в живом окружении - не понятно..




гм, а скиньте линку на интерфейс драгабл от гугла.
http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html#GDraggableObject

 usage
this.slide=new GDraggableObject(this.knob, {container:container});

эх, ну почему ниодин нормальный фреймворк не предоставляет нормальный, управляемый драг :(
Кстати - не поймите меня не правильно - но я не понял почему слайдер в вашем примере не драгается по горизонтали/
И, еще раз кстати, добавьте в конструктор карты {propagateEvents:true} - по идее еще интереснее должно получиться
кстати теперь по ползунку кликать можно http://yamaps.lsd-dev.info/test.html :))

с сеткой только что-то не срастается..

по поводу горизонтального драга - ну имхо при вертикальном расположении полоски реакция на горизонтальный драг не очень логичное поведение интерфейса.. ИМХО опять же

З.Ы. и все же лучше на "ты" :)
в том смысле - не понимаю почему он не двигается по горизонтали.
должен же двигаться! нигде не сказано что не должен
ну вообщем это вариант конечно только для вертикального слайдера... но я думаю что любой сможет превратить его в горизонтальный слегка изменив функцию setSlider

З.Ы. оказывается это все таки кому-то интересно, а то на хабре даже в песочницу не пустили этот контрол :)))
да, на хабре злые люди :(
но всеже почему элемент горизонтально не драгается :)
Красивый контрол.

Еще картинки в спрайт и сделать так, чтобы нужный css сразу прописывался в контроле (или загружался автоматически). Тогда пользователю достаточно будет подключить один js-файлик с вашим контролом и наслаждаться)

Есть в планах еще другие контролчики?)
согласен :) будет время - доведу до ума :)

в планах есть рисование окружности с редактированием.... оно в коде есть но в контрол не оформлено
Ну окружность - это не совсем контрол, это скорее оверлей.

Можете взглянуть на пример рисования круга из документации:
http://api.yandex.ru/maps/jsapi/examples/circle.htm

С удовольствием посмотрим на вашу реализацию!
да я уже когда ответил, подумал что это не контрол :))

в целом смысл тот же что и в примере + добавлены элементы редактирования окружности
ну собственно вот:
http://yamaps.lsd-dev.info/test_h.html
http://yamaps.lsd-dev.info/test.html

один js + 1 спрайт картинка
Выложите где-нибудь на народе, чтобы не потерялся?

Ну и код причесать можете заодно ;)
с удовольствием рекомендации по "причесыванию" выслушаю... ибо JS не основной для меня язык
люди то на хабре злые, зато НЛО вчера были добрые - если нужен инвайт - черкани email - вышлю
ух ты! :)) спасибо

lsd.dev [at] гмаил дот ком
В идеале еще две феньки
1. чтобы когда я отпускаю скролер он бы "доезжал" до своей фиксированой позиции
2. чтобы можно было кликнуть куда угодно на грид и получить нужный зум
первое не уловил, а вот второе не исключаю, что появится
ползунок можно сдвинуть всего на пиксель, а ведь он работает по четко фиксированным значениям (top*this.MAXZOOM/this.YSLIDERLENGTH)
Вот было бы просто суперски если бы он после того как я его отпускаю двигался на свою фиксированную позицию.
а понял да..... нууу :) нет ничего не возможного :)) попробуем сделать фигли :) глядишь получится полноценный контрол