Интерактивная карта Албании

Question

Я хочу создать интерактивную карту, подобную этой http://www.tring.al/harta.html, используя jQuery и SVG, но я не знаю с чего начать. У меня есть карта как .svg.xml (ссылка здесь: albania.xml) Но что делать дальше. Может ли кто-нибудь помочь мне, что мне делать дальше?

Albania interactive map

Answer 1

Вы можете попробовать этот код (я получил его из Google Maps)

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3062273.914005372!2d20.116626437500003!3d41.45002910144466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13453bf3bd274c2d%3A0x77ce589d6983bee!2sAlbania!5e0!3m2!1sen!2suk!4v1409673218830" 
    width="600" height="450" frameborder="0" style="border:0"> 
</iframe> 

Answer 2

Много кричащий дизайн на примере сайта делается в CSS.

одна из форм выглядит следующим образом:

<a xlink:href="../hartalezha.html" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><path fill="#84d858" stroke="#ffffff" d="**Removed points**" stroke-width="3.5200000000000005" stroke-linejoin="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default; stroke-linejoin: round;"></path></a>

CSS-код не заботится о парящих действий, таких, как изменение цвета и т.д. Здесь HTML непосредственно имеет дело с переадресацией на клик (не фантазии JQuery).

Единственный jQuery, который будет нужен, - это прослушиватель кликов, если вы хотите сделать что-то лишнее без перенаправления.

Edit: здесь возможный CSS для пути тега:

path{ 
fill: rgb(64, 129, 195); 
stroke: rgb(255, 255, 255); 
stroke-width: 3.5200000000000005px; 
stroke-linejoin: round; 
} 

path:hover{ 
fill: rgb(225,0, 129, 100); 
} 

Это будет перезаписывать цвет заливки на парении индивидуальной форме.