Интерактивная карта из изображения. Сервисы для создания интерактивных карт

Для блогов, решил продолжить эту тему. До 2010 года, чтобы узнать, как создать интерактивную карту для сайта, необходимо было сесть за учебники по HTML, Java и открыть документацию по Flash. Как правило, карты все равно получались неуправляемыми, плохо загружались или не отображались вовсе, и приходилось пользоваться обычной в виде изображения.

Important!

Введение

Сервисы

Введение

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

При необходимости элементы карты могут включать в себя помимо реальных физических объектов (дома, улицы, парки, дороги и т.д.) дополнительно текстовую информацию, видеозаписи и ссылки на другие сайты.

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

Сервисы

Чтобы разобраться, как создать интерактивную карту для сайта, необязательно уметь самостоятельно писать код, преобразовывать данные и скрипты. Сервисы, о которых ниже пойдет речь, предоставляют вебмастеру готовый javascript-код, универсально подходящий к любой CMS. Чтобы установить интерактивную карту к себе на интернет-портал достаточно просто выучить сочетание клавиш Ctrl+C и Ctrl+V, не обращаясь к программисту.

Яндекс Карты – из всех известных сервисов предлагает самые гибкие инструменты, куда помимо геолокации, включается информация о пробках и народная карта;

Google Maps – прямой конкурент Яндекса. Карты от Google обладают схожим функционалом и возможностями, но более стандартизированы;

Geoserver – использует в основе Web Feature Server, но больше подходит для пользователей знающих принципы работы с серверами.

Подобные пакетные решения одинаково удобны и для пользователя, и для веб-мастера, в отличие от самописных на основе Flash и HTML-технологий. Начиная с 2013 года, 80% веб-студий, занимающихся созданием сайтов, используют Яндекс Карты, Google Maps и Geoserver в профессиональном сайтостроении. Такие карты бесплатны для использования, быстро редактируются и легко поддерживаются в актуальном состоянии. Следовательно, цена обслуживания и трудозатраты на них обходятся владельцу ресурса дешевле.

Создание интерактивной карты на примере Яндекс Карты

Готово! Инструкция, как создать интерактивную карту для сайта, выглядит длинной и сложной только на первый взгляд. В действительности создание слоя с геоданными и настройка необходимых параметров занимает не больше 1,5 минут. Предлагаю обсудить этот способ в комментариях.

Марцин Дзиевульски

Перевод: Влад Мержевич

Raphaël это мощная библиотека, которая должна упростить работу с векторной графикой в Интернете. Сегодня я научу вас, как создать интерактивную карту с нуля.

Для начала, пожалуйста, создайте следующую структуру папок и файлов:

Raphaël (raphael.js)

Raphaël - небольшая библиотека на JavaScript, которая должна упростить вашу работу с векторной графикой. Raphaël использует SVG и VML в качестве основы для создания графики. Это означает, что каждый графический объект который вы создаёте, также является объектом DOM, так что к нему можно добавить обработчик событий JavaScript или модифицировать его позднее.

paths.js

Это файл, в котором мы будем хранить контуры и названия каждой страны.

index.html

Как обычно, первым шагом будет создание разметки HTML.

Построение интерактивной карты с Raphaël

Мы также вставляем стили (default.css) и перед закрытием тега включаем библиотеку jQuery, библиотеку Raphaël, paths.js и init.js.

Создание контуров из файла SVG

SVG (Scalable Vector Graphics, масштабируемая векторная графика) это семейство спецификаций основанной на формате XML для описания двумерной векторной графики.

Это определение сообщает, что SVG является файлом XML, так что вы сможете открыть его в текстовом редакторе. Я нашел в Интернете свободный SVG-файл с картой Европы , который и собираюсь использовать в этом уроке. Очевидно, что вы можете использовать собственную векторную карту и экспортировать её в SVG-файл с помощью программы Adobe Illustrator или Inkspace.

Открываем paths.js и создаём новый объект с именем paths .

Var paths = {}

Затем откройте SVG-файл с картой и вы увидите много кода XML. К счастью, вам нужно только одно значение d . Посмотрите на изображение ниже.

Давайте создадим первый контур страны. В SVG-файле, использованном в этом уроке, первой идёт Исландия, поэтому скопируйте значение d и создайте новый параметр iceland в объекте paths .

Var paths = { iceland: { name: "Iceland", path: // Значение d } }

Таким же образом добавляются и другие контуры.

Var paths = { iceland: { name: "Iceland", path: // Значение d }, spain: { name: "Spain", path: // Значение d }, portugal: { name: "Portugal", path: // Значение d } // и т.д. }

Создание карты (init.js)

В этой части урока я собираюсь написать скрипт, который будет показывать карту на экране.

$(function(){ var r = Raphael("map", 1200, 820), // создаём холст, на котором рисуются наши контуры attributes = { fill: "#fff", stroke: "#3899E6", "stroke-width": 1, "stroke-linejoin": "round" }, // создаём объект attributes с параметрами arr = new Array(); for (var country in paths) { var obj = r.path(paths.path); obj.attr(attributes); } // в цикле обходим все контуры (контуры, которые включены в объект paths), // показываем их и устанавливаем для них параметры });

В первую очередь создадим событие hover .

Obj.hover(function(){ this.animate({ fill: "#1669AD" }, 300); }, function(){ this.animate({ fill: attributes.fill }, 300); });

Obj.click(function(){ document.location.hash = arr; // меняем адрес документа (после #) var point = this.getBBox(0); // возвращает размер элемента $("#map").next(".point").remove(); $("#map").after($("").addClass("point")); // удаляем существующий div с классом point и создаём ещё один $(".point") .html(paths].name) .prepend($("").attr("src", "flags/"+arr+".png")) .css({ left: point.x+(point.width/2)-80, top: point.y+(point.height/2)-20 }) .fadeIn(); // добавляем контент (название страны, рисунок и кнопку закрытия), // задаём позицию и показваем элемент });

И обработчик для кнопки «закрыть».

$(".point").find(".close").live("click", function(){ var t = $(this), parent = t.parent(".point"); parent.fadeOut(function(){ parent.remove(); }); return false; });

Окончательно init.js выглядит так:

$(function(){ var r = Raphael("map", 1200, 820), attributes = { fill: "#fff", stroke: "#3899E6", "stroke-width": 1, "stroke-linejoin": "round" }, arr = new Array(); for (var country in paths) { var obj = r.path(paths.path); obj.attr(attributes); arr = country; obj .hover(function(){ this.animate({ fill: "#1669AD" }, 300); }, function(){ this.animate({ fill: attributes.fill }, 300); }) .click(function(){ document.location.hash = arr; var point = this.getBBox(0); $("#map").next(".point").remove(); $("#map").after($("").addClass("point")); $(".point") .html(paths].name) .prepend($("").attr("href", "#").addClass("close").text("Close")) .prepend($("").attr("src", "flags/"+arr+".png")) .css({ left: point.x+(point.width/2)-80, top: point.y+(point.height/2)-20 }) .fadeIn(); }); $(".point").find(".close").live("click", function(){ var t = $(this), parent = t.parent(".point"); parent.fadeOut(function(){ parent.remove(); }); return false; }); } });

default.css

Последний шаг состоит в добавлении некоторого стиля с помощью CSS.

#map { float:left; clear:both; width:1200px; height:820px; } .point { position:absolute; display:none; padding:10px 15px; background:#7BB9F0; font-size:14px; font-weight:bold; /* скруглённые уголки */ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } .point .close { display:block; position:absolute; top:-10px; right:-10px; width:24px; height:24px; text-indent:-9999px; outline:none; background:url(../img/close.png) no-repeat; } .point img { vertical-align:middle; margin-right:10px; }

Готово! Смотрится замечательно? Конечно, только есть одна загвоздка. В нашем случае paths.js имеет объём более 400 Кб.

Цель работы: Научиться создавать многоуровневую интерактивную карту с помощью программы PowerPoint.

Задание:

1. Овладеть основними функциями программы PowerPoint.

2. Научиться вставлять компоненты, необходимые для создания интерактивной карты в программу PowerPoint.

4. Уметь создавать «кнопки возврата».

Порядок выполнения работы:

1. Откройте программу PowerPoint в папке Microsoft Office нажав: Пуск – Программы - Microsoft Office - PowerPoint . Откроется основное окно программы. 2. Нажмите: Файл – Создать – Новая презенттация . 3. В окне Макет ы содержимого выбрать Пустой слайд. 4. Вставьте основную карту проекта в программу, для чего выполните: Вставка – Рисунок – Из файла и указав адрес карты, загрузите ее (рис.1). 5. В главном меню выполните следующий алгоритм: Показ слайдов – Смена слайдов . В открывшемся окне находим режим П рямоугольник наружу . С ним эффект смены карт наиболее рационален. Затем убираем галочки с режимов По щелчку и Автоматически . Отметить Применить ко всем слайдам.

Рис.1 Главное окно программы PowerPoint.

6. Для обеспечения интерактивности карты, следует выделить объекты, которые будут увязаны гиперссылками с прикрепленными слайдами. Алгоритм выполнения следующий: Вставка – Рисунок – Автофигуры. В окне Автофигуры выбираем: Основные фигуры - Полилиния . С помощью появившегося крестообразного курсора обводим границы объекта на карте. Обязательно замкните линию, чтобы получить целый объект. 7. Чтобы убрать заливку и сделать выделенную область невидимой, поместите курсор на объекте и кликните правой кнопкой мыши. В открывшемся окне выберите Формат автофигуры. В открывшемся окне (рис.2) установите Прозрачность заливки 100%. Затем выполните: Цвет линии – Другие цвета (рис.3) – Прозрачность линии 100% - Ок.

Рис. 2. Окно программы. Рис. 3. Окно программы Цвета . Формат автофигуры

8. Нажмите: Вставка - Создать слайд . 9. В окне Макет ы содержимого выбрать Пустой слайд . 10. Вставте в открывшийся слайд рисунок (карту, фотографию, таблицу, график и др..), который будет гиперссылкой. Для этого в ыполните следующий алгоритм: Вставка – Рисунок – Из файла и укажите адрес файла. 11. Вернитесь на основную карту, для чего кликните левой клавишей мыши в окне Структура на изображении первого слайда. 12. С помощью гиперссылки следует увязать выделенные объекты основной карты, с прикрепленными слайдами. Для этого поместите курсор мыши на одном из выделенных объектов и щелкните правой клавишей. В открывшемся окне выбираем Гиперссылка . 13. В появившемся окне Добавление гиперссылки (рис.4) выберете Связать с местом в документе . Выберите место в документе Слайд 2 (или другой связанный с данным объектом). Подобным образом создаются гиперссылки и с другими объектами. В прикрепленных слайдах можно также выделять объекты и выставлять гиперссылки на другие слайды и т.д.

Рис.4. Окно программы Добавление гиперссылки.

14. Для нормального функционирования интерактивной карты на прикрепленных слайдах следует разместить кнопки возврата, обеспечивающие переход на основную карту. Алгоритм следующий: в окне Структура кликните левой клавишей мыши на изображении второго слайда, а затем последовательно нажмите Показ слайдов – Управляющие кнопки- Управляющая кнопка: назад .Курсором выделите место на слайде для кнопки возврата. Появится окно Настройка действия (рис.5). Установите в окне По щелчку мыши следующие установки: Перейти по гиперссылке – Первый слайд – ОК. 15. Для проверки функционирования интерактивной карты нажмите: Показ слайдов – Начать показ. Осуществляем проверку.

Рис. 5. Окно программы Настройка действия

Несомненно, Google Maps - ведущий картографический сервис на рынке, предоставляющий услуги GPS-трекинга и навигации. Но сегодня сфера применения карт постоянно расширяется и уже вышла за рамки традиционных прокладки маршрута и поиска объектов.

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

Очевидно, что услуги геолокации будут играть все более важную роль в будущем и потребность в подобных услугах будет только расти.

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

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

Итак, давайте перейдем к рассмотрению наиболее популярных картографических сервисов .

MapmeMapme - мощный современный инструмент с богатыми возможностями. Позволяет управлять набором всевозможных карт и их содержимым. Поддерживаются тэги и категории, импорт из Excel. Имеет возможность делать карты публичными и встраивать их в веб-приложения.

Стоимость: бесплатно, $99 и $199

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

Стоимость: бесплатно

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

Стоимость: $39 в месяц

Zee MapsZee Maps - онлайн-сервис для создания и публикации карт с целым набором современных и уникальных инструментов - механизмом поиска, личными картами, более 30 всевозможных маркеров и возможностью выделения целых областей, трехуровневым доступом (обычные посетители, члены группы и администраторы). Кроме того имеется возможность привязывать к маркеру различный медиаматериал - фотографии, аудио- и видеозаписи и сохранять карты в PDF и PNG формате для брошюр и презентаций.

Стоимость: бесплатно (до 5 карт) и платно, в зависимости от тарифного плана.

MapTilerИспользование MapTiler просто, как раз-два-три. Раз - отсканировать бумажную карту или создать ее с помощью GIS-системы (например, AutoCAD MAP 3D). Два - обработать ее MapTiler. Три - опубликовать в интернете, встроив, например, на страницу вашего сайта. При этом обеспечивается интеграция с такими популярными хостингами как Dropbox, Google Drive и Amazon S3.

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

Стоимость: имеются как бесплатный, так и платные тарифные планы

• Tutorial

Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG - это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript"ом.

Что же, начнём?

Самые нетерпеливые, могут сразу посмотреть демо , но я предлагаю читать обо всём по порядку.

Готовим карту Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.

Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)

Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов Стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, class=«area» для регионов и class=«city» для городов.

Далее, в секции изображения помещаем до боли знакомое:
.area { stroke: black; stroke-width: 2px; fill: #E9FFE9; } .city { stroke: black; stroke-width: 2px; fill: red; }
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff .

Результат:

Вставляем SVG в HTML Достаточно подробно этот процесс был освещён в хабратопике .

Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:

Все браузеры, поддерживающие SVG , его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).

Второй правильный метод - вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже . Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML"ем. Так что кавычки и закрывающие теги обязательны.

Подводные грабли Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так:

Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
viewBox="0 0 493 416" Diff .

После этого ситуация значительно улучшается, но другую граблю нам подкладывает Google Chrome: он упорно стремится смасштабировать картинку по высоте до высоты элемента , а не увеличить высоту согласно ширине тега и пропорциям изображения, как ведут себя остальные браузеры.



Жаль. Придётся привлечь JavaScript и подогнать высоту элемента вручную.
var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" "); var aspectRatio = viewBox / viewBox; svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio); Diff .

Результат:

Взаимодействуем с SVG Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно - он уже часть DOM веб-страницы.

Получить доступ к SVG, вставленным через чуть сложнее:
jQuery(window).load(function () { // Нам нужно дождаться, пока вся графика (и наша карта тоже) загрузится, поэтому используем window.onload, var svgobject = document.getElementById("svgmap"); // Находим тег if ("contentDocument" in svgobject) { // У нас действительно там что-то есть? var svgdom = jQuery(svgobject.contentDocument); // Получаем доступ к объектной модели SVG-файла // Теперь делаем свою работу, например: jQuery("#figure1", svgdom).attr("fill", "red"); // Находим тег с id="figure1" в SVG DOM и заливаем его красным } });
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам (jQuery(".class")). Приходится извращаться.

Заметьте, что я использую событие window.onload, так как нам необходимо дождаться полной загрузки страницы, вместе со всеми связанными элементами (в числе которых и наша карта). Однако и тут Google Chrome спешит подложить нам свинью: в том случае, если скрипт с window.onload находится в html-коде до тега , то код в обработчике выполняется ДО того, как карта на самом деле загрузится. Поэтому тег необходимо разместить после нашей карты. Sad but true.

Интерактивность первая: выделяем районы на карте щелчком по чекбоксу на странице. Для этого взаимодействия нам понадобятся чекбоксы в каждой строке таблицы с районами, а так же совпадающие или схожие id у строк таблицы и районов на карте.

Здесь мы будем при щелчке по флажку ставить или убирать класс selected у соответствующей области на карте, а так уже у самой строки. Это несложно:
$("#areas input").change(function() { var row = $(this).parent().parent(); var id = row.attr("id"); if (this.checked) { row.addClass("selected"); $("#"+id, svgdom).myAddClass("selected"); } else { row.removeClass("selected"); $("#"+id, svgdom).myRemoveClass("selected"); } });
Соответственно, нужно добавить и стилевые определения для данного класса. Предоставляю вам это сделать самостоятельно, согласно своих вкусов и предпочтений. Diff .

Интерактивность вторая: вскрываем/показываем названия на карте щелчком по чекбоксу на странице. Это взаимодействие делается ещё проще. Вставляем на страницу и немножко яваскрипта, который добавляет/удаляет всем связанным с названиями элементам на карте класс hidden {visibility: hidden;} :
$("#titleswitch").change(function () { var elements = $(svgdom.getElementsByClassName("areatitle")) .add($(svgdom.getElementsByClassName("citytitle"))) .add($(svgdom.getElementsByClassName("titlebox"))) .add($(svgdom.getElementsByClassName("titleline"))); if (this.checked) { elements.myAddClass("hidden"); } else { elements.myRemoveClass("hidden"); } });
Вот так .


Интерактивность третья: подсвечиваем районы на карте при наведении на строку таблицы (и наоборот) Для этого необходимо повешать обработчики события onhover как на таблицу:
// Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы. $("#areas tr").hover(function () { var id = $(this).attr("id"); $("#"+id, svgdom).myAddClass("highlight"); }, function () { var id = $(this).attr("id"); $("#"+id, svgdom).myRemoveClass("highlight"); });
…так и на районы на карте:
// Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте $(svgdom.getElementsByClassName("area")).hover(function () { var id = $(this).attr("id"); $("#areas #"+id).addClass("highlight"); }, function () { var id = $(this).attr("id"); $("#areas #"+id).removeClass("highlight"); });
Для того, чтобы мы это видели, добавим соответствующие CSS-правила в страницу:
tr.highlight, tr:hover, tr:nth-child(even):hover { background: lightyellow; } …и в SVG-карту: .highlight, .area:hover { fill: lightyellow; stroke: black; }
При наведении мышкой на строку таблицы (или на район на карте) на соответствующий район на карте (на строку таблицы) вешается нужный для подсвечивания класс. Чтобы приведённый выше код работал, необходимо, чтобы у районов на карте и строк таблицы были совпадающие (или схожие) id. Diff .


Интерактивность четвёртая: Отображаем данные со страницы на карте Ну что же, банальное присваивание классов, наверное, уже наскучило. Пускай карта нам показывает на себе какие-нибудь данные.

Перво-наперво: данные. Добавим к нашей табличке пару столбцов, например «Люди» и «Деньги». Внимание : Данные взяты от балды и никакого отношения к реальному Аместрису не имеют. А так же радиокнопки, по которым будем переключать, какие данные показывать.

Во-вторых, нам нужно место на карте, где будут отображаться данные. Добавим на карту пять блоков (по одному на каждый регион, соотнеся их id с регионами) и соответствующие стили в :

Ну и JavaScript-код, который будет брать данные из ячеек таблицы и помещать в блоки текста:
$("input").change(function () { var descnum = $(this).parent().prevAll().length+1; $("#areas tbody tr").each(function() { var id = $(this).attr("id").substring(4); var value = $(this).children(":nth-child("+descnum+")").text(); $("#text"+id, svgdom).text(value); }); });
И по переключению радиокнопок карта будет показывать нужные цифры. Вуаля !

Интерактивность пятая: всплывающие подсказки Возможно, это уже и лишнее, но пусть будет. Для ровного счёта.

Для данного взаимодействия возьмём плагин jQuery.tooltip и привяжем его к областям на карте. Текст для подсказок будем брать, конечно же, из таблицы:
$(svgdom.getElementsByClassName("area")).tooltip({ bodyHandler: function() { var id = $(this).attr("id"); var area = $("#areas #"+id+" td:nth-child(2)").text(); var result = $("

").append($("").text(area)); $("#areas #"+id+" td:nth-child(2)").nextAll().each(function(){ var pos = $(this).prevAll().length+1; var title = $("#areas thead th:nth-child("+pos+")").text(); var value = $(this).text(); result.append($("

").text(title + ": " + value)); }); return result; } });



Diff .

И так далее… Разумеется, этим возможности взаимодействия с SVG не ограничиваются. Вы можете делать всё . Перетасовывать DOM, менять страницу и SVG по AJAX-запросам и многое, многое другое. Дерзайте.Результат

Оставшиеся подводные камни Из известных проблем пока что можно отметить, что Google Chrome не выводит на печать SVG-картинки. Это или его баг или баг WebKit в целом.Обратная совместимость Почти все современные браузеры поддерживают SVG: IE 9+, Opera 8+, Firefox 3+ (в Firefox 1.5+ частичная поддержка), Chrome всех версий, Safari 3.2+ (более полный список)

Но увы и ах, светлое будущее целиком всё никак не наступит и задумываться о поддержке старых браузеров всё же приходится.

Стандартный и самый простой путь, если SVG - это просто картинка: вставляем замещающее содержимое (отрендеренную в PNG картинку и абзац текста) внутрь тега .

К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.

Если в браузере поддержки SVG нет, будет показана PNG-картинка и текст, уведомляющий пользователей, что их браузер устарел. Никакого интерактива. Впрочем, он, может быть, не очень-то и нужен. Правда, есть один минус - как я заметил, современные браузеры упорно скачивают себе замещающую png-картинку, несмотря на то, что они её всё равно не отобразят.

Желающие могут воспользоваться детектированием поддержки SVG с помощью Modernizr и наворотить на яваскрипте что-нибудь посложнее.

В более сложных случаях вам могут помочь многочисленные решения на Flash, VML или Canvas (или на всех вместе). Список можно посмотреть здесь: HTML5 Crossbrowser Polyfills , но те решения, которые я опробовал, мне, к сожалению, не помогли. Возможно потому, что тот SVG c CSS"ом, что я набросал на коленке - оказался им не по зубам.

Конвертирование SVG в PNG В сети есть много мест, где можно конвертнуть SVG-картинку во что-нибудь другое. Я же предложу воспользоваться командой rsvg-convert из пакета librsvg2-bin . Примерно вот так:
cat map.svg | rsvg-convert > map.png
Впрочем, она может преобразовывать и в другие форматы, а так же увеличивать/уменьшать картинку, смотрите --help.
Для массовых преобразований можно сочинить команду посложнее или посмотреть примеры в Добавить метки