Wereldkaart CSS-sjablonen

Aanpasbare wereldkaart-CSS-templates met regio- en markeringstyling

Stel u een wereldkaart voor waarin de landen die u bedient oplichten in de groenblauwe merkkleur, de rest vervaagt naar lichtgrijs en elke kantoorspeld iets groter wordt wanneer de cursor eroverheen beweegt. Wereldkaart-CSS-templates geven u controle over die visuele laag, van opvullingen en labelposities tot de statussen die een markering doorloopt. Omdat de regels worden gedeeld, bereikt één bewerking van de markeringskleur elk bediend land.

Hover- en actieve statussen van markeringen

Markeringen zijn de elementen die mensen daadwerkelijk gebruiken op een wereldkaart. Een speld die de cursor negeert voelt houterig aan, en een speld die te ver springt oogt goedkoop. De meeste wereldkaart-lay-outs leunen op een handvol visuele regels:

• een hover-status die een speld vergroot of een zachte schaduw eronder toevoegt
• een actieve status die het geselecteerde kantoor gemarkeerd houdt na een klik
• opvul- en lijnkleuren voor bediende landen wanneer de kaart een SVG met afzonderlijke vormen is
• tooltip-blokken met hun eigen achtergrond, binnenmarge en hoekradius

Een wit label dat boven de Atlantische Oceaan goed leesbaar is, kan over de lichte Sahara verdwijnen. Een subtiele tekstschaduw of een halftransparante achtergrondplaat lost dat meestal beter op dan een groter lettertype.

Legenda's met leesbare labels

Een legenda zet kaartkleuren om in betekenis, maar alleen als de kleurvakjes exact overeenkomen met de kaart. Gedeelde klassen en kleurvariabelen zorgen ervoor dat een enkele waarde zowel de landopvulling als het bijbehorende vierkant in de legenda aanstuurt. Labels zijn lastiger, omdat kleine Caribische of Balkanlanden geen ruimte laten voor tekst binnen hun grenzen. Een veelgebruikte oplossing is om die labels buiten de vorm te plaatsen met een fijne verwijslijn, of ze op kleinere schermbreedtes te verbergen. Naast de kaart zorgt een Grid-lay-out ervoor dat de legendakolom uitgelijnd blijft, waarbij één tussenruimtewaarde de afstand ertussen bepaalt.

Spelden schalen bij elk breekpunt

Een wereldkaart verliest het grootste deel van zijn breedte op een rechtop gehouden telefoon, terwijl vingertoppen helemaal niet krimpen. Breekpunten vangen dit op met grotere tikgebieden, minder labels en een legenda die onder de kaart verschijnt. Relatieve eenheden houden de markeringsformaten proportioneel over apparaten heen, zodat een speld op een laptop geen stipje is en op een tablet geen muntstuk.

Kaartschermen bevatten vaak styling die nergens anders in het project wordt gebruikt. Nicepage documenteert Minimale CSS per pagina exporteren als een optionele exportmodus die een afzonderlijke stijlblad aanmaakt met uitsluitend de regels die één pagina nodig heeft, zodat zware kaartstyling buiten de rest van de website blijft.

Beweeg over een paar spelden, vergelijk de legenda met de opvullingen en bekijk de lay-out op telefoonbreedte. Deze controles laten meer zien over een wereldkaart-CSS-template dan welke screenshot dan ook.