Ctrl-D > Development > Resurse > O hartă interactivă a României, cu SVG și Raphaël

O hartă interactivă a României, cu SVG și Raphaël

Scris de  //  27 octombrie 2011  //  Resurse  //  11 comentarii

Dacă tot se zvonește că vom schimba județele pe regiuni altele mai puține, m-am gândit că ăsta e un moment potrivit pentru a propune următorul experiment.

Dacă nu mai ai răbdare, îl poți vedea înainte să citești ce-am scris mai jos.

Cum aleg un județ?

Când ai de-a face cu un ecran al cărui scop e să faciliteze alegerea unui județ, ai la dispoziție câteva variante:

  • <map> — chiar vrei să mai faci asta în 2011? :)
  • Flash — bine, dar mai poți ignora dispozitivele cu iOS?
  • listă simplă, alte variante

Însă, fiindcă e 2011, putem folosi direct SVG.

SVG e un format de grafică vectorială bazat pe XML, creat și dezvoltat ca standard web de către W3C. În prezent toate browserele moderne (și IE9 este un browser modern) pot folosi acest format, majoritatea descurcându-se și cu SVG inline în HTML5, adică poți chiar “amesteca” direct codul HTML cu SVG.

Avantajul?

În primul rând, nu e complicat. Ctrl-S în Illustrator, apoi Copy și Paste direct în fișierul HTML (Inkscape se descurcă și el binișor cu SVG, și e gratis).

Apoi, din moment ce obiectele SVG fac parte din DOM, le putem manipula cu JavaScript (pentru a răspunde la interacțiuni gen mouseover, de exemplu).

Proces

Fără să intru în prea multe detalii din lipsă de spațiu timp, iată cum poți proceda:

  1. Ai în primul rând nevoie de harta României în format vectorial — orice format e bun, atâta vreme cât îl poți deschide într-un editor și salva ca SVG. Un început bun ar putea fi acesta, fișierul fiind disponibil cu licență Creative Commons. Scopul principal este să obții path-urile județelor, deci șterge orice e în plus. Redimensionează fișierul la mărimea de care ai nevoie și salvează-l ca SVG.
  2. Deschide-l apoi cu un editor de text și copiază path-urile SVG corespunzătoare fiecărui județ. Poți folosi ca destinație exemplul de pe CTRL-D.
  3. Partea mai grea a trecut. Urmează partea mai frumoasă, în care poți să te joci cu județele, adăugând tooltip-uri, animații sau orice alte trucuri îți vin în minte!

Internet Explorer

Chiar dacă versiunile mai vechi nu pot lucra cu SVG, ele implementează o tehnologie similară pentru grafică vectorială — VML —, iar fiindcă folosim biblioteca Raphaël, nu trebuie să facem absolut nimic în plus (da, nici măcar pentru IE6)!

☞ Vezi harta în acțiune

Distribuie mai departe

Despre autor Vezi toate articolele scrise de Radu Bilei

Radu Bilei
Front-end Developer

Front-end Developer cu o experiență de peste 5 ani în domeniu. Radu este specializat pe tehnologii ca și (x)HTML, CSS, JavaScript, jQuery, AJAX.

  • ayureah

    Una bucata problema. (poate e un caz izolat pe Firefox-ul meu)
    Dupa ce selectez un judet, apoi altul, nu pot reveni la judetul pe care l-am selectat anterior, pot sa selectez doar unul care nu a fost click-uit inainte.

  • http://108 Radu Bilei

    @ayureah am reparat-o cu puțin după publicare (nu era caz izolat doar pe Firefox-ul tău :)

  • oriceon

    Salut Radu si.. felicitari pentru publicarea acestui articol foarte interesant.

    Am apelat si eu la acest script insa intampin o problema. In cadrul bucurestiului doresc sa pun 2 elemente. Ilfov si Bucuresti ca in fig.1.

    Am copiat path-urile generate de lnkscape insa nu apar.

    Nu merge sa suprapui 2 elemente cu Raphael?

    Exemplu: http://imobiliare.topestate.ro/harta/index.html
    Fig 1.: http://imobiliare.topestate.ro/harta/fig1.png

    Pana la urma am facut altfel:am impartit ilfov-ul in 3
    – ilf sus
    – b
    – ilf jos
    si am facut la hover pe oricare din ilf, sa seteze color si pe celalalt ilf(x).
    Totusi raman in asteptarea unui raspuns cu privire la suprapunere. Multumesc.
    Arh, am uitat sa postez si link-ul catre exeplul respectiv: http://imobiliare.topestate.ro/harta/index2.html

  • http://108 Radu Bilei

    Suprapunerea merge pe principiul ultimul path stă deasupra, deci dacă pui București după Ilfov ar trebui să iasă OK :)

  • oriceon

    Asa am facut insa nu a functionat. Vezi un view source pe index.html te rog.
    Multumesc.

  • http://108 Radu Bilei

    păi cred că nu l-ai pus bine. http://dl.dropbox.com/u/300539/oriceon-harta.png

  • alios

    foarte tare, chiar ma chinui sa fac asa ceva pentru micul meu site

    flash nu prea stiu, asa ca am tot testat aceasta metoda

    dar in firefox 3.0 se vede aiurea textul judetelor :-(

    http://s12.postimage.org/52vr5m0r1/Untitled.jpg

  • http://www.microdigital.ro/ Mihai

    Am incercat sa ma tin dupa tine, insa te-am pierdut. Poti sa ma ajuti sa pun o harta interactiva pe un site ?

  • http://www.ginake.info Ginake

    Exista posibilitatea sa primesc si eu harta Romaniei vectoriala ? Ma intereseaza doar harta vectoriala cu judetele pentru un proiect.
    Astept un raspuns, multumesc frumos.

    • Radu Bilei

      O hartă vectorială a României poți găsi pe Wikipedia. Mult spor :)

  • http://www.vezisitu.ro Laur

    Salut . Ma intereseaza si pe mine daca ma poti ajuta cu o harta interactiva sa o integrez pe site-ul meu. Am incercat sa vad cum ai facut tu dar nu mi-a reusit :) astept un raspuns .ASAP. MS