Aanklikbare kaart met gemeenten voor Wordpress

**A. de Vos** · 26-06-2018, 09:36

Ik zoek een aanklikbare kaart oplossing voor een Wordpress website. De bedoeling is dat mensen op de website een kaart van Nederland zien met gekleurde vlakken. Deze vlakken komen overeen met gemeenten. Door met je muis over een gekleurde gemeente te bewegen (mouse-over) of door er op te klikken dan krijg je een popup met informatie te zien en eventueel een doorklik linkje / knopje. Het gaat dan wel alleen om relevante gemeenten, dus de gemeenten waar niets te doen is die zijn gewoon grijs en daar zit geen popup op.

Er zijn diverse plugins / oplossingen die het mogelijk maken om clickable gebieden te tekenen en hier een tooltip window aan te hangen. Maar het is heel veel werk om alle gemeenten zelf te tekenen. Ook heb ik oplossingen gevonden waarbij de provincies clickable zijn, zoals deze: http://mapsvg.com/maps/netherlands/. Maar het moeten gemeenten zijn. Hier een kaart met aanklikbare gemeenten; http://www.imergis.nl/asp/NLklik-gem.asp. Maar dit is niet te beheren vanuit Wordpress (al is dat geen keiharde eis) en het toont geen popups.

Kent iemand een goede oplossing?

**B. van der Weerd** · 26-06-2018, 10:28

Voor mij een beetje klok-en-klepel omdat ik er wel het nodige over heb gelezen maar me er niet echt in heb verdiept. Wat ik weet wil ik wel delen:

Er zijn denk ik 2 manieren: de ene manier is zoeken naar bestanden om Google Maps (of Open Street Maps) van de gemeenten te maken, en dan ook zoeken naar een geschikte plugin. Dat zou ook een 'directory'-plugin of -theme kunnen zijn.

De andere manier is om gebruik te maken van kaartbestanden/tekeningen op de zogenaamde 'GIS'-websites. Daar kan ontzettend veel mee, zie hier een mooi voorbeeld met bestanden van Esri NL. Met een beetje zoeken kom je nog veel meer tegen. Het is 'open data' dus de gegevens zijn vrij verkrijgbaar. Het wordt wel even knutselen om het in de goede vorm te gieten... Er zijn diverse plugins die met GIS maps en dergelijke werken, er is ook eentje waarmee je ArcGIS kaarten kunt embedden: https://wordpress.org/plugins/embed-webmap/. Die is voor jou denk ik te beperkt.

Alternatief: kijk eens naar de mogelijkheden van de 'Leaflet' JS library.

EDIT: misschien is Leaflet inderdaad wel het beste uitgangspunt, zie deze plugin: https://nl.wordpress.org/plugins/leaflet-maps-marker/

gast74241 · 26-06-2018, 11:10

Ooit zelf gedaan, ergens in 2006. Moest daarvoor honderden plaatsen opnemen in een HTML image map.
Tegenwoordig kan dat middels HTML5, plugins en Google maps.

**A. de Vos** · 26-06-2018, 12:27

Hey top! Dank je wel. Ik ga even goed kijken naar de opgegeven opties. Ja knutselen zal het wel worden helaas. Als het uiteindelijk maar prettig werkt voor de bezoeker ;)

gast74241 · 26-06-2018, 17:48

Als je genoeg tijd hebt ik het niet eens zo'n slecht idee om zelf een imagemap te maken. Een programma zoals MapEdit maakt het iets makkelijker. Maar er zijn talloze andere manieren om het te doen, waaronder met plugins.

**Tjerk de Heer** · 27-06-2018, 11:49

Omdat ik het altijd leuk vind om met kaarten te stoeien ben ik er even mee aan de slag gegaan. In een kwartiertje had ik voor elkaar wat je ongeveer zoekt. Dit is het recept.

Benodigdheden:

- Het SVG-bestand van de kaart van Nederlandse gemeenten op Wikimedia. Deze kaart is van het CBS en kun je zonder restricties gebruiken als je ze er maar de credits voor geeft.
- Het vectorprogramma InkScape

Bereidingswijze:

- Open de SVG in InkScape.
- Klik op een gemeente naar keuze en selecteer een mooie kleur onderin.
- Voeg een beschrijving voor in de popup toe bij Object -> Objecteigenschappen -> Beschrijving.
- Sla het SVG-bestand op als kaart.svg
- Maak een kaart.html bestand aan en zet dit naast kaart.svg, met deze inhoud:

Code:

<html>
    <head>
    <title>Kaart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <div id="mapMain">
        <img id="mapImg" src="kaart.svg" class="kaart" />
    </div>
    <script>
    jQuery(document).ready(function() {
        jQuery('img.kaart').each(function(){
            var $img = jQuery(this);
            var imgURL = $img.attr('src');
            
            jQuery.get(imgURL, function(data) {
                
                var $svg = jQuery(data).find('svg');
                $svg = $svg.removeAttr('xmlns:a');
                $img.replaceWith($svg);
                
                jQuery('path').each(function() {
                    jQuery(this).click(function() {

                        // Dit is de omschrijving die je in het SVG bestand in InkScape
                        // aan het pad hebt toegevoegd:
                        var description = jQuery(this).find('desc').text();
                        
                        if (description != '') {

                            // Simpele alert maar je kunt hier natuurlijk van alles mee doen nu:
                            alert( description );
                        }
                    });                       
               });
            });
        });
    });
    </script>
    </body>
</html>

Dit is wel in WordPress te integreren. Beheer van gemeenten en de inhoud van de popup doe je dan alleen telkens in InkScape en niet in de WP admin. Let wel op dat de SVG op hetzelfde domein gehost moet staan als je website.

**A. de Vos** · 27-06-2018, 12:19

Wow Tjerk! Dank je wel! Dit is inderdaad een werkbare oplossing. Misschien is het dan, via een omweg, zelfs mogelijk om de teksten in de popup vanuit WP admin te beheren. Ook hier ga ik even mee stoeien. Bedankt!

**Tjerk de Heer** · 28-06-2018, 07:27

Graag gedaan! En uiteindelijk is zo'n SVG ook gewoon maar een XML-bestand, dus daar moet inderdaad ook redelijk eenvoudig iets via de WordPress admin mee gedaan kunnen worden.

Aanklikbare kaart met gemeenten voor Wordpress