Om weer eens wat anders te zien dan de standaard rechthoekige of vierkante Google Maps, hierbij een voorbeeld van een driehoek. De basis Google Maps is uiteraard gewoon vierkant en om het effect van een driehoek te krijgen worden er vlakken over het kaartje heen gelegd zodat dit niet meer te zien is. Op deze manier wordt een deel gemaskeerd en blijft alleen de driehoek over.
Om dit te bereiken kun je eenvoudig een plaatje dat half transparant is, over de kaart leggen waardoor de driehoek over blijft. Echter het probleem is dan dat het transparante deel van het plaatje ook over de kaart valt, waardoor deze niet meer te slepen of aan te klikken is. Om dit op te lossen is er hier voor gekozen om een lijn van 1 pixel over het plaatje te leggen (vanaf de linker bovenhoek) die telkens 1 pixel korter wordt waardoor de driehoek gevormd wordt.
Hiermee kunnen verschillende vormen worden gemaakt, van eenvoudig tot geavanceerd. Een cirkel of andere vorm is al een stuk lastiger om in te bouwen, gezien je dan van tevoren moet berekenen hoe de vorm loopt en waar je de overlap moet laten plaatsvinden. Maar in theorie is alles mogelijk!
Het voorbeeld is te vinden op: http://www.hoppinger.com/playground/googlemaps/triangle/
Gaaf zeg!
Zeker met die precieze vorm (dankzij de 1px-lijn die telkens breder wordt) kun je ook goed slepen in de Google Maps!
Cool! Leuk zo het eerste item op de Playground, ik zet volgende week een item over Tagul erop.
Vet hoor! Maar wat een monikke werk zeg, pff…
@Toine Gelukkig kun je het plaatje automatisch met PHP en bv GDLib laten genereren
Die monniken kunnen dus rustig verder kalligraferen
@Eric: Gelukkig maar, kreeg al bijna medelijden met ze
Deze post werd opgemerkt op Google Maps Mania:
http://googlemapsmania.blogspot.com/2010/01/triangular-google-maps.html
World fame!