Поставили задачу адаптировать под Ipad и iPhone карту, которая была сделана на flash. Сделать эффект на отдельных регионах и проставить точки по карте. Показывать точки, было самым легким, как координаты были пиксельными относительно верхнего левого угла.
Так как стандартный броузер в Ipad это Safari, просмотрел в интернете, что он может делать и что он поддерживает. Выяснилось, что он поддерживает SVG и canvas. И решил сделать, используя возможности HTML5 – svg или canvas.
SVG - Это векторное изображение и не теряет качества при изменении размера изображения. На каждый объект можно прикрутить javascript события (onclick, onmouseover и тд и тп). Можно достучаться до объектов тем же javascript – менять цвет, абрис. Если взгянуть внутрь файла SVG, то приятно удивимся увидев нечто похожее на XML
-
<?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Creator: CorelDRAW -->
-
<?xml-stylesheet href="map_svg.css" type="text/css"?>
-
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="750px" height="500px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
-
viewBox="0 0 750 530.303"
-
xmlns:xlink="http://www.w3.org/1999/xlink">
-
<g id="Слой_x0020_1">
-
<metadata id="CorelCorpID_0Corel-Layer"/>
-
<polygon class="fil0 str0" points="154.721151,259.897 40.6053,258.794 40.1265,257.738 "/>
-
</g>
-
</svg>
Сохранив векторный источник карты в SVG, начал работу. Так как любимый броузер для разработки это Firefox, начал тестировать работоспособность на нем. Далее Safari. И БАЦ - Inline SVG не пашет. Подозрение пало на мои кривые руки. Несколько часов рылся в коде, тестировал разные варианты. И в конце концов он появился. Но это было сделано через внешнее подключение и это не дает возможности работать с ним через жаваскрипт.
Нервно попив чай и перелистывая код в голове, решил отказаться от SVG, времени думать дальше и допиливать не было, и подумал в сторону canvas.
Но после поисков и просмотров примеров использования canvas понял что это будет долго.
И решено было сделать старым дедовским методом. Слои с регионами на карте были расставлены через top left в стилях.
На каждый регион были подвешаны события на mouseover,mouseout которые делали эффект свечения.
-
if (mouseon)
-
$(".map_"+mp[i]).animate({opacity: 0.8},'fast'); // немного светлеет
-
else
-
$(".map_"+mp[i]).animate({opacity: 1},'fast'); // возвращаем обратно
Но из-за того что картинка работает как прямоугольник, даже если имеет прозрачный слой, были глюки когда курсор находился на Регион А который имел границы с Регионом Б, но при этом светился Регион Б а не А.
Немного еще посидев, попив чайку с блинчиками, пришла идея сделать все это более хитро.
Карту с регионами, которая уже готова, ложим на нижний слой, сверху кладем такого же размера прозрачную картинку, и на прозрачную прослойку делаем area map. Чтобы долго не сидеть (лень двигатель процесса) и не рисовать эти area map, используем наш старый SVG файл.
Берем содержимое SVG файла как источник координат для area map и пропускаем его через жаваскрипт чтобы он нам нарисовал их. (В конце я отказался от этого, и посидем мин 10 отрисовал вручную).
-
$("polygon","#svg_map").each(function() { // берем все полигоны
-
var coords = $(this).attr("points");
-
coords = ReplaceAll(coords,","," "); // берем координаты полигона меняем запятые на пробел
-
var map_area = $("<area></area>").attr("coords", coords).attr("shapy","poly"); //создаем новый area
-
$(map_area).bind("mouseover",effect).bind("mouseout",effect) // прикрепляем к нему эффект
-
$("#map_area").append(map_area); // и ложем его в наш area map который сделан для прозрачного слая
-
})
И в итоге мы получаем нашу карту. Если мы наводим на регион, например Карагандинский, то мы стоим на прозрачном слое, которая запускает анимацию для картинки региона Караганды, которая находится на нижнем слое.
Точки над Картой
Точек которых нужно было проставлять по карте было достаточно много. С сервера брался XML файл, проходил обработку,и все хранилось в DOM. Но в процессе выяснилось что это не очень хорошая идея, так как начало немного тормозить. Дело в том что каждая точка имела 10 аттрибутов, которые фильтровались по определенным параметрам. Я использовал выбиралки в jquery (jquery Selectors), но почему что это все начало тормозит.
Все вроде бы хорошо работало, хоть и тормозило, даже успел порадоваться… но радость была короткой.
В атрибутах точки имелись еще и даты. Даты активации и дата завершения. Тут-то я и огорчился, поняв, что нельзя сделать селекты используя больше-меньше или выбирать периоды.
И тут мне на помощь пришла База данных на стороне клиента - Client-side Database Storage. Chrome и Safari это поддерживает, а вот Firefox пока не поддерживает.
Создал базу данных и одну таблицу, где будут хранится все точки, и выбирать эти точко уже лечге. Используя простоейший SQL запрос можно выбрать все точки с выбранными атрибутами, а также даты в периодах. Даты кстати храняться как unix-timestamp, и при вставку в таблицу, даты переводились в timestamp.
Client-side Database Storage – асинхронная, что доставляет немного головной боли при работе с ней.
И вот, после всех этих работ, наша карта отлично работает в Safari. Успешно протестирована на Ipad и iPhone.
Все довольны, в особенности я, так как узнал много полезного.