Карта россии svg с регионами

Карта россии svg с регионами

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Downloading

Want to be notified of new releases in kalyabin/russian-map ?

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio

Latest commit

Files

Permalink

Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Update README.md Oct 18, 2017
raphael-min.js initial commit Oct 18, 2017
russian-map.js событие на клик по региону Dec 22, 2017
with-districts.html fix typo May 21, 2019
with-districts.json
with-regions.html fix typo May 21, 2019
with-regions.json

Карта России в SVG

Простенькая библиотека для рисования у правления картой Российской Федерации в SVG. Работает на основе библиотеки RaphaelJS. За рендер карты отвечает скрипт russian-map.js.

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

Откуда берутся координаты границ

Изначально координаты границ были взяты с какого-то сайта, предположительно, из Wikipedia. После этого координаты неоднократно модифицировались.

Координаты для SVG и параметры отображения SVG-элемента берутся:

Мы рады предложить вам карту России для вебсайтов с федеральными субъектами в формате HTML5. Карта специально приспособлена для отображения на любых iOS устройствах, включая iPhone, iPad, и, конечно, прекрасно работает во всех современных настольных браузерах. На интерактивной карте России изображены федеральные субъекты РФ, на каждый из которых можно щелкнуть мышью, причем целевая страница у каждого региона может быть своя. Благодаря настраиваемым цветам, ссылками и всплывающим окнам вы легко сможете настроить карту России под ваши собственные предпочтения. Интерактивная HTML5 карта Российской Федерации идеально подойдет любому бизнесу для визуального отображения географии местных представителей, дилеров, офисов или сервисных центров.

Читайте также:  Игра симс на айфон

Карта выполнена на основе библиотеки JavaScript Raphael, обеспечивающей безупречную работы карты в следующих браузерах: Chrome, Firefox, Safari, Opera, IE7, IE8, IE9 и IE10.

Содержание

Особенности

Интерактивная HTML5 карта России предназначена как для совместной работы с Flash-картой России, так и отдельно от нее. Технология HTML5 обеспечивает безупречную работу карты на различных устройствах и планшетах, включая iPhone и iPad, а также на всех современных браузерах. Комбинируя Flash карту России с картой на базе HTML5, вы можете отображать Flash вариант для пользователей настольных ПК, а пользователям переносных устройств показывать HTML5-вариант.

Что нового

Версия 1.5
Добавлено API для взаимодействия с картой посредством JavaScript.

Версия 1.4
Возможность использовать карту как с фиксированным размером, так и в "responsive" режиме.

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

Версия 1.3.4
Исправлена работа скриптов карты, когда на странице установлены другие JS плагины.

Версия 1.2

  • Появилась возможность изменения размеров карты в файле настроек settings.js
  • Подсвеченные регионы теперь могут отбрасывать тень (не работает в IE)

Версия 1.1
Улучшено взаимодействие с пользователем при работе под iPhone и iPad. Вы можете выбрать различные виды действий, назначаемые на щелчок мышью. Поддерживаются следующие настройки:
— первое нажатие отображает всплывающее окно для выбранного региона. Второе нажатие открывает ассоциированный URL.
— URL открывается сразу. Такое поведение полезно, если вам не нужно показывать всплывающее окно.

Общие настройки

Конфигурация HTML5 карты России производится с помощью двух файлов: settings.js и map.css.

Все изменения и индивидуальные настройки должны производится в JS файле. Для редактирования файла мы рекомендуем использовать бесплатный Notepad++. Конечно, вы можете использовать и любой другой редактор HTML.

Конфигурацию и индивидуальную настройку можно выполнить на локальном компьютере. После этого отредактированные файлы следует загрузить на ваш веб-сервер.

Читайте также:  Iphone 5s загорается яблоко и перезагружается

Настройка файла "settings.js"
Файл settings.js позволяет вам определить свойства карты: цвета регионов, границ, обозначений регионов, а также настроить ссылки и информацию, отображаемую во всплывающих окнах.

Имеются следующие настройки:

Имя параметра Значения Описание
mapWidth 600 Задает ширину карты
//mapWidth 600 Если параметр ширины закомментирован, то карта переключается в "responsive" режим
mapHeight 450 Задает высоту карты
shadowWidth 2 Толщина тени
shadowOpacity 0.3 Прозрачность тени
shadowColor "black" Основной цвет тени
shadowX 1 Горизонтальное смещение тени
shadowY 2 Вертикальное смещение тени
iPhoneLink true/false Параметр определяет работу на iPhone и iPad.
Значение ‘true’ означает, что ассоциированный URL будет открываться сразу. Это полезно, если вам не нужно отображать всплывающее окно.
Значение ‘false’ означает, что при первом нажатии отображается всплывающее окно выбранного региона, а при втором – открывается URL.
isNewWindow true/false Значение ‘true’ означает, что ссылки следует открывать в новом окне
borderColor Шестнадцатеричное значение Цвет границ региона
borderColorOver Шестнадцатеричное значение Цвет границ региона, когда над ним находится указатель мыши
nameColor Шестнадцатеричное значение Цвет короткого названия региона (только для карты США)
nameFontSize Высота в px Размер шрифта короткого названия региона (только для карты США)
nameFontWeight bold/normal Начертание шрифта названия региона (полужирный, нормальный)(только для карты США)
nameStroke true/false Обводка текста для кодов регионов
overDelay миллисекунды Задержка перед анимацией выбора региона
Настройки региона
id number Идентификатор региона. Не должен меняться
name text Название региона
shortname text Короткое название региона
link text Ссылка на страницу, открываемую при нажатии на регион. Может содержать код JS
comment HTML formatted text Текст, отображаемый во всплывающем окне. Может содержать HTML форматирование
image text Имя файла изображения, отображаемого во всплывающем окне
color_map Шестнадцатеричное значение Цвет региона. По умолчанию #7798BA
color_map_over Шестнадцатеричное значение Цвет региона, когда над ним находится указатель мыши. По умолчанию #366CA3

Пример
Внимание: для правильного отображения названий регионов на странице кодировка файла настроек должна совпадать с кодировкой страницы.

Читайте также:  Классные имена для аватарии для мальчиков

Установка HTML5 карты России

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

  • US Map
  • World Map
  • Features
  • Docs
  • Pricing
  • Contact
  • Products
  • Maps
  • World Map
  • USA State Map
  • USA County Map
  • USA Congress
  • North America
  • Europe
  • Canada
  • United Kingdom
  • Australia
  • Custom Map
  • More maps.
  • Data
  • US Zips
  • US Cities
  • World Cities
  • All Products
  • Free Russian Federation SVG Map | Resources

    Below is an SVG map of the country of Russian Federation. It has been cleaned and optimized for web use. Features include:

    • Simplified to load quickly with minimal loss of detail (235.9 KB).
    • License: Free for Commercial and Personal Use (attribution appreciated!).
    • All administrative regions are identified by name and id in the source code.
    • Uses the beautiful Mercator Projection.

    Need something changed? We can adjust the resolution, projection, borders and more.
    Contact us for quote, starting from $99.

    Make this Russian Federation map interactive and customize it online!

    Our software turns this static SVG map into a zoomable, clickable, mobile-friendly map like the one below. We make it easy to customize region colors, descriptions, urls etc. and add locations like the capital city, Moscow, to your map. Get started now with our online customization tool.

    Included Administrative Regions

    Download started.

    Your download has started. The file ru.svg should appear in the bottom of your browser shortly.

    Would you consider supporting our work:

    • With this prepopulated tweet on Twitter.
    • By customizing this map with our commercial software.

    Resources

    Tools, freebies, and articles about mapping and web development. Things we’ve learned and want to share!

    Ссылка на основную публикацию
    Какие комбинации клавиш необходимы для получения символов
    Здравствуйте! Вы никогда не задумывались, сколько порой приходится тратить времени на обычные операции: выделить что-то мышкой, скопировать, затем вставить в...
    Как удалить файл php
    Как удалить файл с моего сервера с помощью PHP если файл находится в другой директории? вот мой макет страницы: projects/backend/removeProjectData.php...
    Как удалить файл если он используется
    Не редко встречаются ситуации, когда нужно удалить файл, но Windows сообщает, что файл занят другим процессом. Это может быть важный...
    Какие компрессоры стоят в холодильниках бирюса
    С появлением широкого ассортимента импортного холодильного оборудования бытовая техника отечественного производства постепенно отошла на второй план. Однако ошибочно думать, что...
    Adblock detector