Как грамотно реализовать интерактивную карту?

Question

[Jedi]

Привет!

Как реализовать ГРАМОТНО интерактивную карту?

Ну, для примера интерактивную карту торгового центра.

• Как разместить img на весь размер блока?
  
• Svg размещать над img или после?
  

Я хотел бы посмотреть грамотно составленные примеры.
И прочитать какую нибудь инструкцию\документацию.

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

Хотелось бы узнать, какие есть новые методы реализации в 2018 году.

Заранее большое спасибо!

Comments

[Jedi]

Алексей, Уровень надо было выбрать средний)... Спасибо за подсказку!)

[Jedi]

Алексей, Очень странно то, что почти нигде нет нормальной "документации" по реализации.

[Jedi]

Алексей, окай))

Answer 1

[Алексей Скляров]

Для того, чтобы вы могли выбирать какие-то блоки на вашей карте торгового центра, нужно:

1. Карта в svg формате, причем при ее рисовании, каждый отдельный выделяемый блок должен быть отдельным слоем, для того чтобы в коде он помечался каким-то ID и был обособленным элементом.
2. Когда вы вставите вашу SVG карту (а ее обязательно надо вставлять голым кодом, а не картинкой), у вас появится возможность обращаться к вашим элементам в svg как к обычному DOM, на эти блоки вы можете повесить обработчики, задавать им выделение, делать вообще все что угодно. Самое главное чтобы в самом SVG были все эти блоки со своими ID, какими-то данными, чтобы с помощью JS можно было спокойно к ним крепиться и обрабатывать.

Comments

[Jedi]

Большое спасибо!)

Answer 2

[Stalker_RED]

какие есть новые методы реализации в 2018 году

Ну можете на WebGL это все написать, а потом подождать пока оно начнет работать в старых браузерах.

Демка на SVG: https://jsfiddle.net/Stalk/jarsv6o4/

Документация:
https://developer.mozilla.org/ru/docs/Web/SVG
https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial

Для работы с SVG есть куча библиотек и инструментов разной крутизны и сложности.

Comments

[Jedi]

Спасибо большое!

[Jedi]

Я встречал примеры в котором используется , а в вашем примере используется CSS(background).

Какой метод более правильный?

[Stalker_RED]

PHPjedi,

примеры в котором используется ,

?

Мне кажется, правильнее загружть картинку вот как здесь:
https://jsfiddle.net/Stalk/bxth941r/
Но вообще по ситуации.

[Jedi]

Stalker_RED, Ой... Боевые примеры в которых используется + , а в вашем примере используется CSS. По принятым стандартам, если конечно они есть, как метод более правильный и практичный?

[Stalker_RED]

PHPjedi, используется +?

(похоже вы не умеете в html entity и не пользуетесь тегом <code>)

[Jedi]

Stalker_RED,

<svg viewbox="" ></svg>

<img sr="" alt=""/>