Celar – frontend ontwikkelaar

Google heeft een alternatieve compressie ontwikkeld die beter zou zijn dan JPEG compressie. Het alternatief genaamd ‘WebP’ (spreek je uit als weppy) is een methode voor het ‘lossy’ comprimeren van afbeeldingen. Dit betekend dat het niet een afbeelding perfect nabootst maar dat het zoveel mogelijk bij het origineel probeert te blijven wanneer deze bekeken wordt door mensen. De mate van compressie is net als bij JPEG in te stellen om zo een optimaal resultaat te krijgen tussen bestandsgrootte en beeld kwaliteit. WebP zou gemiddeld 39% meer comprimeren dan JPEG of JPEG 2000 zonder verlies van beeldkwaliteit.

Er zijn op het moment van schrijven nog geen browsers die WebP afbeeldingen kunnen tonen. Google lanceert de methode met oog op de toekomst.

Een vergelijking, bron WebP gallery
Bovenste foto: JPEG (1093968 bytes)
Onderste foto: WEBP (368168 bytes, reductie van 66.35%)

Wie is overgestapt naar Google Maps v3 heeft misschien al deze bug opgemerkt. Hij komt alleen voor wanneer er op een Apple met de Safari 4 browser naar een Google Maps applicatie gesurfd wordt. Zit er in deze applicatie een infowindow met Iframe als inhoud, dan blijft de inhoud van deze iframe vast staan en wordt gemaskerd wanneer je de kaart versleept.

Zelf heb ik nog geen oplossing gevonden voor deze bug.

Lees verder »

Deze week is de door ons (Siyou) ontwikkelde Google Maps applicatie live gegaan. De applicatie laat evenementen in de provincie Utrecht zien op een kaart. Bezoekers kunnen hier ook zelf evenementen plaatsen.

Deze applicatie is in opdracht van Youngworks gemaakt.
Lees hier meer over dit project.

In opdracht van Youngworks hebben we bij Siyou gewerkt aan een interactieve Google Maps applicatie voor de Provincie Utrecht.
Op deze kaart komen alle Utrechtse landschappen te staan. Middels een legenda navigatie kunnen de bezoekers zogenaamde ‘pointers’ op de kaart oproepen. De pointers zijn gekoppeld aan een specifieke locatie op de kaart. Na het klikken op een pointer komt er meer informatie over de (mini)events van de campagne en de langschappen. Hier kan dan op gereageerd worden en gestemd. Per event zie je een plaatje of een video.

De bezoeker wordt actief betrokken bij deze campagne door ze de mogelijkheid te bieden zelf evenementen toe te voegen.

Techniek

Google Maps
Google Maps biedt 2 API’s. Google V2 & Google V3. V3 is, zoals je al vermoed, op het moment van schrijven de meest recente API. Hierin zitten multi-touch functionaliteiten en deze is voor zowel mobiel- als desktop gebruik.

Gekozen is voor V3 aangezien V2 niet meer ondersteund wordt door Google. Ook biedt versie 3 meer mogelijkheden voor het aanpassen van de vormgeving. Dit was voor dit project belangrijk aangezien er niet gebruikt gemaakt werd van de standaard info ballonnen.

Groeperen
Een extra toevoeging is gedaan op de pointers. Deze groeperen zodra ze elkaar overlappen. Er wordt onderscheidt gemaakt tussen pointers per groep. Hierdoor kun je per groep een cluster icoontje instellen die te zien is zodra er meerderen pointers van die groep elkaar overlappen. Door in en/of uit te zoomen worden de gegroepeerde pointers zichtbaar.

Laden wat er te zien is
In de applicatie worden alleen de pointers geladen die zichtbaar zijn. Hierdoor wordt er niet ingeleverd op prestaties. Hoe meer je uitzoomd hoe meer pointers er dus in beeld kunnen komen. Deze worden echter vervolgens weer gegroepeerd om de snelheid erin te houden.

JQuery
De legenda uitklap menu’s zijn opgebouwd en geanimeerd met JQuery. Dit Javascript raamwerk zorgt voor een juiste afhandeling in de verschillende browsers.

Eindelijk, nouja eigenlijk al een week, is er een API voor Flash van Google Maps. Er was al een API voor JavaScript en daar is nu deze bij gekomen. De Flash API zorgt voor een soepele beweging van de kaart en fade plaatsnamen in.