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 api, Google Maps, GPolygon, javascript

Dinsdag 18 september 2007 organiseerde Peter Paul Koch in Pakhuis de Zwijger in Amsterdam het mini-congres voor front enders. Met als doel een belangenvereniging op te richten voor personen die zich beroepsmatig met frontend webdesign bezighouden. Voor iedereen met een beroepsmatige (x)html, Cascading Style Sheets of javascript tic dus. Maar ook voor Flashers. Want Flash is definitely frontend.

Het programma werd ingevuld met presentaties van Stephen Hay van Cinnamon en Refunk’s Bobby van der Sluis (mij vooral bekend vanwege zijn UFO project). En een aantal code reviews. Onder andere verzorgd door de lead frontend developers van Lost Boys, Eden Design en Info punt nl.

Bere-interessant allemaal … Maar het heeft me wel aan het denken gezet. Op de weg terug naar huis borrelde de vraag op: wie ben ik op webgebied? Wat kan ik en waar sta ik? Het antwoord: ik ben voornamelijk een generalist. Een jack of all trades. (X)HTML, cascading style sheets, javascript, webstandaards, XML, ASP, Google mashups, MySQL, IIS, zoekmachineoptimalisatie, PHP, web usability, Flash, grafische dingen, SQL, DOM scripting. Allemaal leuk om eens mee te knutselen en dat heb ik dan ook gedaan. Of zoals Vulcano — 1 van die onvergetelijke Nederlands topbands van de jaren 80 — al verkondigde: Een beetje van dit en een beetje van dat. Een beetje van zus. En een beetje van zo. Ik ben dus voornamelijk breed ge-oriënteerd. Daar is toch niks mis mee, zou je denken. Maar hoe zit het dan met de diepgang? Is het logische gevolg van elke spannende techniek niet dat je een chronisch gebrek aan specialisme ontwikkelt? Is het zo zoetjes aan niet verstandiger om me te concentreren op ëën of enkele deelgebieden?

Okay. Binnenkort maak ik m’n keuze met betrekking tot de webtechnische zaken waarop ik me ga concentreren. Helemaal helder heb ik het nog niet op m’n netvlies, maar ik denk dat het de voorkant van websites wordt waar ik me op wil focussen — XHTML, stijlbladen en javascript dus. Met daarnaast een solide kennis van CMS‘en (Drupal en Wordpress bijvoorbeeld) om als backend te implementeren. En SEO is en blijft natuurlijk ook wel spannend.

K*#@t. Daar gaan we alweer …

Geschreven door HansR
Tot nu toe zijn er 2 reacties op deze tekst. Laat een reactie achter.
Geplaatst in Cascading Style Sheets · Flash · Webstandaards
Getagged als css, frontend code, javascript, xhtml

De achtergrond
Met Company of Kids ben ik voorzichtig aan het nadenken over een vorm van samenwerking. Om te beginnen ben ik door Company of Kids gevraagd om een flash banner op Leuk voor kids te zetten. Om vervolgens maar eens een dooddoener-konijn uit de hoge hoed te trekken: meten is weten.

En ik wil graag weten hoe vaak de banner van Company of Kids aangeklikt wordt.

Het idee
Oké, dat is niet zo spannend zou je zeggen. Hang een javascript event handler aan het flash object en laat deze event handler een serverside script aanroepen dat het klik-veld van de betreffende record in de hey_hoevaak_wordt_er_op_mij_geklikt tabel met één ophoogt. Een kind kan de was doen …

Het probleem
Een kind kan de was doen … maar niet heus. In theorie klinkt het bovenstaande dan wel logisch, maar in de praktijk blijkt het gemakkelijker gezegd dan gedaan. Want hoewel het in Firefox niet zo’n probleem is om bij een klik op de flash banner de klikteller te updaten, werken Internet Explorer versies 6 en 7 niet mee. En aangezien het overgrote deel van de bezoekers langskomt met deze browsers en versies, MOET een en ander werken onder Internet Explorer 6+. Het probleem lijkt hem erin te zitten dat het flashfilmpje zich in de documentstructuur op de bovenste laag bevindt en derhalve het onclick event van het javascript onderschept. De banner voorzien van de wmode = transparent parameter (geopperd op de Adobe website) biedt evenmin uitkomst. Grrr. Op internet is weliswaar voldoende naslagwerk te vinden over het probleem van de layering van swf objecten in een htmlbestand, maar voor mijn specifieke situatie heb ik geen oplossing gevonden.

De oplossing
Ik kan slecht tegen mijn verlies. Dus heb ik net zolang lopen klooien totdat ik een workaround gevonden had. Toegegeven, ik betwijfel of mijn uiteindelijke fix voor het bovenstaande probleem de schoonheidsprijs verdient, maar hey … het werkt in elk geval wel. Oké, wat heb ik dan gedaan? Door te rommelen met absolute positionering en de z-index, en daarnaast vals te spelen met de in de flashbanner geprogrammeerde doorklik naar de Company of Kids website (lees: de doorklik wordt gedaan door het javascript in plaats van de flash banner) is het gelukt om een tracking van het aantal kliks op de banner te realiseren.

Ik heb een div gebruikt en daarin een absoluut gepositioneerde afbeelding (een transparante gif) geplaatst. Daaronder laad ik een nog een div in, waarin tenslotte de flashbanner zich bevindt. Aan de transparante gif heb ik een onclick event opgehangen, die zorgt voor (1) het verhogen van de teller en (2) het laden van de achterliggende website.

De code
1. html en javascript

<div id="container-banner-cok">
<img id="anker" src="/img/transparant-468x60.gif" />
<div id="flashbanner">
<script type="text/javascript">
// <![CDATA[
var fo = new FlashObject("pad naar flash bestand", "", "468", "60", "6", "#f0f0f0", true);
fo.addParam("wmode", "transparent");
fo.write("flashbanner");
var container = document.getElementById("container-banner-cok");
var anker = document.getElementById("anker");
anker.style.cursor = "pointer";
anker.onclick = function () { updateBannerClicks('cok022007'); window.open('url die geopende moet worden'); }
// ]]>
</script>
</div>
</div>

2. stijlblad dingen

#container-banner-cok { width: 468px; height: 60px; display: block; background: #fff; margin: 10px 10px 10px 20px; padding: 0; z-index: 100; text-align: left; }
#anker { position:absolute; display: block; border: none; z-index: 99; width: 468px; height: 60px; margin: 0; padding: 0; }
#flashbanner { position: absolute; display: block; width: 468px; height: 60px; z-index: 0; padding: 0; margin: 0; }

Oh ja, in het bovenstaande geval heb ik gebruik gemaakt van Geoff Sterns’ flash object voor het inladen van de Flash banner.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Flash · javascript
Getagged als banner, javascript