Cведения о jvectormap

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

Cведения о jvectormap

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

Для создания простой интерактивной карты при помощи jvectormap требуется сформировать текстовый файл, содержащий java script по заданному шаблону. Главной особенностью и сложностью данного скрипта является использование SVG пути (SVG path) для обозначения границ регионов, отображаемых на карте.

Требования к SVG пути для jvectormap

Технология SVG применяется широко и задокументирована очень подробно.

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

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

M498.73,376.99l-1.42,-38.01l-4.48,-23.98l … l37.68,45.12Z, то есть

M[начальные координаты]l[сдвиг]l[сдвиг]l...l[сдвиг]Z

Пример создания интерактивной карты

1. Постановка задачи

Имеется набор координат Белгородской области, заданных градусами широты и долготы. Исходный набор координат получен при помощи Google Earth. Требуется для исходных координат создать интерактивную карту при помощи jvectormap с использованием картографической проекции Меркатора.

2. Описание архива

Поставленная задача решена при помощи MATLAB'а (версия 2011a). Матлабовский скрипт, формирующий файл java script, а также набор исходных данных и результат можно скачать в архиве interactive-svg-map-example.rar. Архив содержит ряд файлов:

1. Lonlan_2_SVG.m — основной файл, содержащий матлабовский скрипт;
2. getMerc.m — функция картографической проекции Меркатора;
3. lonlan.mat — файл, содержащий исходный набор координат Белгородской области;
4. map.js — файл, полученный в результате работы матлабовского скрипта;
5. map.html — файл для проверки корректности map.js;
6. czech_ags_merc_en.js — пример java script для карты с несколькими областями;
7. czech.html — файл для проверки czech_ags_merc_en.js.

3. Решение

Я люблю MATLAB, так что решение задачи реализовала именно в этом пакете.

Скрипт Lonlan_2_SVG.m состоит из набора простых шагов.

3.1. Инициализация

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

3.2. Проекция Меркатора

Производится картографическое преобразование (проекция) Меркатора для всех исходных точек.

3.3. Определение граничных точек области

Данный шаг необходим для последующей параметризации java script файла, в частности, именно здесь определяются значения параметра bbox.

3.4. Масштабирование координат до размеров картинки

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

3.5. Создание SVG пути

Формирование строки SVG пути согласно требованиям jvectormap.

3.6. Формирование java-script файла

Полная параметризация java-script файла согласно требованиям jvectormap.

3.7. Запись java-script файла

Запись результирующей строки в файл с расширением .js.

4. Результат

В результате работы скрипта Lonlan_2_SVG.m был получен файл map.js. Проверку корректности файла можно сделать, если открыть в браузере файл map.html.

В архиве также содержится файл czech.html, открыв который можно увидеть интерактивную карту с набором областей. Параметры данной карты содержатся в файле czech_ags_merc_en.js.

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

1. <title>Что вы хотите, чтобы было в заголовке</title>
2. <script src="название файла js, который формирует скрипт"></script>
3. $('#название div').vectorMap({
4. map: 'название карты' (указанное в 'addMap')
5. <div id="название div” style="width: ширина px; height: высота px"></div>

Настоящий пример создан в июне 2016 года, если вы его скачали значительно позже, то проверьте актуальность скриптов jquery-1.8.2.min.js и jquery-jvectormap-2.0.3.min.js. Версии могут быть обновлены и старые не работать. Актуальные можно найти на jvectormap.com.

5. Заключение

Создание собственной интерактивной карты при помощи jvectormap является довольно простой и компактной задачей. Скачав настоящий пример, вы сможете это сделать за несколько минут. Мне понравилось работать с jvectormap!

Удачи!

jQuery('#ru_map').vectorMap({ map: 'ru_mill' });

Для создания простой интерактивной карты при помощи jvectormap требуется сформировать текстовый файл, содержащий java script по заданному шаблону. Главной особенностью и сложностью данного скрипта является использование SVG пути (SVG path) для обозначения границ регионов, отображаемых на карте.

Требования к SVG пути для jvectormap

Технология SVG применяется широко и задокументирована очень подробно.

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

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

M498.73,376.99l-1.42,-38.01l-4.48,-23.98l … l37.68,45.12Z, то есть

M[начальные координаты]l[сдвиг]l[сдвиг]l...l[сдвиг]Z

Пример создания интерактивной карты

1. Постановка задачи

Имеется набор координат Белгородской области, заданных градусами широты и долготы. Исходный набор координат получен при помощи Google Earth. Требуется для исходных координат создать интерактивную карту при помощи jvectormap с использованием картографической проекции Меркатора.

2. Описание архива

Поставленная задача решена при помощи MATLAB'а (версия 2011a). Матлабовский скрипт, формирующий файл java script, а также набор исходных данных и результат можно скачать в архиве interactive-svg-map-example.rar. Архив содержит ряд файлов:

1. Lonlan_2_SVG.m — основной файл, содержащий матлабовский скрипт;
2. getMerc.m — функция картографической проекции Меркатора;
3. lonlan.mat — файл, содержащий исходный набор координат Белгородской области;
4. map.js — файл, полученный в результате работы матлабовского скрипта;
5. map.html — файл для проверки корректности map.js;
6. czech_ags_merc_en.js — пример java script для карты с несколькими областями;
7. czech.html — файл для проверки czech_ags_merc_en.js.

3. Решение

Я люблю MATLAB, так что решение задачи реализовала именно в этом пакете.

Скрипт Lonlan_2_SVG.m состоит из набора простых шагов.

3.1. Инициализация

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

3.2. Проекция Меркатора

Производится картографическое преобразование (проекция) Меркатора для всех исходных точек.

3.3. Определение граничных точек области

Данный шаг необходим для последующей параметризации java script файла, в частности, именно здесь определяются значения параметра bbox.

3.4. Масштабирование координат до размеров картинки

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

3.5. Создание SVG пути

Формирование строки SVG пути согласно требованиям jvectormap.

3.6. Формирование java-script файла

Полная параметризация java-script файла согласно требованиям jvectormap.

3.7. Запись java-script файла

Запись результирующей строки в файл с расширением .js.

4. Результат

В результате работы скрипта Lonlan_2_SVG.m был получен файл map.js. Проверку корректности файла можно сделать, если открыть в браузере файл map.html.

В архиве также содержится файл czech.html, открыв который можно увидеть интерактивную карту с набором областей. Параметры данной карты содержатся в файле czech_ags_merc_en.js.

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

1. <title>Что вы хотите, чтобы было в заголовке</title>
2. <script src="название файла js, который формирует скрипт"></script>
3. $('#название div').vectorMap({
4. map: 'название карты' (указанное в 'addMap')
5. <div id="название div” style="width: ширина px; height: высота px"></div>

Настоящий пример создан в июне 2016 года, если вы его скачали значительно позже, то проверьте актуальность скриптов jquery-1.8.2.min.js и jquery-jvectormap-2.0.3.min.js. Версии могут быть обновлены и старые не работать. Актуальные можно найти на jvectormap.com.

5. Заключение

Создание собственной интерактивной карты при помощи jvectormap является довольно простой и компактной задачей. Скачав настоящий пример, вы сможете это сделать за несколько минут. Мне понравилось работать с jvectormap!

Удачи!