Met ruim 80.000 verhuurbare eenheden is deze woningbouwcorporatie een grote speler aan het firmament. Maar de corporatie doet meer dan woningen verhuren. Zo zijn er tal van buurtprojecten waar ze een rol in speelt — stedelijke vernieuwing, groenprojecten, kunst in de buurt, monumenten en leefbaarheidsprojecten.

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

 api · ExtInfoWindow · Labeled Marker · maps · street view · webwerk

Nullbeta aka HansR babbelt deze website louter op persoonlijke titel vol. Mogelijkerwijs worden Nullbeta's standpunten niet gedeeld door de organisatie die z'n boterham belegt. Maar kan dat iemand boeien?