Zaznaczenia punktów na mapie (image)

Question

Witam wszystkich serdecznie :)

Mam pytanie bo borykam się z pewnym problemem. Mianowicie mam ustawić mapę, ale jako image na tej mapie absolutem wyznaczam pewne punkty np Francja. I teraz jak zmniejszam okno punkty muszą zostawać w tym samym miejscu (czyli Francja nie może wylądować w Azji :D).

Moim rozwiązaniem było to żeby nadać background-size 100% 100% i wtedy ustawić punkty procentowo. Wtedy wszystko elegancko chodziło. Problem pojawił się kiedy dowiedziałem się, że mapa ma środkować się w pionie a nie rozciągać na cały ekran (ponieważ brzydko wygląda na dużych ekranach). Czy macie może jakiś pomysł jak to zrobić? Myślałem o media query, ale  z tym jest dużo roboty.

Answer 1

Czy nie najprościej byłoby stworzyć grafikę wektorową niezależnie i wstawić ją na stronę, wykorzystując HTML lub CSS? W ten sposób będziesz sobie mógł dowolnie skalować obrazek, dodatkowo nie tracąc na jego jakości.

Comments

Mapę mam wyciętą jako png. Problemem jest to, że na hover mają pojawiać się miejsca na mapie, które zawsze muszą być w tym samym miejscu. Właśnie to mi sprawia najwięcej problemu bo jednak przy skalowaniu mapy to te punkty nie będą dobrze łapać. A punkty stworzyłem w html jako span

---

A może spróbuj wykorzystać jednak SVG: https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

---

Ok dziękuje zaraz sobie poczytam :)

Answer 2

A nie łatwiej byłoby przez googleMaps API?

Comments

Pewnie, że byłoby łatwiej :D tylko, że to musi być obrazek mapy świata z punktami a nie prawdziwa mapa :/