How competently to implement an interactive map?

Hi!

How to implement CORRECTLY an interactive map?

Well, for example, an interactive map of the shopping center.

  • How can I place the img to the full size unit?
  • Svg to place over the img or after?


I would like to look at well-written examples.
And read what ever manual\documentation.

If you know links or any other resource that has all the necessary information on interactive maps, then please, leave them in the replies.

I would like to find out what new methods of implementation in 2018.

Thank you in advance.
June 3rd 19 at 19:07
2 answers
June 3rd 19 at 19:09
Solution
In order to enable you to select some blocks on your map of the shopping center, you need to:

1. The map in svg format, and when it drawing, each individual allocated block must be a separate layer in order to code it marked some ID and was a separate item.
2. When you insert your SVG map (and it is necessary to insert the bare code, not the picture), you will be able to access your elements in the svg DOM as usual, these blocks you can hang the handlers, ask them the selection to do anything at all. The most important thing to have in the SVG were all these blocks with your ID, some data with JS was a good place for them to be secured and processed.
Thank you very much!) - terry.Hagenes33 commented on June 3rd 19 at 19:12
June 3rd 19 at 19:11
Solution
what are the new methods of implementation in 2018
Well you can on WebGL you write all this, and then wait for it to start to work in older browsers.

The demo is on SVG: https://jsfiddle.net/Stalk/jarsv6o4/

Documentation:
https://developer.mozilla.org/ru/docs/Web/SVG
https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial

For SVG-there are a bunch of libraries and tools different steepness and difficulty.
Thank you very much! - terry.Hagenes33 commented on June 3rd 19 at 19:14
I have seen the examples in which is used , as in your example uses CSS(background).

Which method is more correct? - terry.Hagenes33 commented on June 3rd 19 at 19:17
,

examples where used
?

It seems to me, correct zahrajte a picture like this:
https://jsfiddle.net/Stalk/bxth941r/
But in General, on the situation. - terry.Hagenes33 commented on June 3rd 19 at 19:20
Oh... Combat examples which use + and your example uses CSS. According to accepted standards, unless of course they are, as a method more practical and correct? - Austen.Thompson53 commented on June 3rd 19 at 19:23
used +?

(it seems you do not know how to html entity and not use the tag ) - terry.Hagenes33 commented on June 3rd 19 at 19:26
,
<svg viewBox=""/>

<img alt sr>
- Austen.Thompson53 commented on June 3rd 19 at 19:29

Find more questions by tags Web DevelopmentFrontend