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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этот раз ко мне обратился один приятель и спросил, как это во Flash программисты делают всякие интерактивные штуки? Привело его к этому желание сделать у себя на странице «крутую» интерактивную карту. Чтобы при наведении надписи появлялись... И дал мне собственноручно (надеюсь) нарисованную картинку:

В итоге в выданном мне файле Map.psd имелся один слой с картой и несколько слоёв с наименованиями областей. Вот таким был слой карты:

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

Переделывать всё «как положено» и разрабатывать хорошую архитектуру у меня времени и желания не было. Сделал «на коленке». Может кому-нибудь пригодится.

Открываем Adobe Flash и создаём новый проект «Flash File (ActionScript 3.0)». Щёлкаем в пустом месте и в окне Properties выставляем размер, равный размеру нашей карты, и частоту кадров около 25:

Теперь импортируем в проект наши регионы. Выбираем File > Import > Import to Library и выбираем наш файл Map.psd. Мы должны увидеть, что все слои из файла добавились в библиотеку в виде растровых графических элементов группы «Map.psd Assets».

Для дальнейшей работы из графических элементов необходимо сформировать символы. для этого щёлкаем два раза по значку клипа Map.psd, чтобы просмотреть его содержимое.

Мы видим, что все импортированные растровые элементы здесь выделены. Снимаем выделение, щёлкнув где-нибудь снаружи карты. Теперь щёлкаем отдельно каждую надпись и конвертируем в символ типа Graphic. Для каждой области указываем понятное имя.

Если же Вы делаете надписи текстовыми полями в самом Flash, то их конвертирование можно пропустить.

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

Таким образом мы получили графические символы карты и надписей. Создайте для удобства группу «Графические символы» в окне библиотеки и перетащите в неё новые символы.

Теперь нам необходимо превратить все объекты в сущности, которые будут нам доступны в процессе программировнания. Для этого необходимо каждый символ типа Graphic поместить в клип MovieClip и разрешить доступ к нему из скрипта. Щелкаем правой кнопкой, выбираем Convert to Symbol, указываем понятное имя (Belgorod, Bransk, Kaluga, ...) и разрешаем экспорт:

Эту операцию нужно проделать со всеми спрайтами надписей и карты. Создайте группу «Клипы» и поместите в неё новые символы. Теперь мы сможем из скрипта создавать карту и области с помощью кода

var map = new Map ; var sm = new Smolensk ; var tb = new Tambov ; ...

У всех клипов указывается класс по умолчанию flash.display.MovieClip. У нас все надписи будут интерактивные, то есть они будут следить за перемещением указателя мыши. Для добавления программного кода к элемену Smolensk можно было бы создать класс Smolensk в новом одноимённом файле «Smolensk.as». Но так как надписей у нас много мы сделаем общий класс и сделаем его родительским для всех надписей. Создадим файл RegLabel.as с пустым классом RegLabel

Внимательно относитесь к регистру символов в именах файлов, классов, переменных и прочих наименований в скриптах. Если назовёте файл с маленькой буквы, а в проекте напишете его с большой, то система этот файл не найдёт и выдаст ошибку.

package { import flash . display .*; public class RegLabel extends MovieClip { public function RegLabel () : void { } } }

Теперь установим этот класс родительским (вместо flash.display.MovieClip) у клипа каждой надписи:

Для клипа карты класс менять не надо.

Итого у Вас должны получиться три «папки» в библиотеке:

Теперь необходимо зайти в каждый клип надписи и создать в нём анимацию появления и изчезания текста и расставить контрольные точки.

Заходим в клип надписи «Belgorod» для редактирования:

Для начала добавим новые кадры клавишей F5 и ещё два слоя:

Переименуем нижний слой в Text, второй в Points. Второй слой будет содержать ключевые кадры с метками. Станем на нужный кадр, нажмём F6:

Для добавления метки кадрам в свойствах фрейма укажем их имена Start , Over и Out:

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

stop () ;

в оба ключевых фрейма.

Таким образом мы подготовили разметку для трёх состояний клипа:

Осталось создать анимацию текста. В начале (на участке Start) текст должен быть невидимым. Щёлкаем по первому кадру, выделяем символ с текстом, выбираем значение Alpha (Непрозрачноть) у параметра Color и вместо 100% ставим 1%. Надпись должна пропасть.

Создадим ещё несколько ключевых кадров напротив ключевых кадров других слоёв. Установим непрозрачность надписи в этих кадрах 100% и 1% как указано на рисунке. Идея в том, что на участке Over надпись должна появляться, а на участке Out исчезать.

Чтобы эффекты были плавными создадим анимацию на участках появления и исчезания.

На этом подготовка клипа надписи закончена. Вот что должно получиться:

При перемещении линии-курсора прозрачность подписи должна плавно изменяться. На участке Start надпись не видна (непрозрачность 1%), на участке Over она появляется (анимация непрозрачности от 1% до 100%) и на Out изчезает (от 100% до 1%).

Не ставьте исчезание до 0%, так как при этом клип не будет реагировать на события мыши!

Кадры с метками Start, Over и Out будут использоваться для переключения состояний из скрипта.

Теперь можно скопировать фреймы и вставить на новые слои в клипах всех остальных надписей:

Анимацию нижнего слоя скопировать не получится (придётся в каждом клипе вручную повторять расстановку прозрачности и создание анимации).

Итак, клипы мы создали, осталось дописать скрипты.

Общий для всех надписей файл RegLabel.as. При создании экземпляра надписи станем у клипа этой надписи на кадр Start и остановимся. При наведении и убирании указателя мыши будем переходить на соответствующие кадры (Over и Out).

Добавим параметр, в котором будем хранить ссылку и обеспечим переход по этой ссылке по щелчку мыши.

package { import flash . display .*; import flash . events .*; import flash . net .*; public class RegLabel extends MovieClip { public var link = " " ; // место для ссылки // Конструктор (срабатывает при создании надписи) public function RegLabel () : void { // Перейдём у себя (в клипе) на кадр "Start" и остановимся gotoAndStop (" Start " ) ; // Повесим на себя события наведения и убирания мыши addEventListener (MouseEvent . MOUSE_OVER , _showMe ) ; addEventListener (MouseEvent . MOUSE_OUT , _hideMe ) ; // Ловим щелчки для работы перехода по ссылке addEventListener (MouseEvent . CLICK , _clickMe ) ; } private function _showMe (e : MouseEvent ) : void { // Запустим воспроизведение себя с кадра "Over" gotoAndPlay (" Over " ) ; } private function _hideMe (e : MouseEvent ) : void { // Аналогично с кадра "Out" gotoAndPlay (" Out " ) ; } private function _clickMe (e : MouseEvent ) : void { // Если нам указали ссылку, то переходим по щелчку if (link ) { var targetURL = new URLRequest (link ) ; navigateToURL (targetURL , " _self " ) ; } } } }

Мы создали полноценные клипы вплывающих надписей и клип карты. Пора вывести это всё на экран. Вынесем программную часть проекта в отдельный файл. Создадим файл RegionMap.as с данным содержимым:

package { import flash . display .*; public class RegionMap extends Sprite { // Будем хранить все надписи в массиве для удобства public var labels = new Array ; // Функция-конструктор (выполняется при запуске флэшки) public function RegionMap () : void { // Как видно, в fla файле на единственном кадре ничего нет. // Вставим на экран карту и надписи. // Создаём экземпляр клипа карты var map = new Map ; map . x = map . y = 0 ; // Помещаем на экран addChild (map ) ; // Создаём все надписи и помещаем их в массив labels // Каждая надпись наследует функционал класса RegLabel var r ; r = new Belgorod ; r . link = " http://yandex.ru/yandsearch?text=belgorod " ; r . x = 8 ; r . y = 550 ; labels . push (r ) ; r = new Bransk ; r . x = 46 ; r . y = 380 ; labels . push (r ) ; r = new Kaluga ; r . x = 156 ; r . y = 392 ; labels . push (r ) ; r = new Kostroma ; r . x = 512 ; r . y = 438 ; labels . push (r ) ; r = new Kursk ; r . x = 50 ; r . y = 505 ; labels . push (r ) ; r = new Leningrad ; r . x = 348 ; r . y = 87 ; labels . push (r ) ; r = new Lipetsk ; r . x = 148 ; r . y = 556 ; labels . push (r ) ; r = new Moskow ; r . x = 266 ; r . y = 396 ; labels . push (r ) ; r = new Novgorod ; r . x = 300 ; r . y = 160 ; labels . push (r ) ; r = new Orel ; r . x = 108 ; r . y = 470 ; labels . push (r ) ; r = new Razan ; r . x = 256 ; r . y = 528 ; labels . push (r ) ; r = new Smolensk ; r . x = 150 ; r . y = 292 ; labels . push (r ) ; r = new Tambov ; r . x = 221 ; r . y = 612 ; labels . push (r ) ; r = new Voronezh ; r . x = 98 ; r . y = 632 ; labels . push (r ) ; // Теперь с массивом записей можно делать что угодно. // Мы же просто выведем их на экран: for (var i = 0 ; i < labels . length ; i ++ ) { addChild (labels [ i ] ) ; } // Больше ничего делать не надо, так как всё поведение // надписей прописано в RegLabel.as } } }

Для каждой надписи при необходимости укажите ссылку на нужный раздел сайта (как это показано для Belgorod)

Укажем этот класс исполняемым при запуске проекта:

Теперь можно запустить проект. Результат можно увидеть .

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

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

Итог: друг оказался доволен приобщению к Flash и даже смог кое-что переделать в этом прототипе.

Дабы сразу предупредить «звёздную болезнь начинающего мастера» скажу, что этот примитивный способ далёк от идеалов более-менее обдуманного профессионального проектирования и совершенства кода и годится лишь в качестве урока. В общем, «Все имена и события вымышлены. Любое совпадение с реальными является случайностью. Не пытайтесь повторить это в реальной жизни».

Здесь мы обошлись всего заданием одного класса объекта и классом документа. Интереснее было бы создавать всё программными средствами (используя текстовые поля и порождая от одного класса) по массиву координат, применять прогаммно различные стили и трансформацию. Не помешало бы провести неслабый рефакторинг: вынести данные из логики (во внутренний массив или во внешний файл) с доступом к ресурсам через классы-модели, вынести низкоуровневые операции создания карты, создания и вывода областей в отдельные методы createMap(), createLabels() и showLabels() ; инкапсулировать поле link, снабдив его сеттером с валидацией аргумента...

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

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

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

Сервис Open Street Map (OSM) исповедует те же принципы, которые легли в основу создания всемирно известной Википедии. Вся информация здесь собрана усилиями десятков тысяч добровольцев, предоставляющих в распоряжение проекта данные с персональных GPS-трекеров, аэрофотографии, видеозаписи, спутниковые снимки и панорамы улиц. Хотя точность этих данных значительно отличается в зависимости от региона, все же можно уверенно сказать, что OSM для некоторых районов содержит более детальную и актуальную информацию, чем Google Maps.

Для всех зарегистрированных пользователей доступна функция редактирования карт. Вы можете экспортировать данные из своего GPS-устройства, рисовать маршруты вручную, ставить маркеры, отмечать интересные и памятные места, давать описания и комментарии. Возможен экспорт карт в формате OpenStreetMap XML или в виде изображения (PNG, JPEG, SVG, PD), также можно получить HTML-код для вставки на любой сайт.

Хотя Build-A-Map производит несколько несерьезное впечатление своими большими яркими иконками, все же перед нами вполне взрослый инструмент для создания карт и схем. Источником картографической информации здесь является Google Maps, поверх которого пользователь может создавать свои слои и наносить на них необходимые данные.

Сервис Build-A-Map позволяет добавлять не только банальные метки и треки, но и текстовые надписи, круги, полигональные фигуры, лайтбоксы с фотографиями, прокладывать маршруты и так далее. Ко всему этому вы можете внедрить сведения о погоде, точки Google Places, снимки фотохостинга Panoramio. Полученную таким образом карту можно сохранить в хранилище сервиса и демонстрировать ссылку на нее, или получить код для встраивания в веб-страницу.

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

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

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

Все карты хранятся на серверах сервиса и могут быть доступны в любое время по уникальной ссылке. Кроме того, есть возможность распечатать карту, сохранить в виде изображения и получить html-код для встраивания в сайт или блог.

Этот сервис интересен тем, что позволяет не только проложить трек по карте, но и увидеть, как он будет выглядеть в реальности. TripGeo использует данные Google Maps и Google Street View и объединяет их в одном интерфейсе, позволяя совершить виртуальное путешествие по выбранному маршруту.

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

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

Сервис QuickMaps полностью оправдывает свое название: вы можете сделать здесь карту так быстро, как это только возможно. Для этого вам не понадобится даже регистрироваться — просто придумайте имя для карты, краткое описание и можете браться за дело.

Хотя на первый взгляд может показаться, что инструментов здесь не так уж и много, на самом деле все необходимое присутствует. Вы можете отмечать треки прямыми линиями или в режиме свободного рисования, делать текстовые пометки, импортировать файлы в форматах KML или GPX из Сети и загружать их со своего компьютера. А по части разнообразных маркеров QuickMaps может дать фору куда более серьезным сервисам.

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

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

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

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

Картографический сервис Bing Maps долгое время находится несколько в тени своего основного конкурента. И совершенно зря — после начала дружбы Microsoft и Nokia этот сервис стал использовать данные из Nokia Maps, которые всегда отличались хорошим покрытием и отличной детализацией.

В рамках Bing Maps пользователь получает только минимум функций, необходимых для построения карты, а именно расстановку маркеров, рисование треков и многоугольников различными типами линий, добавление фотографий и комментариев.

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

В этой статье мы рассмотрели десять сервисов, предназначенных для создания, редактирования и публикации пользовательских карт. Все они имеют свои особенности и разную функциональность, поэтому выбор самого лучшего из них сильно зависит от стоящих перед вами задач. Если вам необходимо просто сделать схему проезда для сайта, то проще и удобнее всего воспользоваться Конструктором карт от компании Яндекс или QuickMaps. При необходимости сделать информативный отчет о вашем путешествии лучше обратить внимание на Tripline и Animaps, которые позволяют не только привязывать к треку фотографии и видеоролики, но и заворачивают все это в эффектную оболочку. Ну а для действительно серьезной работы с картами стоит использовать Scribble Maps или Open Street Map, обладающие очень богатой функциональностью.

Давно ушли в прошлое те времена, когда на странице контактов было достаточно указать адрес и номер телефона. Сегодня любая компания, которая ценит своих клиентов, обязательно размещает рядом с адресом карту проезда. Это очень удобно, в том числе и с точки зрения UX. Создать простую карту проезда можно с помощью конструктора Яндекс.Карт или Google Map. Но порой требуется нечто посложнее – например, карта может понадобиться для презентации или для создания инфографики. В таком случае можно воспользоваться специальными онлайн-инструментами для создания пользовательских карт. Некоторые из этих инструментов позволяют создавать интерактивные карты, с помощью которых можно представить информацию в наиболее удобном для пользователя виде. FreelanceToday предлагает вашему вниманию 10 бесплатных инструментов для создания карт.

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

Простой в использовании сервис Scribble Maps имеет множество инструментов для создания практически любого вида карт. Можно сделать обычную маршрутную карту, но одновременно с этим сервис может быть полезен дизайнерам, которые хотели бы создать красочную инфографику. В Scribble Maps имеется возможность добавлять текст, изображения, рисовать и закрашивать различные геометрические фигуры, расставлять маркеры и многое другое. Если нужна инфографика на основе карты – лучшего инструмента не придумать. Готовую карту можно разместить на сайте, в блоге или отправить ее клиенту, сохранив ее в формате PDF.

Создатели сервиса MapTiler позаботились о том, чтобы созданные пользователем карты отображались на любых устройствах. MapTiler – одно из самых удобных приложений для подготовки тайлов с использованием API Google Maps. К сожалению, бесплатная версия программы обладает очень ограниченным функционалом, с помощью которого можно создавать лишь самые простые карты.

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

После покупки Nokia корпорация Microsoft значительно улучшила свой картографический сервис Bing Maps. Карты Nokia всегда отличались высокой детализацией и хорошим покрытием, так что можно не переживать за точность. Функционал сервиса не может похвастаться разнообразием, но треков, маркеров и геометрических фигур вполне достаточно, чтобы создать достаточно информативную карту. Также имеется возможность добавления изображений и текстовых комментариев. После окончания работы результат нужно сохранить, после чего Bing Maps сгенерирует ссылку и код для встраивания карты на сайт.

Дружественный пользовательский интерфейс сервиса Click2Map поможет быстро и легко создавать интерактивные карты любого уровня сложности. Мощный функционал сервиса позволит создать профессиональные карты в кратчайшие сроки. С помощью большого набора иконок можно персонализировать карту, если требуется рассказать о какой-то конкретной сфере деятельности. Тематические маркеры позволят пользователям легко ориентироваться по карте. Также маркеры можно использовать для определения местоположения конкретной точке. Маркер поддерживает различные виды контента – текст, изображения, HTML-код. Чтобы получить доступ ко всем возможностям сервиса, придется оформить платную подписку, однако если зарегистрировать бесплатный аккаунт, то можно создавать карты с ограниченным количеством маркеров, максимум 10.

Картографический сервис ZeeMaps позволяет легко создавать, публиковать и делиться интерактивными картами. Сервис работает на основе Google Map и с его помощью можно создать даже очень сложную карту с большим количеством данных. Статистику можно импортировать из Excel, Access, MS Outlook и других программ. Ограничений на количество маркеров нет, информацию можно в любой момент изменять по желанию пользователя. К маркерам можно добавлять картинки, текст, аудио-файлы, а также видео из YouTube.

Приложение UMapper позволяет создавать встраиваемые флэш-карты. Визуальный редактор UMapper интуитивно понятен, с его помощью можно добавлять маркеры, рисовать фигуры и добавлять интерактивные элементы на карту. Сервис берет картографические данные из Microsoft Virtual Earth, Google, Yahoo, OpenStreet, что делает его действительно универсальным. С помощью приложения даже можно заработать – если созданная карта за месяц получит 50 тысяч просмотров, сервис перечислит на счет пользователя $12,50. К недостаткам UMapper можно отнести водяной знак, который появляется на карте при использовании бесплатной версии и показ на карте встроенных рекламных объявлений.

GmapGis – простенькое-онлайн приложение для рисования на картах Google. Можно расставить маркеры, измерить расстояние между двумя точками на карте, рисовать линии и геометрические фигуры. Весь функционал представлен в верхней части страницы, так что проблем с использованием сервиса не будет – все очень понятно. Полученный результат можно сохранить как файл или в виде ссылки. Во время использования GmapGIS может появиться проблема – пользователь не может провести линию или нарисовать фигуру. В этом случае разработчики рекомендуют закрыть и снова открыть браузер. После этого появится полный доступ ко всему функционалу.

• Tutorial

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

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

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

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

Я же, к примеру, возьму карту одной круглой страны (исходник на 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 .

Результат:

Мы же будем использовать 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, вставленным через чуть сложнее:
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.

Здесь мы будем при щелчке по флажку ставить или убирать класс 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 .

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

Во-вторых, нам нужно место на карте, где будут отображаться данные. Добавим на карту пять блоков (по одному на каждый регион, соотнеся их 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 - это просто картинка: вставляем замещающее содержимое (отрендеренную в PNG картинку и абзац текста) внутрь тега .

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

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

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