Verbeterde interactie kaartje
Ook al trek je niet zoveel vuur, het is belangrijk om aandacht te blijven besteden aan het website. Een essentieel onderdeel van de Op het programma website is de Google Maps kaart waarop je meer dan 300 tips voor een uitstapje terugvindt.

De interactie van deze kaart was me al langere tijd een doorn in het oog. Maar de tijd nemen om de kaart te verbeteren … dat was er niet bij. Tot gisteren. Op Hemelvaartsdag liet ik me (bij hoge uitzondering) niet op een zonnig terras vollopen met veel bier. In plaats daarvan stroopte ik de mouwen op en verbeterde mijn kaart met uitjes.

• De kaart opent paginavullend. Het deelvenster met de legenda wordt standaard weggeklapt. Dat oogt ruimtelijker. Tenslotte draait het om de kaart. Over de vraag of bezoekers snappen hoe ze de legenda met filteropties op het scherm krijgen maak ik mezelf eerlijk gezegd niet al teveel zorgen;
• Klikken op een prikkertje opende eerst een infowindow met een beperkte set aan informatie. Nogmaals klikken en je kreeg uitgebreide info op je scherm. In plaats daarvan heb ik de extInfoWindow class ingezet om — in een naar eigen smaak gestyled venster —  de informatie van het uitstapje in kwestie te laten zien;
• Hetzelfde customized infovenster krijg je nu ook te zien als je vanuit de detailweergave doorklikt naar de kaart. Eerder werden bezoekers hier getrakteerd op (zacht uitgedrukt) verwarrend gedrag van de kaart. Zoals Aart een tijdje geleden in een e-mailtje al terecht opmerkte:
  

  als je op een marker klikt dan opent de infowindow keurig in het scherm, maar klik je vervolgens op ‘uitgebreide info’, dan krijg je weliswaar een grotere ‘box’, maar die verdwijnt aan de onderkant wel uit beeld. (zodat je dus een scherm naar beneden moet scrollen). Misschien handig om dit aan de bovenkant van de map uit te lijnen?

Op mijn to do lijstje
Ik heb trouwens meer verbeteringen in gedachten. Niet dat de Op het Programma kaart momenteel extreem sloom is, maar vooruitschrijdend inzicht toont aan dat de manier waarop mijn kaart wordt gevuld absoluut geoptimaliseerd kan worden:

• Er staan nogal wat markertjes (300+) op de kaart. Het is best belastend voor je computertje om al die prikkertjes te plotten. Het verschilt per browser, maar al snel piept en kraakt de boel. De beste manier om  punten op de kaart te zetten hangt natuurlijk af van de aard van jouw applicatie, maar in mijn geval lijkt het me het beste om de kaartdata eenmalig uit een xml-bestand in te lezen in een javascript-array. En vervolgens deze in-memory-array met marker-info te gebruiken als de kaart verschoven wordt. Of als er een filter (aan- of uitvinken van regio’s of soorten uitjes) over de kaart wordt gelegd. Met andere woorden, je vult een in-memory-array en manipuleert deze als het mogelijk is. Sneller krijg je het niet.
• De interne array met markers wil ik inzetten in combinatie met een Google Maps clientside boundary filter dat bepaalt welke markers binnen het zichtbare kaartgebied vallen. Sta je als markertje buiten de marges van de kaart? Da’s pech. Dan ben je de lul en wordt je niet geplot. Dat scheelt ook weer laadtijd en het bespaart werkgeheugen.
• Nog zo’n afweging. Haal je echt alle info in één keer binnen? Of is het beter om je te beperken tot de basisinformatie. Laad je de complete set aan data van een markerobject dynamisch in op het moment dat iemand daadwerkelijk op een prikkertje klikt? Bij grote aantallen markers (en dus meer detailinformatie) pleit ik voor de tweede optie.

Je ziet, er is nog genoeg werk aan de winkel.

Hey … wat vind jij? Ontbreekt er naar jouw mening wat aan de Op het programma kaart? Vind je dat er iets vreselijk mis is met de interactie? Ventileer jouw mening in de comments …

Tellen, tellen, tellen
Alle functionaliteit die in de demo zit vind je ook terug in het eindresultaat. Maar er is meer. Zo heb ik behoorlijk wat tijd besteed aan het visueel maken van tellingen. In de legenda zie je aantallen: totalen per soort project en per plaats. Deze totalen veranderen als de gebruiker vinkjes aan- of uitzet in de legenda.

Zoom je uit? Ook de getallen die je in de rode ballen ziet op een laag zoomniveau reageren op de checkboxes in de legenda en worden continu bijgewerkt.

Interactie
Interactie blijft naar mijn mening het meest uitdagende aspect van een Google Maps applicatie. Wat gebeurt er als iemand ergens op klikt? Is het intuitief? Werkt de interactie onder alle omstandigheden correct?

Meer dan eens schoot een collega de afgelopen weken grote gaten in m’n kaartbrouwsel. Met een paar muisklikken. Terwijl ik toch echt overtuigd was dat het geheel bulletproof was en naar behoren werkte. Als dat niet inspirerend werkt!

Lek?
Ongetwijfeld is de In de Buurt mashup ook in z’n huidige staat over de rooie te krijgen. Vind je een nare bug of lekke code? Je doet me een plezier als je het me laat weten in de comments!

Check it
Okay, genoeg gebabbeld. De real deal bekijk je op Alles over bijzondere projecten in uw buurt (klik op alles bekijken). Als je allergisch bent voor Shadowbox, dan vind je hier de kaart zonder javascript effecten.

Ik bouw een demootje van een Google Maps  kaart met bijzondere projecten in de buurt. Momenteel zijn de In de buurt activiteiten al te zien op de corporate website, maar we willen graag een wat ruimer bemeten uitvoering van de kaart bouwen.

De eerste vruchten van mijn noeste arbeid zijn beschikbaar: een schermvullende Google Map mashup met de bijzondere buurtprojecten. Er is nog veel werk aan de winkel, maar ik kan het niet laten er alvast wat over te vertellen.

Databronnen en performance

Hoe ga je met je data om? Da’s vaak een uitdaging, want als je niet uitkijkt verandert je mooie Google Maps applicatie al snel in een onwillig en sloom gedrocht.

Een xml-bestand dient als databron. Het is niet belangrijk om realtime informatie op het scherm te zetten. Het is de planning dat dit bestand één keer per dag programmatisch wordt gevuld vanuit een achterliggende SQL Server database.

Bij het laden van de pagina met de Google Maps kaart wordt er eenmalig gelezen uit het xml-bestand. Daarna (als de kaart wordt verschoven of als er wordt in- of uitgezoomd) levert een javascript array de informatie. Een client side-boundary filter bepaalt welke objecten er op de kaart getoond worden. De performance van de Google Maps kaart is derhalve goed te noemen. Ook als er een paar honderd prikkertjes geplot worden reageert de kaart vlotjes.

Niet alle informatie wordt beschikbaar gesteld via het xml-bestand. Bij het doorklikken op een markertje wordt een uitgebreide set aan informatie direct uit de achterliggende database op. Het is handiger om deze data on-the-fly op te halen dan op voorhand in het xml-bestand te stoppen. In deze demoversie, waar de database in kwestie niet beschikbaar is, levert een doorklik trouwens een obligate “lorem ipsum” tekst op.

Anders dan anders

Ik heb gretig gebruik gemaakt van de code bibliotheken die door anderen ontwikkeld zijn als aanvulling op de Google Maps API.

Hack die class

De kaart zet de Labeled Marker class om op een laag zoomniveau ikonen op het scherm te zetten die voorzien zijn van een tekstlabel. Concreet: bij als de kaart uitzoomt naar niveau 12 of lager zie je niet langer de individuele markertjes, maar per locatie een icon waarop je het aantal In de buurt projecten ziet die aan die plaats gekoppeld zijn.

De Labeled Marker class is op zich al een heel handige uitbreiding van de Google Maps API. Maar ik wil graag de grootte van de tekst op het label programmatisch bepalen — hoe hoger het aantal projecten in een bepaalde locatie, hoe groter de tekst. De functionaliteit om de fontgrootte per afzonderlijke marker te regelen zit niet in de extensie. Daarom heb ik de Labeled Marker class een beetje aangepast. Zodat de grootte van labeltekst niet alleen per marker gemanipuleerd kan worden, maar ook altijd netjes centreert. Ongeacht de corpsgrootte.

Een infowindow naar eigen smaak

Een tweede uitbreiding op de Google Maps API waar mijn demootje op stoelt: ExtInfoWindow. ExtInfoWindow is een class om een Google Maps infowindow helemaal naar eigen wens vorm te geven. Dat heb ik juist nodig. De informatie die ik wil laten zien is te groot voor het standaard Google Maps infowindow. En aan het gebruik van de gemaximaliseerde versie kleven nadelen. Met ExtInfoWindow heb je volledige controle over de styling van je infowindow. En bovendien kun je heel gemakkelijk op een asynchrone manier informatie inladen. Dit is een juweeltje.

What’s in a street view

Pas recentelijk geïntroduceerd in Nederland: Google Maps street view functionaliteit. Amsterdam is één van de Nederlandse steden waarin Google’s streetview camera-auto op het moment van schrijven al heeft rondgetourd. Das goed nieuws, want veel van de buurtprojecten vind je in Amsterdam.

Als je in de demo op een markertje doorklikt zie je in het infowindow niet alleen detailinformatie. Er is ook een street view link. Via dit linkje verschijnt de Google Maps Streetview in het infowindow. Tenminste, als street view op de locatie in kwestie beschikbaar is. Achter de schermen gebruik ik de getNearestPanorama methode van het GStreetviewClient() object om te checken of er überhaupt street view data  is. Is dat het geval? Gelukkig. Inladen die Flash view! Nee? Dan krijg je een helaas pindakaas melding voor je kiezen.

Het zou natuurlijk mooi zijn om van tevoren te bepalen of street view beschikbaar is. En het linkje weglaten als er nog geen beelden op street view niveau zijn. Het komt de gebruikerservaring natuurlijk niet ten goede om een link aan te klikken die je vervolgens vertelt dat je niks te zien krijgt

Over GPolygon cirkels wil ik het even hebben. An sich heb je aan een cirkeltje op een kaart natuurlijk niks. Maar een praktische toepassing van het GPolygon object is gemakkelijk te verzinnen. In mijn geval denk ik aan het tekenen van een cirkel met een bepaalde radius vanuit een middelpunts-coordinaat. Op basis van de gecreërde cirkel-overlay kun je vervolgens bepalen of een ander punt binnen het oppervlak van deze cirkel valt. Of juist niet.

Kijk, da’s handig om te weten. Voor mijn website met uitjes wil ik deze functionaliteit gebruiken om te bepalen of er in de buurt van een uitje nog meer spannends valt te beleven. Zeg maar een is dit misschien ook interessant voor u? functie. Ook op een nieuwe website van een vastgoedorganisatie komt dit soort functionaliteit – bij het op de kaart zetten van het vastgoedbezit – in de (nabije) toekomst wellicht van pas.

Okay. Genoeg gekletst. Check de demo om een idee te krijgen van waar ik het eigenlijk over heb …

Natuurlijk kun je weten dat Google achter de schermen driftig werkt aan dit soort functionaliteit. Dus het is een kwestie van tijd voor we het officieel terugzien: Google Adsense integratie met Google Maps. Maar dan nog … ik heb nergens gezien / gelezen / gehoord dat je straks in het Google Maps infowindow object (de ballon die op je scherm verschijnt als je op een markertje klikt) een Google Adsense reclameuiting kunt laden. De screendumps die ik gezien heb laten een schermobject zien dat losstaat van het infoWindow object.

Eerlijk is eerlijk. Een directe manier van integreren heb ik tot nu toe ook niet kunnen ontdekken. Ik vraag me af of die überhaupt wel bestaat. Het laden van Google Adsense code met behulp van de javascript functie die ook het infowindow object op je scherm zet werkt namelijk niet. Schade! Schade! Schade!

Maar wat wel werkt is het volgende. Je gaat Google Adsense inladen in een onzichtbaar (stijl – display: none;) pagina-element. Vervolgens plak je de code, op het moment dat iemand op een markertje klikt, in het Google Maps infoWindow object – met behulp van object.innerHTML. Als je er dan ook nog voor zorgt dat je op je pagina informatie opneemt die relevant is voor de Google Map (in mijn geval wat tekst over dagjes uit met kinderen), dan is de kans levensgroot dat je de plank niet misslaat met de getoonde Google advertentie. Oké, misschien is het resultaat geen toonbeeld van optimale contextuele relevantie. Maar het lijdt geeen twijfel dat de Google Adsense ads die je op je scherm krijgt relevant zijn in brede zin.

Check dan die Google Map mashup voor een dagje erop uit met de kinderen

Tijd om in het toetsenbord te klimmen dus. Maar heb ik dan eigenlijk wel wat te melden? Hmm. Echt spannende dingen die ik online wil terugzien heb ik de afgelopen tijd eigenlijk niet meegemaakt. Ik ben voornamelijk druk geweest met het stoeien met de code van de Google Maps API.

Voor mijn werk knutsel ik aan een Google maps dingetje. Een Google Maps mash-up waarin de gebruiker actueel woningaanbod kan bekijken en kan spelen met verschillende parameters (zoals huur vs koop, bestaande bouw vs nieuwbouw, woningtypen (appartement, eengezinswoninkje) en gemeente in het werkgebied). Het werken hieraan heeft een groot deel van mijn tijd opgeslokt. En ondanks het feit dat het af en toe meer dan een uitdaging is om de leeuwen en beren op het pad af te schieten is het fun. Wat heb ik zoal geleerd? Teveel om op te noemen. Om te beginnen een tweetal highlights:

Het omrekenen van het ene coordinaat-systeem naar het andere
Het primaire systeem van de organisatie gebruikt RD (Rijksdriehoek) coordinaten in haar achterliggende database om de locatie van objecten te beschrijven. Aangezien Google Maps gebruik maakt van WGS84 coordinaten is de vertaalslag van RD naar WGS84 nodig.

Google Maps GMarker interactie
Het is vrij eenvoudig om markeerpunten (Google Maps GMarker objecten) op een Google Map te zetten en deze te koppelen aan een categorie (bijvoorbeeld huur- of koopwoning). Om vervolgens deze markers te verbergen of te tonen door een checkbox aan of uit te vinken. Het wordt wat spannender als je verschillende parameters wilt combineren. Als de criteria om jouw markers te tonen / verbergen niet alleen afhangen van de categorie koop of huur, maar daarnaast ook van het woningtype. Bijvoorbeeld: je hebt een koopwoning van het type appartement, maar ook eentje van het type eengezinswoning. En dan zijn er ook nog huureengezinswoningen. Misschien voel je de bui al hangen? Hoe zorg je ervoor dat een marker in een Google Map zich bewust is van het feit dat hij zowel valt in de categorie huur als appartement?