Een SVG (Scalable Vector Graphics) is heel gemakkelijk interactief te maken. Hieronder zie je een voorbeeld waarbij elementen in de DOM een andere tekst krijgen.
Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten
Klik op een deelgemeente
Stap 1: de SVG maken
Waarschijnlijk ga je niet zelf de code schrijven voor jouw SVG-afbeelding. Het kan wel (bekijk bijv. de tutorials op w3schools), maar vanuit Illustrator bijv. gaat het vlugger. De kaart van Brussel die je hierboven ziet, komt van Wikipedia. Dit SVG-bestand is in Illustrator via copy-paste wel wat "opgeruimd" (zie link onderaan de blog). Vooral belangrijk: ieder gebied heeft in venster Layers een unieke naam gekregen. In dit geval de naam van iedere deelgemeente.
Stap 2: bewaar als svg-bestand
Je kunt het natuurlijk eerst als Adobe Illustrator-document (met extentie .ai) bewaren, als je wilt. Maar we hebben een svg-bestand nodig, dus via 'bewaar als' selecteer je SVG (sgv).
Stap 3: open een tekstverwerker
In een tekstverwerker (Atom bijv.) open je dit sgv-bestand. Je ziet bovenaan verwijzingen naar xml (svg is opgemaakt in xml) en Adobe Illustator (puur als commentaartekst), maar vooral het vastleggen van de stijl. In dit geval de kleur van de vulling ( hier een soort oud-roze: #f8c7c8) en de lijneigenschappen. Deze stijl geldt voor alle paden met de class "st0", dus alle paden in het sgv-bestand. Let ook op de id van het eerste pad: " Brussel". Eronder staan alle andere 18 paden met hun eigen (deelgemeente) naan.
Je kunt dit sgv-bestand vanuit jouw browser openen om het te bekijkn.
Stap 4: pas de style aan
In de tekstverwerker kun je de style van de paden aanpassen. Probeer bijv. het volgende:
De kleur is nu wit (#fff) en met .st0:hover { } voeg je een rollover effect toe (niet zichtbaar op mobiele devices), hier met een tijdsduur van een halve seconde. Test jouw resultaat weer in jouw browser.
Stap 5: maak er een html van
We gaan nu deze code insluiten in <html> en </html>. Bovenaan voegen we het begin toe (met <head></head> en <body>)plus een paar h3 en h2 elementen waar we zo gebruik van maken:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brussels Hoofdstedelijk Gewest met de 19 deelgemeenten</title>
</head>
<body>
<h3>Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten</h3>
<h2 id="info">Klik op een deelgemeente</h2>
<h3 id="info2"> </h3>Onderaan (na </svg> ) sluit je af met :
</body>
</html>Bewaar dit document nu onder de naam : index.html en open het in jouw browser.
Stap 6: maak de paden interactief
Nu komt het leuke gedeelte. Tussen de </svg> en </body> voeg je een javascript toe. De code is niet ingewikkeld: de html-inhoud het element met id "info" en daaronder met de id "info2" wordt veranderd.
<script>
document.getElementById('Brussel').addEventListener('click', function() {
this.style.fill = 'yellow';
document.getElementById("info").innerHTML = "Dit is de stad Brussel"
document.getElementById("info2").innerHTML = "ong. 198.000 inwoners"
});
</script> Breid dit script uit voor het pad van Jette:
Als je dit test in de browser, zul je zien dat de knoppen geel blijven. (je zult misschien even moeten zoeken waar stad Brussel en Jette liggen ;-)...). Tijd voor de laatste stap.
Stap 6
Er zijn vast ook andere methoden om dit op te lossen. Hier kiezen we voor een reset-functie die alle paden weer wit maakt:
Je zit in regel 95 dat de reset-functie eerst wordt opgeroepen bij het pad van Brusssel. Dit moet je dus ook bij alle andere paden doen. Hieronder staat de code om te kopieren:
function reset(){
const collection = document.getElementsByClassName("st0");
for (let i=0; i<collection.length; i++){
collection[i].style.fill="#fff";
}
}Alle elementen met de class-naam "st0" worden opgeslagen in de array collection. Met de (hopelijk voor jou bekende for-loop) worden alle paden (met class "st0") weer wit gemaakt.
We zijn klaar
Hier vind je de code terug van bovenstaande bestanden. Hopelijk kun je zelf experimenteren met eigen clickable maps. De kaart van Brussel kun je ook hier bekijken in een los tabblad.
Laat maar weten of deze blog nuttig / leuk was. Veel plezier!
