Интерактивная SVG-карта

Интерактивная SVG-карта

Скрипт, превращающий статичную SVG-карту в интерактивную. Если для области карты будет определен блок с описанием, то область может визуально отличаться, а при клике описание будет выводится поверх карты в отдельном блоке.

Внешний вид блоков и участков карты настраивается по средствам CSS.

В описание можно добавить любое содержимое, даже изображения или видео.

Если для области не указано описание, то при нажатии всплывающее окно не появится.

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

Вы можете использовать любую карту в формате SVG.

SVG

Файл SVG должен содержать все активные контуры внутри группы.

Пример:

<svg id="wrapper" viewBox="0 0 830 683.385" height="683.385" width="830" xmlns="http://www.w3.org/2000/svg"
     version="1.1">
    <g>
        <path id="HI"
              d="m222.566 483.415 1.7-3.07 1.95-.3.28.7-1.8 2.66h-2.12zm8.84-3.2 5.33 2.22 1.82-.28 1.4-3.35-.56-2.94-3.63-.4-3.5 1.53-.85 3.22zm26.65 8.66 3.22 4.76 2.1-.28.98-.42 1.26 1.12 3.23-.14.84-1.26-2.52-1.54-1.68-3.22-1.82-3.08-5.05 2.52zm17.53 7.7 1.12-1.68 4.07.84.55-.42 5.33.56-.28 1.12-2.24 1.26-3.8-.28-4.76-1.4zm4.63 4.48 1.68 3.35 2.68-.98.28-1.4-1.4-1.8-3.23-.3v1.13zm6.03-.98 1.96-2.52 4.07 2.1 3.78.98 3.78 2.37v1.68l-3.08 1.54-4.2.84-2.1-1.25-4.22-5.73zm14.44 13.43 1.4-1.12 2.95 1.4 6.6 3.08 2.94 1.83 1.4 2.1 1.68 3.77 3.5 2.24-.28 1.12-3.36 2.8-3.65 1.26-1.27-.56-2.67 1.54-2.1 2.8-1.97 2.52-1.55-.14-3.08-2.24-.28-3.92.55-2.1-1.4-4.9-1.83-1.54-.14-2.23 1.96-.84 1.83-2.65.42-.84-1.4-1.53-.3-1.82z"></path>
        <text id="HI_label" x="276.389" y="521.284">
            <tspan id="HI_tspan" x="276.389" y="521.284">HI
            </tspan>
        </text>
    </g>
</svg>

Карта должна быть заключена в блок с атрибутом data-item, значение которого равно interactive-map.

Описание

У частей карты может быть описание. Оно должно выглядеть так, как показано в примере ниже:

<div class="description js-descriptions">
    <div id="mt">
        <h3 class="js-title">Montana</h3>
        <div class="js-description">
            Montana is a state in the Mountain West division of the Western United States. It is bordered by Idaho to
            the west, North Dakota and South Dakota to the east, Wyoming to the south, and the Canadian provinces of
            Alberta, British Columbia, and Saskatchewan to the north.
        </div>
    </div>
    <div id="ca">
        <h3 class="js-title">California</h3>
    </div>
    <div id="ne">
        <h3 class="js-title">Nebraska</h3>
        <div class="js-description">
            <img src="https://th.bing.com/th/id/R.51a9e07dc4ba6f3723cbfc44ae6032d2?rik=071T2i2dBevyHA&pid=ImgRaw&r=0"
                 alt="">
            <p>Nebraska is a state in the Midwestern region of the United States. It is bordered by South Dakota to the
                north; Iowa to the east and Missouri to the southeast, both across the Missouri River; Kansas to the
                south;
                Colorado to the southwest; and Wyoming to the west. It is the only triply landlocked U.S. state.</p>
        </div>
    </div>
</div>
Вопрос по продукту
↑