Wereldkaart

Bij het laden van deze pagina verschijnt hier onder een wereldkaart. De achtergrond is donkergrijs. Nederland en Suriname zijn oranje gekleurd, België is geel en de rest is lichtgrijs.
De landen worden één voor één zichtbaar.

Op deze pagina wordt code besproken waarmee je een dergelijke kaart kunt tekenen met behulp van SVG.
De code kun je downloaden om zelf te gebruiken.

Open deze pagina buiten de frameset als je de kaart duidelijker wilt bekijken.

inspiratie voor dit onderwerp is gekomen door een script in Webdesigner Magazine nr. 90 (oktober 2016), pag. 62 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.
Voor deze website is de code van het voorbeeld opgeschoond en vereenvoudigd.

De kaart is gemaakt door Al MacDonald. Zijn kaart staat op Wikipedia.
De mogelijkheid om landen apart te kleuren is toegevoegd door Ben Hodgson. De kleuren worden ingesteld aan de hand van de twee-letterige alpha-2 landcodes van ISO 3166.
De versie van deze kaart is van december 2018; van de 249 officieel toegekende codes zijn 174 codes in de kaart geprogrammeerd. De 75 niet gebruikte codes zijn o.a. van niet-zelfstandige gebieden die wel een eigen code hebben, zoals bijv. Aruba, Curaçao en Sint Maarten. Die horen bij Nederland, maar hebben de eigen codes AW, CW resp. SX.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Zelf toepassen in een website.
   
• De werking van het script
• Code bestaat uit HTML en CSS (in de file styles.css). Om het 'mooi' op het scherm te krijgen in een frameset (zoals in deze website) wordt wat JavaScript ingezet.
   
• HTML
• De HTML bestaat uit één enkele <div>-tag. Deze stelt met behulp van inline-style de afmetingen van de kaart op het scherm in. De width is 100%, dus de hele beschikbare breedte van het document. De height is hier ingesteld op 350px. Dat werkt prima als dit document in een frameset zit, wat op deze site meestal het geval is. Het JavaScript zal dit anders veranderen in 900px.
• Binnen de <div>-tag bevinden zich één enkele <svg>-tag, voorafgegaan door:
  <?xml version="1.0" encoding="utf-8"?>
  Dit is een zg. xml-prolog, die vastlegt hoe de svg-code moet worden geïnterpreteerd. In dit geval is dat utf-8, dus elk karakter is gemaakt met behulp van 2 bytes informatie. Dat is de default-instelling voor xml, dus het mag worden weggelaten. Meer informatie vind je op w3schools.com.
• De <svg>-tag heeft het attribuut viewbox, gevolgd door vier getallen. Hierrmee het "lokale" tekengebied gedefinieerd. SVG gebruikt dat om de tekening te schalen naar de beschikbare ruimte in het document.
  De vier waarden betekenen: kleinste x, kleinste y, breedte, hoogte. Hier is dat: 0 0 940 530. De tekening begint (binnen de <div>-tag) linksboven (x = 0, y = 0), is 940 pixels breed en 530 pixels hoog.
   
• De landen worden getekend met path. Dat volstaat voor landen waarvan de grens kan worden getekend met een enkele lijn, zoals Nederland en België.
  Bij landen waar meerdere lijnen nodig zijn, zoals Denemarken en de VS, zijn de verschillende path-tags bijeengebracht met een g-tag (group).
• Elke groep en elk path die niet in een groep zit heeft een attribuut cc. Als waarde is er een twee-letterige alpha-2 landcode volgens ISO-3166. Die wordt gebruikt door CSS om landen apart in te kleuren.
• De volgorde waarin de landen worden getekend is gelijk aan de volgorde waarin de path en g-tags in de HTML staan. Deze kan worden aangepast door de volgorde in de HTML te veranderen.
   
• CSS
• De CSS begint met de achtergrond van de kaart een kleur te geven.
• Vervolgens wordt de svg ingesteld. De grootste breedte en de grootste hoogte worden ingesteld op 90% van de afmetingen van de svg-viewport. Dat gebeurt met 90vw respectievelijk 90vh.
  vw staat voor viewportwidth; vh staat voor viewportheight<./li>
• Ook wordt de plaats van de linkerbovenhoek van de tekening vastgesteld. Die wordt op 50% van de hoogte en de breedte van het tekengebied gezet en vervolgens 50% naar links en 50% naar boven verschoven. De oorsprong van het tekengebied ligt nu eenduidig vast
• Vervolgens wordt van alle svg-elementen die het attribuut cc hebben (dat zijn alle path- en g-elementen), (selector: svg [cc]) grijs gekleurd (fill:#bbb) en wordt de stroke transparant gemaakt. De omtrek van elk land wordt getekend met een transparante lijn, waardoor de landsgrenzen dezelfde kleur hebben als de achtergrond.
• Nu worden de kleuren per land ingesteld. Dat gebeurt met selectors zoals svg [cc="nl"].
   
• Nu is de animatie aan de beurt. In de beginsituatie zijn alle landen onzichtbaar (opacity:0). De landen worden met een animation zichtbaar gemaakt. Het opvullen met kleur gaat met een transition. Beide animaties verlopen met dezelfde cubic-bezier-functie.
• De animatie zelf werkt met keyframes. De opacity wordt van 0 (helemaal transparant) naar 1 (helemaar ondoorzichtig) gebracht.
• Om de landen een voor een te tekenen wordt elk svg-element met het cc-attribuut de animatie vertraagd met animation-delay. Hierbij wordt de selector nth-child() ingezet.
  Bij het eerste element (nth-child(1)) is de vertraging 0,025 sec. Bij het tweesw element (nth-child(2)) is de vertraging 0,05 sec. Dit gaat zo door in stappen van 0,025 sec, tot en met het laatste element (nth-child(174)) dat een vertraging heeft van 4,35 sec.
   
• JavaScript
• Bij het laden van de pagina wordt een event-handler gemaakt voor load. Zodra de pagina helemaal is geladen wordt de event-handler actief.
  Merk op dat het tekenen van de kaart pas begint als de pagina geladen is.
• De event-handler function kijkt of de pagina (dit document) in een frameset zit (met self == top). Als dat niet het geval is, wordt de hoogte van de kaart op het scherm verhoogd tot 900px. Dat gaat zo snel dat het niet zichtbaar is.
• Merk op dat de kaart al de hele breedte van het document inneemt (width=100%).
   
• Zelf toepassen in een website
• Download de .ZIP-file en pak hem uit. Bouw de code op zoals hier onder is aangegeven.
• Als je de kaart schermvullend wilt gebruiken kun je de <div>-tag rond de <svg>-tag verwijderen of de height op 100% zetten. In dat geval kan ook het JavaScript weg.
• Als je de kaart en een kleiner deel van een pagina wilt gebruiken kun je de afmetingen in de <div>-tag aanpassen naar je eigen wensen.
• De kleuren van de kaart kun je aanpassen in styles.css:
  
  • De achtergrond kleur verander je bij #kaart.
  • De default opvul-kleur van de afzonderlijke landen verander je in svg [cc]: verander de waarde van fill.
  • De kleur van de landsgrenzen verander je in svg [cc]: verander de waarde van stroke.
  • De kleur van afzonderlijke landen staan onder het kopje 'Default Fills'. Vul een land-code in die is gebruikt in SVG-code in de HTML en ken er een kleur aan toe. In het voorbeeld zijn Nederland en Suriname oranje gekleurd; België is geel.
    De code svg [cc="ru"] { fill:#f00 } kleurt Rusland rood.
    De code svg [cc="sx"] { fill:#00f } zou Sint Maarten blauw moeten kleuren, maar dat werkt niet omdat cc="sx" niet in de SVG-code staat.
   
• Tenslotte:
• Het oorspronkelijke werk is beschikbaar gesteld onder een Creative Commons Attribution-ShareAlike 3.0 Unported Licentie. Als je de code op deze pagina gebruikt in je eigen site ben je gebonden aan de voorwaarden van die licentie.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">
<script>
window.addEventListener("load", function() {
if (self == top) document.getElementById('kaart').style.height = "900px";
});
</script>

(Zet dit in de <BODY> op de plaats waar de wereldkaart moet verschijnen).

<div id="kaart" style="width:100%; height:350px; position:relative; margin:20px 0">
<!-- Begin Map SVG -->
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 940 530">

<!-- Adapted from http://en.wikipedia.org/wiki/File:World_map_-_low_resolution.svg -->
  <g cc="tr">
    <path d="M558.7,209.19l-2.23, ... ,209.19z"/>
    <path d="M523.02,209.7l-0.16, ... ,209.7z"/>
  </g>
  <g cc="gr">
    .
    .
  </g>
  .
  .
  <path cc="al" d="M504.02,209.76v4.61l1.32, ... ,209.76z"/>
  <path cc="mk" d="M510.92,208.01l-3.37, ... ,208.01z"/>
</svg>
<!-- End Map SVG -->
</div> <!-- kaart -->

Downloaden:
 
Druk op de knop:  File: voorb541.zip, 23 026 bytes.