--- title: "Google Maps en Mapbox kaarten in je eigen kleuren" description: "Je vraagt je misschien af wat een kaart in je eigen kleuren echt verandert. Hier zijn drie voorbeelden, van een consistent design tot het verhaal dat je app moe" canonical_url: "https://nl.goodbarber.com/blog/kaarten-in-je-eigen-kleuren-a1485/" lang: nl date: 2026-10-28 last_updated: 2026-10-29 --- # Kaarten in je eigen kleuren Je hebt je thema gekozen en je kleuren, lettertypes en iconen ingesteld zodat je app bij je past. Dan openen je gebruikers de kaart en zien ze de kaart die ze uit hun hoofd kennen, dezelfde als overal. Afhankelijk van wat je doet, brengen ze veel tijd door op dit scherm, en tot nu toe hoorde het niet bij je merk. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) [Florian Luccioni](https://nl.goodbarber.com/blog/author/flo-luccioni/)PWA Developer 28 okt 2026 · Bijgewerkt op 29 okt 2026 · 5 min leestijd ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98526284-68743082.jpg?v=1793261332.972254) Je vraagt je misschien af wat een kaart in je eigen kleuren echt verandert. Hier zijn drie voorbeelden, van een consistent design tot het verhaal dat je app moet vertellen. ## Zodat ze bij je passen GoodBarber PWA's tonen hun interactieve kaarten met een van de twee grote aanbieders: Google of Mapbox. Allebei bieden ze uitgebreide tools om kaartachtergronden in je eigen huisstijl te ontwerpen. Je kunt deze stijlen nu aan je kaarten koppelen, en het design van je app blijft consistent. ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98526284-68743083.jpg?v=1793196468.6928186) Deze tools gaan verder dan het kleurenpalet. Je kiest zelf wat zichtbaar blijft op de kaartachtergrond, en dus wat je gebruikers zien. In de campus-app hierboven springen gebouwen en bibliotheken eruit en zijn winkels verborgen: daar komen studenten niet voor. Stel je nu de app van je winkel voor, of van je winkelketen. Door de standaard points of interest te verbergen, maak je geen reclame meer voor de concurrentie. ## Voor de juiste sfeer Hoe uitgesprokener het design van je app, hoe meer een standaardkaart uit de toon valt. Neem de app van een festival met een heel sterke identiteit. Met een eigen kaartachtergrond wordt de kaart onderdeel van de beleving. Hij toont alleen wat telt op de avond zelf: de podia en het openbaar vervoer. Wegen en spoorlijnen kleuren paars en neongroen, in de kleuren van het festival. ![Kaart van de app Nuit Sonique in eigen stijl: nachtachtergrond, wegen in paars en neongroen, geen winkels.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743288.jpg) ![Dezelfde kaart in de standaardstijl van Google Maps: supermarkten, winkels en andere points of interest zichtbaar.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743287.jpg) Standaard Eigen stijl *De standaardstijl van Google Maps vergeleken met een eigen stijl* ## Om een ander verhaal te vertellen De stijltools gaan verder dan kleuren: ze voegen hun eigen datalagen toe, reliëf, routes. Deze lagen vormen de basis voor je Kaart-content uit het GoodBarber CMS en je [geïmporteerde KML-bestanden](https://nl.goodbarber.com/extensions/kml/). Zo wordt de kaart redactionele content op zich, met dezelfde tool. [Video: de Haute Route Corse op een kaart in eigen stijl met Mapbox](https://player.vimeo.com/video/1240269543?background=1&autoplay=1&loop=1&muted=1&autopause=0&dnt=1) ![Still uit de video: de route van de Haute Route Corse op een reliëfkaart in eigen stijl met Mapbox.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743579.jpg) Accepteer statistische cookies om deze Vimeo-video af te spelen. Cookies beheren Voor deze video is de GPX-route in Mapbox Studio geïmporteerd, vormgegeven en gepubliceerd in een volledig nieuwe stijl. Daarna was het genoeg om die stijl in de kaartinstellingen van een sectie te plakken. Dezelfde stijl kan alle kaarten van de app aankleden, of alleen een Kaart-widget op de startpagina. ## Is het makkelijk? Ja. Je maakt je stijl bij de aanbieder van je keuze: een Map ID in de Google Cloud-console, of een stijl-URL in Mapbox Studio. Daarna plak je die in de back-office, voor de hele app of voor een specifieke Kaart-sectie, Agenda-sectie of Kaart-widget. De stapsgewijze uitleg staat in onze helpartikelen (in het Engels): [voor Google Maps](https://www.goodbarber.com/help/display-maps-in-your-pwa-r118/configure-google-maps-for-your-pwa-a289/) en [voor Mapbox](https://www.goodbarber.com/help/display-maps-in-your-pwa-r118/configure-mapbox-for-your-pwa-a343/). We zijn benieuwd naar je kaarten. En als je nog geen PWA hebt om je creativiteit te tonen, [maak dan je eigen](https://nl.goodbarber.com/create/) met GoodBarber, de no-code Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) Over de auteur Flo Luccioni PWA Developer I’m a frontend developer on GoodBarber’s Progressive Web Apps team, where we build the rendering engine of our no-code platform for browsers. I work on the shared UI and performance foundations that make our users’ no-code experience into fast, polished and accessible web products that feel native on every device. [Meer van Flo](https://nl.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)