post_ico3

Interaktywna mapa Polski w HTML/CSS

Osoby pracujące jako web developer zapewne nieraz spotkały się z koniecznością stworzenia „klikalnej” mapy Polski. Większość map tworzonych jest z wykorzystaniem Flasha. Nie wszyscy zapewne wiedzą, że taką mapę można również stworzyć za pomocą HTML/CSS z dodatkiem JS.

Przygotowanie projektu mapy

Na początek musimy przygotować pliki graficzne z mapą. Wykorzystałem mapę Polski ze strony Wikipedii. Mapa będzie w odcieniach szarości, natomiast po najechaniu myszką województwo zmieni kolor.


mapa_przyklad

Jako plik bazowy wykorzystamy mapę Polski w odcieniach szarości. Kolejnymi plikami są poszczególne województwa, które pojawią się po najechaniu myszką. Ważne jest, by wszystkie grafiki miały jednakowe wymiary (obszar poza danym województwem musi być przezroczysty).

Gotowe? No to kodujemy… :-)

Na początek stwórzmy szkielet dokumentu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Mapa</title> 
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
        <meta name="Description" content="" /> 
        <meta http-equiv="Content-Language" content="pl" /> 
        <meta name="Keywords" content="" /> 
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script> 

        <style type="text/css"> 
        </style> 
        <script type="text/javascript">
        </script> 
    </head> 
    <body> 
        <div id="area"> 
        </div> 
    </body> 
</html>

#area będzie kontenerem zawierającym całą mapę. Wrzućmy do niego obrazek z tłem mapy:

<img id="map_poland" usemap="#poland" src="mapa.png" />

Teraz dodajmy listę województw:

<ul> 
    <li id="lubelskie"><img src="lubelskie.png" usemap="#poland" /></li> 
    <li id="podkarpackie"><img src="podkarpackie.png" usemap="#poland" /></li> 
    <li id="podlaskie"><img src="podlaskie.png" usemap="#poland" /></li> 
</ul> 

Musimy jeszcze „zmapować” obrazek z mapą, żeby obszary do klikania miały mniej więcej kontury takie jak województwa. Służą do tego znaczniki map i area.

<map id="poland" name="poland" > 
    <area shape="poly" alt="lubelskie" title="lubelskie" coords="571,255,554,275,539,269,541,280,532,280,523,289,488,291,488,305,492,325,476,328,490,335,495,348,490,352,492,357,491,389,500,417,505,417,508,406,522,417,518,429,542,436,546,450,537,449,535,454,536,458,555,459,550,463,575,464,585,451,591,455,598,451,612,468,619,451,639,446,640,431,638,410,630,398,633,388,607,350,614,346,595,306,610,307,618,269" href="#lubelskie" /> 
    <area shape="poly" alt="podkarpackie" title="podkarpackie" coords="608,465,555,546,563,562,561,579,575,595,570,593,554,593,512,576,506,565,477,554,467,562,464,525,455,519,461,513,452,509,455,464,452,461,471,449,483,443,486,433,494,428,495,414,498,416,510,413,514,413,516,423,534,433,542,432,544,447,534,455,545,456,551,462,571,462,583,451,588,451,599,448,602,456,607,462" href="#podkarpackie" /> 
    <area shape="poly" alt="podlaskie" title="podlaskie" coords="537,40,543,32,552,36,555,46,569,51,569,51,577,53,592,76,582,77,614,159,620,187,621,218,594,227,576,256,567,255,552,245,535,247,526,215,523,201,513,208,518,193,500,204,501,183,488,180,478,173,476,148,467,134,484,139,494,132,513,121,536,103,540,87,530,79,530,62,519,57,539,49" href="#podlaskie" /> 
</map>

Kolejne obszary tworzone są znacznikiem area. Atrybut shape określa kształt zaznaczenia, mamy do wyboru: rect (prostokąt), circle (koło) oraz poly (wielokąt). Atrybut coords zawiera współrzędne obszaru (para liczb – oś X i Y). Trzeba pamiętać, że współrzędne liczone są od lewego, górnego wierzchołka obrazka. Do mapowania wykorzystałem Online Image Map Editor.

Kod HTML mamy już gotowy. Przygotujmy teraz style CSS:

#area{ 
    width:646px; 
    height: 600px; 
    position: relative; 
} 
#map_poland{ 
    position: absolute;top:0;left:0; 
    z-index: 1; 
} 
#area li{ 
    position: absolute;top:0;left:0; 
    z-index: 2; 
    display: none; 
}

Tło mapy oraz województwa mają ustawione position:absolute, ponieważ muszą na siebie idealnie nachodzić. Dodatkowo, za pomocą z-index musimy ustawić odpowiednio warstwy, żeby tło nie zakrywało kolorowych obszarów.

Mamy już mapę prawie gotową, musimy jeszcze dodać kod JS odpowiedzialny za wyświetlanie województw:

$("area").hover(function() { 
    var href=$(this).attr("href"); 
    $(href).fadeIn("fast"); 
}, function() { 
    var href=$(this).attr("href"); 
    $(href).fadeOut("fast"); 
});

Tak wygląda kompletny plik z mapą:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Mapa</title> 
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
        <meta name="Description" content="" /> 
        <meta http-equiv="Content-Language" content="pl" /> 
        <meta name="Keywords" content="" /> 
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 
        <style type="text/css"> 
            #area{ 
                width:646px; 
                height: 600px; 
                position: relative; 
            } 
            #map_poland{ 
                position: absolute;top:0;left:0; 
                z-index: 1; 
            } 
            #area li{ 
                position: absolute;top:0;left:0; 
                z-index: 2; 
                display: none; 
            } 
        </style> 
        <script type="text/javascript"> 
            $(document).ready(function() { 
                $("area").hover(function() { 
                    var href=$(this).attr("href"); 
                    $(href).fadeIn("fast"); 
                }, function() { 
                    var href=$(this).attr("href"); 
                    $(href).fadeOut("fast"); 
                }); 
            }); 
        </script> 
    </head> 
    <body> 
        <div id="area"> 
            <img id="map_poland" usemap="#poland" src="mapa.png" /> 
            <ul> 
                <li id="lubelskie"><img src="lubelskie.png" usemap="#poland" /></li> 
                <li id="podkarpackie"><img src="podkarpackie.png" usemap="#poland" /></li> 
                <li id="podlaskie"><img src="podlaskie.png" usemap="#poland" /></li> 
            </ul> 
            <map id="poland" name="poland" > 
                <area shape="poly" alt="lubelskie" title="lubelskie" coords="571,255,554,275,539,269,541,280,532,280,523,289,488,291,488,305,492,325,476,328,490,335,495,348,490,352,492,357,491,389,500,417,505,417,508,406,522,417,518,429,542,436,546,450,537,449,535,454,536,458,555,459,550,463,575,464,585,451,591,455,598,451,612,468,619,451,639,446,640,431,638,410,630,398,633,388,607,350,614,346,595,306,610,307,618,269" href="#lubelskie" /> 
                <area shape="poly" alt="podkarpackie" title="podkarpackie" coords="608,465,555,546,563,562,561,579,575,595,570,593,554,593,512,576,506,565,477,554,467,562,464,525,455,519,461,513,452,509,455,464,452,461,471,449,483,443,486,433,494,428,495,414,498,416,510,413,514,413,516,423,534,433,542,432,544,447,534,455,545,456,551,462,571,462,583,451,588,451,599,448,602,456,607,462" href="#podkarpackie" /> 
                <area shape="poly" alt="podlaskie" title="podlaskie" coords="537,40,543,32,552,36,555,46,569,51,569,51,577,53,592,76,582,77,614,159,620,187,621,218,594,227,576,256,567,255,552,245,535,247,526,215,523,201,513,208,518,193,500,204,501,183,488,180,478,173,476,148,467,134,484,139,494,132,513,121,536,103,540,87,530,79,530,62,519,57,539,49" href="#podlaskie" /> 
            </map> 
        </div> 
    </body> 
</html>

Tak wygląda działający przykład.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (1 głosów, średnia ocen: 5,00 z 5)
Loading...
  • Damian Domański

    Przed animacjami w jq dodawaj .stop() usuwa kolejkę animacji i nie ma problemu z miganiem po wielokrotnym przejechaniu przez województwa.

  • kicaj

    Ostatnio podobny art znalazł się u innego blogera: http://blog.kamilbrenk.pl/interaktywna-mapa-z-html-i-css/

  • A czy jest możliwość oznaczania na tej mapie konkretnych miast i po najechaniu możliwość linkowania? Ew. linkowania całego województwa, ale żeby można było oznaczyć miasto na mapie?

  • @lukaszmed:disqus Tak, do tego można wykorzystać okrąg i nanieść punkt na mapę

    • Hmm… A mógłbyś coś takiego do łożyć do tego demo? Byłbym bardzo wdzięczny. Pozycję dodajemy określając top/left/bottom/right w cssie i używając kolejnego ‚li’ i ‚span’?

  • tomek

    Zrobiłem wszystko według instrukcji i niestety nie działa :(

  • Vertex VTMaps

    Aby szybko stworzyć mapę wybranej lokalizacji warto skorzystać z VTMaps, w kilku prostych krokach można stworzyć swoją mapę i nanieść na nią wybrane informacje i dane http://www.vtmaps.com/pl/mapa-polski-i-excel