Google Maps v3 & Raphaël Overlay

Эта статья была улучшена до неузнаваймости, но оставлена тут для поисковиков, лучше сразу переходите к чтению Raphaël Overlay.

Прошлый раз была небольшая заметочка о том как рисовать при помощи Raphaël на гуглокартах. На этот раз будет статья посерьезнее.

На этот раз я довел Эвклидову проекцию до ума, и теперь с ней действительно можно что-то рисовать. А так же накодил более менее сносную прокладку между Raphaël и Google Maps, теперь ею можно рисовать. Пожалуй вот сейчас этим и займемся.

Для того чтобы нарисовать что-либо поверх карты рисуется див во всю ширину и высоту. Да-да вы правильно поняли если взять гуглокарту и приблизить уровень так на десятый, чтобы стало видно города, то ширина дива будет несколько тысяч пикселей. Потом в этом диве Raphaël уже рисует свои фигуры. Передаваемые параметры считаются за первый уровень приближения, дальше масштабируются по простой формуле [width = width * (1 << zoom)]. У меня на практике такой образ отрисовки совсем не тормозил, не смотря на космические цифры (Core2 2.33, RAM 4, FF 3.6.8), расскажите в каментах как быстро рисуеться у вас.

Из видимых недостатков только один — если подвигать карту чуть-чуть вправо-влево то видно что четвертушка круга рисуется то в правом, то в левом верхнем углу. И там и там она рисуется правильно, но еще правильнее было бы ели бы рисовался полный круг выходя за края карты, но поскольку див (соответственно и область рисования svg или vml) имеет ширину и высоту карты, то вылезти за его рамки не представляется возможным и фигура остается усеченной. Надо будет попробовать задавать размеры диву при отрисовке каждой новой фигуры.

Самое сложное во всем этом было пожалуй пересчет координат из широты-долготы в пиксели по карте, но по моему получилось весьма неплохо. В ближайшее время думаю добавить еще пару функций и довести код до приличного вида.

UPD 24.11.2014 В приличный вид это все приведено там -> map-utils