Nullbeta aka HansR - online sinds 2001. Tegelijkertijd baasje en knecht van het slechtst gelezen weblog van het noordelijk halfrond. XHTML en cascading style sheet fetisjist. Parttime usability neuroot. Object oriëntatie losert. SQL wannabe. De ongekroonde koning van de ongedocumenteerde spaghetticode. Verliefd op en ziek van SEO. Vindt zijn Asics tegenwoordig vaak leuker dan zijn laptop.

Nullbeta sluit zich aan bij de woorden van Dante – All hope abandoned, he who entereth here ...

Yo Rico! Wanna do kaboooom?

Null, code knagen, cms in de polder, stijlbladen, gelaagd bouwen, MySQL, php, Emmeloord, webservers, toegankelijk, document object model, zzp, organisch, puntkomma kwijt, webstandaards, uhhh zoekmachine spam? Beta. Nullbeta.

Null ...

Nul? Nee null! Uhh, wat is null?

... Beta

Adj. 1. important, of importance - of great significance or value; "important people"; "the important questions of the day"


 

Google Maps API ondersteunt reverse geocodering

25 oktober 2008

Eerder dit jaar heb ik me eens bezig gehouden met de reverse geocoder van Nico Goeminne. In mijn post schreef ik over het feit dat het opzoeken van een adres aan de hand van een lat lng waarde geen onderdeel van de Google Maps API is. Een hiaat in de API dat door Nico’s reverse geocoder werd opgevuld.

Afgelopen week schreef Pamela Fox op het Google Geo ontwikkelaars weblog dat de Google Maps API (eindelijk) is uitgebreid met ondersteuning van reverse geocodering. De code om een adres te distilleren uit een lat / lng coordinaat is kinderlijk eenvoudig en ziet er – voorbeeldcode van Pamela en vertaald naar het Nederlands – zo’n beetje uit als:

geocoder.getLocations(latlng, function(adressen) {
  if(adressen.Status.code != 200) {
    alert("de reverse geocoder kon geen adres vinden voor coordinaat " + latlng.toUrlValue());
  }
  else {
    var adres = adressen.Placemark[0];
    var melding = adres.address;
    map.openInfoWindow(latlng, melding);
  }
});

Sweet! Zelfs ik snap het!

Het grote voordeel van de Google Maps API reverse geocoder ten opzichte van Nico’s GReverseGeocoder? De zojuist aan de API toegevoegde functionaliteit is vooral zuiniger dan de reverse geocoder van Nico, die meerdere geocode requests nodig heeft om een adres te retourneren.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als ,

Een kaart voor zwemmend Nederland

1 september 2008

Rory van Zwemmend Nederland werkt aan een zwemgids. Graag wil hij een Google Maps kaartje in zijn website integreren. Ik maak voor hem een eerste opzetje. Gebaseerd op een paar onderling uitgewisselde e-mailtjes en een xml-bestand. Hey. Je moet tenslotte ergens beginnen.

Het is de bedoeling dat er op het kaartje allerleid praktische informatie over o.a. zwembaden, duikverenigingen en reddingsbrigades in Nederland te vinden is. Vooralsnog beperkt de gegevensset zich tot zwembaden.

Nu heb ik de afgelopen jaren al vaker met het Google Maps bijltje gehakt. En hoewel een Google maps dingetje in essentie meestal op hetzelfde neerkomt - het plotten van informatie op een kaart, meestal door een geografisch punt als een prikkertje weer te geven - kom je elke keer wel weer een aantal nieuwe uitdagingen tegen.

Zo ook deze keer. In het xml-bestand dat Rory aanleverde waren bijvoorbeeld geen x- en y-coordinaten opgenomen. Voordat ik uberhaupt aan een kaartje kon denken moest de locatie van een kleine 600 zwembaden worden geo-gecodeerd en toegevoegd aan het xml-bestand. Nu is het geocoderen van adressen niet zo’n probleem, met het in-memory manipuleren van een xml-bestand (xml inlezen, bewerken en terugschrijven) had ik geen ervaring. Met simpleXML stelt het weinig voor. Weer wat geleerd!

Meer lezen over mijn opzetje voor Rory’s kaart? Klik door naar Zwemmend Nederland - de voorbereiding of (als je geen zin hebt in blablah vooraf) mijn gestoei met het Google Maps kaartje

Geschreven door HansR
Tot nu toe zijn er 3 reacties op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als , ,

Experimentje: een volgepropt kaartje

19 augustus 2008

De primaire functionaliteit van een Google Maps kaart is toch wel het aanduiden van een geografische locatie met behulp van een ikoontje.

Maar hoeveel van die ikoontjes kun je eigenlijk kwijt op een kaart? De consensus is dat een paar honderd markertjes het maximale aantal is wat je op een kaart moet zetten zonder performanceproblemen met de browser te krijgen. Meer markertjes? Dat betekent dat je maatregelen moet nemen. In de vorm van client- of serverside common point filtering, een boundary filter of met het inzetten van de Google Maps API MarkerManager bijvoorbeeld. In het must-read boek Beginning Google Maps Applications with PHP and Ajax lees je over het schalen van een Google Maps applicatie met grote hoeveelheden data.

Nogmaals, vanuit performance oogpunt is het natuurlijk niet aan te raden, maar een leuk experimentje is het wel om te kijken hoe ver je kunt gaan. Dus zet eens een fiks aantal Google Maps markertjes op de kaart om te kijken hoe de browser zich houdt. Of-ie uberhaupt overeind blijft. Zonder een poging te doen om de data te schalen. Een eerste poging op zoek naar de grenzen. Oftewel, hoeveel markertjes passen er op een Google Maps kaart?:

Als basis neem ik een bestaande Google Maps kaart met daarop 300 prikkertjes. Da’s al ruim meer dan het hierboven genoemde maximale aantal. Maar voor moderne browsers (Firefox, Opera, Internet Explorer) op een doorsnee computer is het in de praktijk geen probleem om zo’n kaart te renderen.

Om de kaart wat voller te maken maak ik gebruik van een drietal xml-bestanden (even geleend van de ANWB website, waar ze als Points of Interest csv-bestanden te downloaden zijn):

xml bestand 1: 598 campings
xml bestand 2: 408 parkeerplaatsen en wegrestaurants
xml bestand 3: 568 tankstations

Okay. Da’s bij elkaar goed voor zo’n 1574 extra markertjes op de kaart. Door het aanvinken van een checkbox wordt de informatie van respectievelijk het bestand met campings, parkeerplaatsen of pompstations geladen en als prikkertje op de kaart gezet.

Het resultaat? Eigenlijk valt het nog best wel mee. Zowel Firefox, Opera als Internet Explorer blijven op de been. Geen browser crash. Wel zijn er behoorlijke verschillen in geheugengebruik en snelheid van laden te zien.

Opera
Opera rendert snel. Met de pagina geladen heeft Opera genoeg aan 70MB werkgeheugen. De prikkertjes eisen hiervan 6 MB aan extra RAM op.

Internet Explorer
IE7 heeft nogal wat werkgeheugen nodig, 175MB. Het is opvallend dat de extra prikkertjes zoveel extra MB’s aan geheugen opvreten. 80MB gaan hieraan op. Het duurt behoorlijk lang voordat de prikkertjes op het scherm staan. In de praktijk is dit een absolute no-go.

Op een andere computer getest, en daardoor niet helemaal een eerlijke vergelijking. IE6 laadt nog veel trager in dan Internet Explorer 7. Bovendien is de belasting op het werkgeheugen ook niet gering. Met alleen de basispagina in het geheugen wordt 58MB aangesproken, maar het laden van de individuele xml-bestanden zorgt telkens voor een fikse toename van het RAM-gebruik:

+ campings = 101MB
+ tankstations = 137MB
+ parkeerplaatsen = 156MB

Niet doen als je dit voor een live-site in de gedachten had.

Firefox
Firefox is met een geheugengebruik van 90MB een stuk zuiniger dan Internet Explorer. Bovendien doen de extra markertjes geen al te grote aanslag op het werkgeheugen. 20MB, that’s it. Het laden van de markertjes gaat niet zo snel als Opera, maar wel een stuk vlotter dan IE.

Misschien zou ik nog eens kunnen overwegen om de rek wat verder te testen door mijn bestand van een kleine 1500 hotels aan te spreken. Aan de andere kant, het beeld is duidelijk. En wat heeft de gebruiker van je kaart er eigenlijk aan? Zo’n kaart die volgeplakt is met ikoontjes?

Een volgepropt google maps kaartje

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als , ,

Webtool demootje - over prikkertjes verplaatsen en geocodering

7 augustus 2008

Bij woningbouwcorporatie Ymere hebben we een webtool waarmee het aanbod van vastgoed op de corporate website kan worden vastgelegd. Toen we de tool maakten leek het wel een strak plan om de WGS84 coördinaten van een vastgoedobject te bepalen door de gebruiker op een Google Maps kaart te laten klikken en zodoende de x en y te registreren. Snel en simpel. Toch?

In de praktijk bleek deze opzet de plank behoorlijk mis te slaan. Want wat doe je als niet precies weet waar een object zich bevindt? Dan is het knap lastig om te bepalen waar je je prikkertje neer moet zetten. En ook als je toevallig wel weet in welke straat een woning staat, dan maakt het nogal een verschil of het over Nassaukade 1 in Amsterdam gaat. Of dat je het pand op nummer 200 moet hebben.

Met andere woorden, tijd voor een nieuwe en verbeterde versie. Zet een markertje op de kaart en leg de coördinaten van vastgoed vast door:

  • te klikken op de kaart en het verslepen van het markertje dat wordt geplaatst — da’s de functionaliteit die er al inzat. Tot dusver geen spannende zaken. Wel nieuw… er wordt gekeken of er al eerder een x en y coördinaat waren opgevoerd. Als dat zo is dan wordt er een ikoontje op het kaartje gezet. De kaart centreert op dat coördinaat.
  • een adres in te typen in een invoervak. Het ingetypte adres wordt verwerkt door de GClientGeocoder van de Google’s Maps API. Met een beetje mazzel krijg je een Placemark object terug. Dit Placemark object bevat ook de x en y, die je kunt gebruiken om een markertje op de kaart te zetten. Als er tijdens het geocoderen van het adres fouten optreden, als een adres niet bekend is bijvoorbeeld, resulteert dat in feedback met een beschrijving van de fout.

Kon de Google Maps geocoder het adres vertalen in een Placemark object? Goed. De kaart centreert op de coördinaten die de geocoder teruggeeft en een ikoontje wordt op de kaart geprikt. De gebruiker kan het markertje met de beproefde sleur en pleur methodiek verplaatsen. Om tenslotte de coördinaten vast te leggen.

Kijk, dat werkt alweer een stuk prettiger. Even kijken hoe? Check het demootje!

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als , ,

Google Maps nieuwtjes

22 juli 2008

Okay, even een paar leuke features die heel recentelijk aan Google Maps zijn toegevoegd en die ik je niet wil onthouden:

GDirections
De beschrijving die je in Google Maps kunt gebruiken om de beste route van of naar een locatie op de kaart te laten zien is uitgebreid met een “Lopen” linkje. Als je daarop klikt krijg een een looproute tussen vertrekpunt en bestemming voorgeschoteld.

Deze functionaliteit is in beta. In de Google Maps API documentatie is momenteel dan ook nog niet te lezen hoe je de looproute aan- en uitzet. Met andere woorden, behalve in het voorgekookte maps.google.com kun je deze beta functionaliteit dan ook nog niet gebruiken. Maar het is natuurlijk slechts een kwestie van tijd voordat het ook in de API beschikbaar gesteld wordt.

Adsense voor Google Maps
Adsense voor Google Maps (gesponsorde ikoontjes van adverteerders integreren in je Google kaartje) is nu ook toegankelijk voor locaties buiten de Verenigde Staten.

Google Maps Adsense in Nederland

Onderstaande code is voldoende om de Adsense ikoontjes te integreren in je mashup. Hierbij zijn maxAdsOnMap en channel optioneel.

var adsManager = new GAdsManager(map, “ca-pub-jouw-adsense-id”, { maxAdsOnMap:10, channel:”id-van-het-adsense-channel” } );
adsManager.enable();

Als je in de gaten wilt houden hoeveel keer de Adsense ico’s vertoond zijn en of ze wat opleveren, dan is een kanaal handig. In je Google Adsense console maak je eerst een kanaal aan en het id ervan gebruik je in de optionele parameter channel. Als het goed is zie je het kanaal na verloop van tijd terug in je Adsense rapporten.

Voordat je jezelf rijk rekent: echt overweldigend veel aanbod is er in Nederland trouwens op het moment nog niet. Ik vond alleen wat gesponsorde ikoontjes in Amsterdam (zie screenshot hierboven) en Rotterdam. LoL. Maar ook dat zal ongetwijfeld in de toekomst veranderen. En de ikoontjes zijn absoluut niet hinderlijk aanwezig, dus ik laat Google Adsense for Google Maps in elk geval lekker aanstaan

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Adsense · Google Maps
Getagged als ,

Server side common point filtering

8 juni 2008

Onlangs besteedde ik aandacht aan de mogelijkheid om in Google Maps een cirkel te tekenen en vervolgens te bepalen of ander coordinaat binnen het oppervlak van de getekende cirkel valt. Dat resulteerde in dit demootje van een client side common point filter.

In die post had ik het over een mogelijke praktische toepassing van een common point filter: het tonen van gerelateerde info / in de buurt informatie voor mijn website met gezinsuitjes.

Het saaie deel van deze klus, het verzamelen van hotelinformatie, kon ik gelukkig uitbesteden aan een ** kuch ** creatief scriptje. Ik wist de hand te leggen op een xml bestand met hotels in Nederland, inclusief geo-informatie. Met de hoteldata voorhanden werd het duidelijk dat een client side oplossing eigenlijk geen optie is. Het is niet echt handig om in één keer anderhalve MB aan xml-data in te laden. Is er een alternatief?

Zeker. De oplossing is eenvoudig. Met php is een server side common point filter¹ snel te realiseren. Bij het laden van de details van een uitje wordt een php-functie aangeroepen die de records in de tabel met hotelgegevens doorloopt en de afstand tussen de locatie van het uitje en het hotels in kwestie berekent². Is deze afstand in kilometers minder dan een vooraf vastgestelde afstand (in mijn geval 10 kilometer)? Dan wordt de hotelinformatie getoond bij het uitje in kwestie.


function afstandTotPunt($lat1,$lng1,$lat2,$lng2) {

$a1 = deg2rad($lat1); //lat 1 in radialen
$a2 = deg2rad($lat2); //lat 2 (het xcoordinaat van het uitje) in radialen
$b1 = deg2rad($lng1); //lng 1 in radialen
$b2 = deg2rad($lng2); //lng 2 (het ycoordinaat van het uitje) in radialen

$r = 6378.8; //de radius / straal van de aarde in kilometers

return round(acos(cos($a1)*cos($b1)*cos($a2)*cos($b2) + cos($a1)*sin($b1)*cos($a2)*sin($b2) + sin($a1)*sin($a2)) * $r);

}

Achtergrondinformatie over het berekenen van de afstand tussen twee punten vind je trouwens hier: What is the best way to calculate the great circle distance en op de Haversine formula pagina van Wikipedia.

¹ Code: Beginning Google Maps Applications with PHP and Ajax van Michael Purvis, Jeffrey Sambells en Cameron Turner
² De serverload voor het doorlopen van de records in de tabel met hotelgegevens is niet al te zwaar. Dus neem ik niet de moeite om er andere filters op te zetten.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als , , ,

Spelen met GPolygon functionaliteit

1 juni 2008

De Google Maps API voorziet in de mogelijkheid om op basis van een aantal coordinaten een vorm op de kaart te zetten. Met behulp van het GPolygon object kun je bijvoorbeeld een vierkant, een veelhoek of een cirkel in een layer bovenop de kaart tekenen.

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 de nieuwe website van woningbouwcorporatie Ymere 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 …

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als , ,

Google Earth in de browser

29 mei 2008

Google Earth en je webbrowser zijn vriendjes geworden. Dat is, Google heeft een browser plugin uitgebracht om Google Earth in je webbrowser te draaien. Op het moment van schrijven worden trouwens slecht een beperkt aantal browsers nternet Explorer 6 en hoger, Firefox 2 - en alleen het Windows platform - ondersteund.

Mijn eerste, snelle en tamelijk ongenuanceerde indruk:

  • De weergave van Google Earth in de browser ziet er indrukwekkend uit - echt mooi
  • Mijn Firefox browser kreunt en steunt onder de zware last, vooral bij de grotere kaarten. Met andere woorden: de performance is niet om naar huis te schrijvnen bij complexere / schermvullende kaarten
  • De integratie met Google Maps werkt bij mij ** kuch ** niet helemaal vlekkenloos. Door het toevoegen van het map type G_SATELLITE_3D_MAP aan je Google Maps webpagina heb je de Google Maps view ter beschikking. Tot zover geen probleem. Bij het uitproberen van deze code op één van mijn websites, kon ik mijn markertjes niet meer terugvinden na omschakeling naar 3D Google Earth. Vreemd. Op een andere site, met een simpel kaartje zonder toeters en bellen, werkt het overigens wel naar behoren.

Conclusie, Google Earth in de browser ziet er op het eerste gezicht veelbelovend uit. Maar ik moet zeker in de API duiken om de mogelijkheden van Google Earth in de browser verder te verkennen. En potentiële struikelblokken te herkennen. Werk aan de winkel dus!

Google Earth in de browser

Meer lezen: Meer over de Google Earth API en de integratie met Google Maps

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als

Het Google Maps GPolygon object

14 februari 2008

Leuk. Spelen met de Google Maps API. Gaandeweg word je steeds wijzer.

Voorbeeldje: het GPolygon object in Google Maps stelt je in staat om een vorm op je GMap kaartje te tekenen. Nu is dat niet zo’n probleem als het een vierkant of een andere eenvoudige vorm is. Maar wat als je een overlay wilt maken in de vorm van de provincie Friesland? Ga je dan alle coordinaten die nodig zijn om het polygoon te tekenen handmatig opzoeken? Da’s toch iets te omslachtig.

De oplossing die ik bedacht is de volgende: een polygoon overlay prepareer je vrij eenvoudig door in Google Earth een polygoon overlay te maken, het getekende object als KML bestand op te slaan en vervolgens de coordinaten in het KML bestand te gebruiken om huup huup huup barbatruc (relatief) snel een eigengemaakt XML bestand te brouwen dat een Google Maps polygoon overlay implementeert.

Zoiets als hieronder, waarin een xml-bestand de basis is voor een (vrij ruwe) Gpolygon overlay van de provincie Friesland.

<?xml version=”1.0″ encoding=”UTF-8″?>
<provincies>
<provincie naam=”Friesland”>
<punt lat=”5.6417540301387″ lng=”53.31862537478114″ />
<punt lat=”5.601394272591392″ lng=”53.29722883035308″ />
<punt lat=”5.514664156630218″ lng=”53.25351579038482″ />
<punt lat=”5.436265962100094″ lng=”53.20028996820903″ />
<punt lat=”5.416757798236787″ lng=”53.1510373918212″ />
<punt lat=”5.395750580550342″ lng=”53.09988125925209″ />
<punt lat=”5.379957548464859″ lng=”53.05170159446328″ />
<punt lat=”5.39763038307855″ lng=”53.02456027531464″ />
<punt lat=”5.401958640132307″ lng=”52.98881301736234″ />
<punt lat=”5.408149085717938″ lng=”52.95677879231113″ />
<punt lat=”5.399267798428184″ lng=”52.93447282266515″ />
<punt lat=”5.412958517587612″ lng=”52.91651012360246″ />
<punt lat=”5.380917899485013″ lng=”52.89800152571775″ />
<punt lat=”5.36367928371574″ lng=”52.87372539129518″ />
<punt lat=”5.416175071741861″ lng=”52.85154622296546″ />
<punt lat=”5.491051933326873″ lng=”52.84469950940976″ />
<punt lat=”5.551940503772812″ lng=”52.84088213581107″ />
<punt lat=”5.598639728158858″ lng=”52.84714773291602″ />
<punt lat=”5.636523793034897″ lng=”52.85358018645154″ />
<punt lat=”5.661714108058447″ lng=”52.84324246289889″ />
<punt lat=”5.697648152178303″ lng=”52.84261449445339″ />
<punt lat=”5.749430081155723″ lng=”52.83045122396133″ />
<punt lat=”5.785232690944113″ lng=”52.80754678183364″ />
<punt lat=”5.82964060277358″ lng=”52.80673432868616″ />
<punt lat=”5.880492542198327″ lng=”52.79889359510096″ />
<punt lat=”5.919515645360648″ lng=”52.83011096406028″ />
<punt lat=”5.960191924145264″ lng=”52.83636075248498″ />
<punt lat=”5.984057665880329″ lng=”52.82326561821252″ />
<punt lat=”6.015227775365845″ lng=”52.82125777577868″ />
<punt lat=”6.065867012905827″ lng=”52.8371042553437″ />
<punt lat=”6.11826155321647″ lng=”52.843120486328″ />
<punt lat=”6.210568730071103″ lng=”52.89159646550523″ />
<punt lat=”6.251936444106989″ lng=”52.92319449271693″ />
<punt lat=”6.286614540385401″ lng=”52.92246151728106″ />
<punt lat=”6.331584002418808″ lng=”52.90076425350457″ />
<punt lat=”6.366461450997775″ lng=”52.91479507778703″ />
<punt lat=”6.401967964850272″ lng=”52.93043759610292″ />
<punt lat=”6.425470099821169″ lng=”52.96630735522788″ />
<punt lat=”6.365579100846901″ lng=”53.02684756683307″ />
<punt lat=”6.367040039553033″ lng=”53.06206588410836″ />
<punt lat=”6.320289090776243″ lng=”53.07279684808722″ />
<punt lat=”6.323753840929329″ lng=”53.09401149324337″ />
<punt lat=”6.263968310031288″ lng=”53.10351786451235″ />
<punt lat=”6.185694303123142″ lng=”53.12509837860175″ />
<punt lat=”6.179219235938903″ lng=”53.15391711492647″ />
<punt lat=”6.206240726857743″ lng=”53.19119827794165″ />
<punt lat=”6.224908574241908″ lng=”53.218845366347″ />
<punt lat=”6.237846164792843″ lng=”53.2398940083819″ />
<punt lat=”6.261144497410939″ lng=”53.2791593271518″ />
<punt lat=”6.291200702654109″ lng=”53.30800580725216″ />
<punt lat=”6.280377771892447″ lng=”53.34194945857235″ />
<punt lat=”6.231242919591765″ lng=”53.34862635327323″ />
<punt lat=”6.175961820092312″ lng=”53.37263418102311″ />
<punt lat=”6.188510064022098″ lng=”53.41315211996164″ />
<punt lat=”6.045691180344208″ lng=”53.4022774077747″ />
<punt lat=”5.887686278109897″ lng=”53.37823569581277″ />
<punt lat=”5.742743614816973″ lng=”53.3410559123932″ />
<punt lat=”5.6417540301387″ lng=”53.31862537478114″ />
</provincie>
</provincies>

Dit bestand laadt je vervolgens met een javascript functie in in je Google Maps toepassing. Let op: de lat en lng waarden staan in het KML bestand omgekeerd. Vandaar dat hieronder eerst het lng attribuut wordt uitgelezen en daarna het lat attribuut om ze in de voor Google Maps geschikte volgorde te krijgen. Over quick and dirty gesproken :-) :

function polyLaden() {
if (xmlhttp) {
var url=”/xml/provincies.xml”;
xmlhttp.open(”GET”,url,false);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var xmldata = GXml.parse(xmlhttp.responseText);
var punten = xmldata.documentElement.getElementsByTagName(”punt”);
var pnts = [];
for (var i = 0; i < punten.length; i++) {
pnts[i] = new GLatLng(parseFloat(punten[i].getAttribute(”lng”)), parseFloat(punten[i].getAttribute(”lat”)));
var poly_friesland = new GPolygon(pnts,”#666666″,1,1,”#ff0000″,0.5,{clickable:true});
}

map.addOverlay(poly_friesland);

GEvent.addListener(poly_friesland,”click”, function() {
alert(”Je klikte op Friesland”);
if (poly_friesland.isHidden()) {
poly_friesland.show();
}
else {
poly_friesland.hide();
}
});
}
else {
alert(”Er was een probleem met het ophalen van xml data voor de kaart.”);
}
}
}
xmlhttp.setRequestHeader(’Accept’,'message/x-formresult’);
xmlhttp.send(null);
return false;
}
else {
alert(”Het ophalen van kaartinformatie wordt door uw browser niet ondersteund.”);
}
}

Tof. En de performance van de polygoon rendering is behoorlijk te noemen. Ik ben wel benieuwd hoe de performance van een kaart wordt beïnvloed als je er voor elke provincie een overlay overheen zet.

Tot zover het goede nieuws. Wat dan alleen weer een afknapper is … het feit dat het GPolygon object geen mouseover event ondersteunt. Een klik-event kun je wel registreren, maar een mouseover / mouseout — bijvoorbeeld om een opwindend visueel effect te creëren als er iemand overheen muist — helaas (nog) niet. Aaaargh!!!

Update
Bill Chadwick heeft een subclass voor het GPolygon object geschreven waarmee je op een eenvoudige manier mouseover effecten implementeert. Gewoon even die polygon javascript class scoren en you’re good to go.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als , , ,

Reverse geocoding met Google Maps

26 januari 2008

Ik ben behoorlijk weg van de leuke dingen die je kunt doen met Google Maps. Het afgelopen jaar heb ik wat tijd besteed aan het doorgronden van en spelen met de achterliggende API.

Helaas is het niet alles goud wat er blinkt en loop je wel eens tegen beperkingen aan. De Google Maps API voorziet bijvoorbeeld niet in de functionaliteit om adressen op te zoeken op basis van een GLatLng object (in niet-Googlemaps taal betekent dat: een x- en een y-coordinaat). Je kunt dus niet op een Google Maps kaartje klikken en het bijbehorende adres geretourneerd krijgen. Dat vind ik vreemd, want andersom kan het wel. Google Maps voorziet in een zogenaamde geo-coding client. Je voert een adres in en de Google Maps code retourneert het bijbehorende WGS84 coordinaat dat het betreffende adres op de wereldkaart inneemt.

Gelukkig zijn er meerdere wegen die naar Rome leiden. In mijn geval — de wens om adresgegevens te genereren op basis van een lengte- en breedtegraad — wordt dit mogelijk gemaakt door de reverse geocoder van Nico Goeminne. Op basis van het GDirections object (het stuk functionaliteit in de Google Maps API die zorgt voor de routebeschrijvingen) heeft Nico de reverse geocoding code geschreven waarmee bepaald kan worden welk adres hoort bij het betreffende coordinaat. Kewl!!!

Wil je in de praktijk zien hoe het werkt? Dat kan. Ik heb een demootje online gezet in de vorm van een kaartje waarop je een markertje kunt zetten (en verplaatsen). Als je op het markertje klikt krijg je in het info window te zien waar je je bevindt. In de vorm van een x / y coordinaat en de omgekeerde geocodering - een adres dus..

Google Maps voorbeeld met reverse geocoder bekijken

Geschreven door HansR
Tot nu toe zijn er 2 reacties op deze tekst. Laat een reactie achter.
Geplaatst in Google Maps
Getagged als