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.
Geplaatst in Google Maps
Getagged als api, Google Maps, GPolygon, javascript

Reageren:

RSS feed voor reacties op deze blogpost. TrackBack URL