Как лучше создать карту в. Сервисы для создания интерактивных карт. Преобразование снимка в формат OziExplorer

Пишу пост для того, чтобы вы с помощью 7 картинок создали карты своих путешествий по РБ, тех точек, о которых вы уже написали, о которых ещё напишете. Нужно это и вам и нам:)
Вам(авторам) поможет структурировать поездки и написание отчётов. Нам(читателям) поможет проложить новые маршруты и увидеть невиданное!
Особенно пост посвящается taborovtsova , victogan , azarkinm , которым я уже советовал создать карты:)
И многим друзям (в т.ч. и взаимным), которые постоянно бороздят страну!
Итак, 7 картинок:
(вам нужен аккаунт в Корпорации Добра, так что если до сих пор его у вас нет, то пришёл час наверстать!)

1. Пояснения излишни


2. Пояснения излишни

3. Пояснения излишни

4. Делаем в обозначенном порядке руководствуясь фантазией и вдохновением в написании названия:)


Итак, пустая карта с название уже создана! Теперь осталось нанести точки!

5. Пояснения излишни

6. Делаем в обозначенном порядке. Шаги с 1-го по 5-ый повторям n-ное количество раз (чем больше точек, тем радостнее читателям!). После завершения нанесения точек (или когда уже пора уходить с работы:) нажимаем кнопку "Готово". Продолжить редактирование карты можно в следующий рабочий день.

И 7! Поделитесь ссылкой на вашу карту или вставьте код в блог (при условии HTML-редактирования)


Вот и всё. Теперь вы видите, где больше всего бывали, а где пропустили. Поздравляю!

Смотрите также:

Давно ушли в прошлое те времена, когда на странице контактов было достаточно указать адрес и номер телефона. Сегодня любая компания, которая ценит своих клиентов, обязательно размещает рядом с адресом карту проезда. Это очень удобно, в том числе и с точки зрения 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 может появиться проблема – пользователь не может провести линию или нарисовать фигуру. В этом случае разработчики рекомендуют закрыть и снова открыть браузер. После этого появится полный доступ ко всему функционалу.

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

Если вы воспользовались этим уроком, рассказывайте, показывайте, мне очень хотелось бы увидеть, что у вас получилось! И не стесняйтесь, задавайте вопросы тоже!

Для этого урока вам будет нужен шрифт Booter Zero Five (ссылку см. В конце урока).

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

Прежде чем начать... вам понадобится Photoshop, файл карты и шрифт (ссылку см. В конце урока). Также было бы неплохо иметь на компьютере отсканированное фото какого-нибудь ландшафта, который вы бы хотели изобразить. Для создания своей карты я использовал программу Photoshop CS3 Extended. Я также использовал кисти для некоторых этапов работы.

ШАГ 1

Внимательно посмотрите на этот скриншот. Не забудьте Сохранить его Как (Save as...) и создать слой для фона.

ШАГ 2

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

Если у вас есть эскиз, отсканируйте его или откройте фото. Откройте его в отдельном файле PS, увеличьте его яркость, если надо (Изображение – Коррекция – Яркость/Контраст) (Image – Adjustments – Brighten/Contrast). Вставьте изображение, перетащив его мышкой на файл с картой. Вы можете изменить размер изображения двумя способами: либо нажав Редактировать – Трансформировать – Изменить размер (Edit – Transform – Scale), либо, удерживая клавишу SHIFT, подергать за диагональные стрелочки, которые появятся на уголках изображения.

ШАГ 3

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

ШАГ 4

После завершения эскиза, возьмите Ластик (eraser) и пройдитесь по внешним краям эскиза. Они будут кривыми и выходить за рамки, поэтому вам надо будет несколько раз пройтись по этим линиям, чтобы все вычистить. Если вы хотите сделать острова, делайте их сейчас.

ШАГ 5

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

Теперь можно взять инструмент Быстрое выделение (quick selection tool) и выделить все, что находится за пределами вашей суши. После этого, мы начинаем еще больше стирать; никакой континент или страна не бывает идеально прямым, круглым или угловатым. Давайте добавим обломки, впадины и трещины по всей нашей карте! =Р Также, добавьте несколько рек и озер не-идеальной-формы. Вашему народу наверняка понадобится вода, чтобы выжить!

ШАГ 6

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

Население! Откройте группу Города (Cities), и сделайте Капитолий...точнее Столицу (capital по ошибке превратился в capitol) и Город (town) видимыми. Столица обведена красным. У вас, вероятно, будет не один населенный пункт/город/деревня/т.д., и вот как их размножить: кликните второй кнопкой мыши на слое с Городом (town) и выберите Дублировать слой/Сделать дубликат (duplicate layer) в списке, который появится. Новый город появится поверх вашего первоначального города. Запомните это для следующего этапа!

ШАГ 7

Откройте группу Ландшафт (landscape). У вас есть на выбор более реалистичные объекты и похожие на рисунок-от-руки. Чтобы картинка не выглядела нелепо, используйте только один из этих стилей. Вы можете разместить эти объекты где хотите, также вы можете их дублировать (размножать). Когда «понасажаете» на свой участок деревьев, разместите горы, скалы и леса, обдумайте окружающую среду, если вы еще этого не сделали. Цивилизация и растительность, например, обычно появляются там, где есть источники воды. Если вам нужно изменить размер чего-либо, используйте прием, описанный в ШАГЕ 2.

ШАГ 8

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

Откройте группу Текст (text). В ней содержатся следующие слои: название Реки/Лесаriver/forest name), название Города (town name), и название Континента (continent name). Вы можете использовать большее разнообразие шрифтов (например шрифт Calibri для названий лесов, Juice – для названий стран, и т.д.). Самый простой способ сделать так, чтобы шрифт вписался: создаем дубликат оригинального текста, и меняем его шрифт. Далее, играем с эффектами. В данном случае внешнее сияние (outer glow) и тень (drop shadow) очень хорошо здесь смотрятся. Не забудьте дать имена всем мирам, континентам, странам, регионам, штатам, деревням, населенным пунктам, городам, столицам, океанам, рекам, озерам, горам и равнинам. Вам не обязательно называть каждую деталь на карте, но это будет резать глаза.

И готово! ВАУ! Ну, по крайней мере, если вы действительно не хотите сделать из своей карты нечто единственное в своем роде. Если все же хотите...

ДОСТУП НА НОВЫЙ УРОВЕНЬ ОТКРЫТ!!

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

СУПЕР-ДРЮПЕР ЭФФЕКТЫ

Нижеописанное – опционально, однако здесь содержится некоторая информация, которая поможет улучить вашу карту.

Карточная Бумага

Если вы хотите больше внимания и текстуры на своей карте, можете изменить фон! Для начала, создайте новый слой поверх слоя с Картой (map). Возьмите кисть, выберите белый цвет, и за дело. Лично мне для данного дела нравятся рассеивающиеся (scatter) кисти, но вы можете использовать любые другие, например, с монетами, кораблями, животными, растениями, и т.д.

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

Добавьте Яркости

Ваша карта кажется вам недостаточно яркой? Нажмите Изображение –Коррекция (Image – Adjustments) и перед вами откроются следующие возможности: Тон/Насыщенность (Hue/Saturation), Яркость/Контраст (Brightness/Contrast) и Кривые (Curves), которые являются лучшими корректирующими опциями для нашей карты. Вперед, экспериментируйте! Обратите внимание на разницу между этим скриншотом и тем, что выше. Спасибо коррекции Яркости/Контраста (Brightness/Contrast).

Направляющие Стрелки

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

Ни одна приличная карта не может обойтись без компаса!

Слой с Компасом (compass) располагаем под группой слоев Ландшафт (landscape). Разместите его в области, где нет суши, подогнав по размеру, если необходимо. Мне также нравится добавлять всякие эффекты к компасу. Экспериментируйте! На скриншоте вы видите мои любимые настройки (выделенные «маркером» слова – это названия различных эффектов).

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

Водяной знак – защита от параноиков (меня, включительно). Водяные знаки могут защитить вашу работу от кражи. Если у вас есть своя подпись – или, даже, если вы хотите использовать свое имя, e-mail, адрес странички на dA – вы может добавить ее. Создайте новый слой (обычный или текстовый). Все что надо сделать, это добавить «водяной знак» на новый слой, подогнать его по размеру и уменьшить непрозрачность (Opacity) или оставить, как вам нравится. Говоря о водяных знаках и о том, что нравится... весь этот урок промаркирован водяными знаками... даже не думайте украть его!

Также, если вы хотите создать пути и знаки на карте, чтобы придать ей вкус ПРИКЛЮЧЕНИЙ, просто добавьте новый слой поверх слоя с ландшафтом (land), возьмите кисть, выберите цвет, близкий к цвету карты, и рисуйте! Вы также можете использовать кисти с юмором, как, например, морской дракон на моей карте.

Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.

КАРТА ГОТОВА!

Скачать шрифт Booter Zero Five можно тут: Вы не можете скачивать файлы с нашего сервера
- Скачать со слоями-объектами

Вы так же можете просмотреть этот урок в видео-формате!

(хорошая штука), сегодня речь снова пойдет о сервисе от Яндекса и снова про карты, только не про пластиковые и не про игральные, а про карты местности.

Возможность помочь клиентам добраться в нужное место – это весомый вклад в развитие бизнеса, чем больше людей дойдет куда надо, тем выше будут доходы и прибыль. Так что, если ваш бизнес как-то привязан к объектам на местности, то вставить хорошую карту на сайт надо обязательно.

Зачем нужна интерактивная карта

Удобно для клиента – легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.

Удобно владельцу сайта – все корректировки вносятся на карту автоматически, достаточно один раз вставить карту на сайт, потом обновления подгружаются из базы Яндекса сами.

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

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

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

Наличие удобной схемы проезда на странице контактов в наше время является правилом хорошего тона для любой компании.

И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем ).

Конструктор карт Яндекс

Если у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на Yandex. Даже если он вам не нужен для работы с электронной почтой, пригодится для других сервисов поисковика, например, для Яндекс Метрики или Яндекс Вебмастер.

Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/

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

Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.

Все настройки производятся в визуальном конструкторе, никакие коды править не придется, работа по адаптации мало отличается от обычного использования Яндекс карт пользователем. Начнем с добавления объектов.

Добавление объектов

Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:

После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:

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

Слева наполняется список всех отмеченных на карте адресов.

Изменение масштаба и положения

С помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.

Для перемещения карты в разные стороны нужно захватить ее нажатием левой кнопки мыши и двигать куда нужно.

Контуры объектов (многоугольники) и линии

При необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.

Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:

Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).

Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.

Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).

Завершаем маршрут нажатием на «Готово».

Вид карты и наложение пробок

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

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

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

Название и описание

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

Код карты для вставки на сайт

Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:

• интерактивную карту (о которой я говорил с самого начала);
• статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
• печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.

Выбор между ними будет выведен сразу после сохранения.

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

На этом этапе есть возможность вернуться к редактированию карты, в левой верхней части окна есть соответствующая надпись со стрелкой.

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

При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)

Как вставить карту Яндекс на сайт

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

Карта, которую я сделал

Вот что получилось у меня после всех проведенных настроек:

Удобен сей элемент всем – и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.

Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.

Плагины для WordPress и других CMS

Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.

Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины .

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

Google, Yandex, Microsoft и прочие гиганты продвигают свои картографические сервисы как только позволяет их бюджет. OpenStreetMap не отстаёт стараниями тысяч своих пользователей. Но совсем не факт, что именно ваш город уже нанесён на карту с нужной детализацией. В тоже время у вас почти наверняка есть бумажная карта вашего города, которую можно отсканировать. Благодаря нашему сервису этого достаточно, чтобы сделать свою интерактивную карту online!

Более того, речь может идти не о карте города на Земле, а о вымышленном мире. Вам до безумия нравится трилогия «Властелин колец»? Чудесно, вы легко и просто можете сделать свою карту Средиземья и отметить на ней особо значимые места, прикрепить комментарии, описания и даже фотографии с автографом самого Фродо. Или, возможно, вы тратите всё свободное время на изучение игрового мира The Eldest Scrolls IV: Oblivion? Тогда вам будет отличным подспорьем карта, на которой вы сами разметите все форты, пещеры и стоянки, оставите комментарии и добавите скриншоты своих игр. Более того, совсем не обязательно речь должна идти о картах. С тем же успехом можно демонстрировать схему пожарной эвакуации из здания или план палуб корабля. Мы даём инструмент, а уж его использование ограничено только вашей фантазией.

Прежде чем перейти к описанию того, как сделать свою интерактивную карту, последнее отступление. То, что мы предлагаем, есть конструкция на Google Maps API. Это значит, что всё тоже самое и многое другое вы можете сделать изучив Google API или API любого другого картографического сервиса. Но такое изучение потребует некоторых навыков в программировании. Мы же предлагаем хороший набор возможностей по созданию карт не требующий специальных навыков для использования.

Итак, приступим!

Общая идея. На входе — изображение карты, на выходе — интерактивная карта.

Алгоритм действий.

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

С помощью программы подготовить карту к загрузке на сервер.

Необходимо указать «Изображение карты» и «папка для сохранения». Всё остальное — опционально, хотя желательно заполнить всё. «Картинка для фона» — это изображение размером 256х256 точек в формате GIF, оно будет использоваться для вывода по периметру вашей карты (несколько примеров вы найдёте в архиве с программой). Когда всё поля заполнены жмите «Подготовить файлы карты». По окончании процесса в указанной папке окажется куча файлов.

Если у вас нет сайта — зарегистрируйте хотя бы бесплатный. Подойдёт практически любой, например, 50webs.com. Некоторые бесплатные хостинги «не отдают» картинки скрипту запущенному с другого сайта, поэтому выбирайте такой, который лишён этого недостатка. На платных хостингах этой проблемы не возникает.

Залейте папку с файлами подготовленными в п.2. на свой сайт. Рекомендуем использовать программу доступа по FTP FileZilla . Для определённости будем считать, что ваш сайт имеет адрес http://yourtestsite.ru, а папка, которую вы залили на сайт называется mymap. В этом случае ваши файлы располагаются по адресу http://yourtestsite.ru/mymap.

Обратитесь по адресу http://сайт/map/map.php?url=http://Адрес-вашего-сайта/ваша-папка в нашем примере это будет http://сайт/map/map.php?url=http://yourtestsite.ru/mymap. Это всё! Ваша карта уже действует!

Допишите к URL из п.5 «&d=markers » (в нашем примере адрес будет выглядеть так: http://сайт/map/map.php?url=http://yourtestsite.ru/mymap&d=markers). В этом режиме вы можете размещать на карте маркеры (щелчком на карте, также маркеры можно перетаскивать мышью) и в редакторе справа вводить к ним описания, выбирать изображение маркера из списка доступных. Не забывайте нажимать иконку с дискетой (сохранить) по окончании редактирования каждого маркера.

Параметры маркера на карте

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

На карте могу выводиться маркеры с разными иконками, удобно иметь возможность скрыть/показать сразу все маркеры с конкретной иконкой. Чтобы дать пользователям такую возможность установите галочку «Показывать список типов маркеров». Если нужна возможность видеть список текстов введённых как описание маркеров и быстро переходить к соответствующему маркеру на карте, установите галочку «Показывать список маркеров».

Когда все маркеры расставлены/отредактированы, положение и масштаб карты заданы, параметры определены нажмите кнопку «получить файл маркеров». Скопируйте текст из открывшегося окна и сохраните в файл markers.js. Загрузите этот файл в ту же папку вашего сайта, где уже лежат кусочки карты.

Обратившись по адресу вида http://сайт/map/map.php?url=http://Адрес-вашего-сайта/ваша-папка&m=markers вы увидите свою карту с отмеченными вами местами. При щелчке на маркере в открывшемся окошке будет выведено ваше примечание к нему.

Примечание : совсем не обязательно использовать имя «markers». Вы можете использовать любое имя файла. Более того, можно использовать несколько файлов маркеров с одной картой для вывода на ней объектов разных типов (например, http://….&m=cinema — кинотеатры (имя файла cinema.js), http://….&m=school — школы (имя файла school.js) и т.д.).

Вставка на свой сайт.

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

Демонстрация
Интерактивная карта Средиземья с несколькими маркерами.

Смотрите также