--- title: "Как я делал веб-карту для iPad" description: "Поставили задачу адаптировать под Ipad и iPhone карту, которая была сделана на flash. Сделать эффект..." author: "kazakbala" published: "2011-08-02T04:24:13+00:00" modified: "2011-08-02T04:31:29+00:00" locale: "ru" canonical_url: "https://yvision.kz/post/kak-ya-delal-veb-kartu-dlya-ipad-181485" markdown_url: "https://yvision.kz/post/kak-ya-delal-veb-kartu-dlya-ipad-181485/markdown" site_name: "Yvision.kz" --- # Как я делал веб-карту для iPad > Поставили задачу адаптировать под Ipad и iPhone карту, которая была сделана на flash. Сделать эффект... ![Как я делал веб-карту для iPad](https://storage.yvision.kz/images/user/kazakbala/imRDcjT6Bq7T74bGu01oin7RLqSlPP.jpg) Поставили задачу адаптировать под Ipad и iPhone карту, которая была сделана на flash. Сделать эффект на отдельных регионах и проставить точки по карте. Показывать точки, было самым легким, как координаты были пиксельными относительно верхнего левого угла. Так как стандартный броузер в Ipad это Safari, просмотрел в интернете, что он может делать и что он поддерживает. Выяснилось, что он поддерживает SVG и canvas. И решил сделать, используя возможности HTML5 – svg или canvas. **SVG - **Это векторное изображение и не теряет качества при изменении размера изображения. На каждый объект можно прикрутить javascript события (onclick, onmouseover и тд и тп). Можно достучаться до объектов тем же javascript – менять цвет, абрис. Если взгянуть внутрь файла SVG, то приятно удивимся увидев нечто похожее на XML   Пример SVG - - - - - - - - - - Сохранив векторный источник карты в SVG, начал работу. Так как любимый броузер для разработки это Firefox, начал тестировать работоспособность на нем. Далее Safari. И БАЦ - Inline SVG не пашет. Подозрение пало на мои кривые руки. Несколько часов рылся в коде, тестировал разные варианты. И в конце концов он появился. Но это было сделано через внешнее подключение и это не дает возможности работать с ним через жаваскрипт. Нервно попив чай и перелистывая код в голове, решил отказаться от SVG, времени думать дальше и допиливать не было, и подумал в сторону canvas. Но после поисков и просмотров примеров использования canvas понял что это будет долго. И решено было сделать старым дедовским методом. Слои с регионами на карте были расставлены через top left в стилях. ![Как я делал веб-карту для iPad](https://storage.yvision.kz/images/user/kazakbala/O3ELD8wqTZCAtTep8u8yE7a74DR7Qu.jpg) На каждый регион были подвешаны события на mouseover,mouseout которые делали эффект свечения. Код для анимации - if (mouseon) - $(".map_"+mp[i]).animate({opacity: 0.8},'fast'); // немного светлеет - else - $(".map_"+mp[i]).animate({opacity: 1},'fast'); // возвращаем обратно Но из-за того что картинка работает как прямоугольник, даже если имеет прозрачный слой, были глюки когда курсор находился на Регион А который имел границы с Регионом Б, но при этом светился Регион Б а не А. ![Как я делал веб-карту для iPad](https://storage.yvision.kz/images/user/kazakbala/PGI8T7uqJ2fSQzXU01PhYA6u9qF1GJ.jpg) Немного еще посидев, попив чайку с блинчиками, пришла идея сделать все это более хитро. Карту с регионами, которая уже готова, ложим на нижний слой, сверху кладем такого же размера прозрачную картинку, и на прозрачную прослойку делаем area map. Чтобы долго не сидеть (лень двигатель процесса) и не рисовать эти area map, используем наш старый SVG файл. Берем содержимое SVG файла как источник координат для area map и пропускаем его через жаваскрипт чтобы он нам нарисовал их. (В конце я отказался от этого, и посидем мин 10 отрисовал вручную). Создаем налету area map - $("polygon","#svg_map").each(function() { // берем все полигоны - var coords = $(this).attr("points"); - coords = ReplaceAll(coords,","," "); // берем координаты полигона меняем запятые на пробел - var map_area = $("").attr("coords", coords).attr("shapy","poly"); //создаем новый area - $(map_area).bind("mouseover",effect).bind("mouseout",effect) // прикрепляем к нему эффект - $("#map_area").append(map_area); // и ложем его в наш area map который сделан для прозрачного слая - }) И в итоге мы получаем нашу карту. Если мы наводим на регион, например Карагандинский, то мы стоим на прозрачном слое, которая запускает анимацию для картинки региона Караганды, которая находится на нижнем слое. ![Как я делал веб-карту для iPad](https://storage.yvision.kz/images/user/kazakbala/7L31q7HzHC0ar22c06Prn4J8s0kwdw.jpg) **Точки над Картой** Точек которых нужно было проставлять по карте было достаточно много. С сервера брался XML файл, проходил обработку,и все хранилось в DOM. Но в процессе выяснилось что это не очень хорошая идея, так как начало немного тормозить. Дело в том что каждая точка имела 10 аттрибутов, которые фильтровались по определенным параметрам. Я использовал выбиралки в jquery (jquery Selectors), но почему что это все начало тормозит. Все вроде бы хорошо работало, хоть и тормозило, даже успел порадоваться… но радость была короткой. В атрибутах точки имелись еще и даты. Даты активации и дата завершения. Тут-то я и огорчился, поняв, что нельзя сделать селекты используя больше-меньше или выбирать периоды. И тут мне на помощь пришла База данных на стороне клиента - **Client-side Database Storage**. Chrome и Safari это поддерживает, а вот Firefox пока не поддерживает. Создал базу данных и одну таблицу, где будут хранится все точки, и выбирать эти точко уже лечге. Используя простоейший SQL запрос можно выбрать все точки с выбранными атрибутами, а также даты в периодах. Даты кстати храняться как unix-timestamp, и при вставку в таблицу, даты переводились в timestamp. ![Как я делал веб-карту для iPad](https://storage.yvision.kz/images/user/kazakbala/9rvRTs77drTw6tv9f7ubZdr4JSRzlV.jpg) Client-side Database Storage – асинхронная, что доставляет немного головной боли при работе с ней. И вот, после всех этих работ, наша карта отлично работает в Safari. Успешно протестирована на Ipad и iPhone. Все довольны, в особенности я, так как узнал много полезного. --- Source: [https://yvision.kz/post/kak-ya-delal-veb-kartu-dlya-ipad-181485](https://yvision.kz/post/kak-ya-delal-veb-kartu-dlya-ipad-181485)