Voor de uitwerking van een immo-site (http://www.buyens.be) kregen we de vraag om een functionaliteit te voorzien waarin bezoekers de mogelijkheid hebben om te zoeken naar panden op een landkaart. Na een verkenningsronde kwamen we uit bij 2 scripts. Enerzijds vonden we het ImageMapster jQuery script (http://www.outsharked.com/imagemapster) voor de feitelijke visualisatie van het landkaartje. Anders zagen we potentieel in het autocomplete script van James Smith (http://www.loopj.com/jquery-tokeninput) om de zoekopdracht duidelijk te visualiseren.

ImageMapster is een jQuery plugin die HTML-image maps net dat tikkeltje extra geeft. Via dit script kan elke imagemap worden belicht, geselecteerd en gemanipuleerd worden op allerlei manieren. ImageMapster is 100% Javascript en het werkt op elke grote(re) browser, zonder Flash of andere afhankelijkheden (met uitzondering van jQuery), inclusief Internet Explorer 6.

Via het script is het mogelijk om gemeentes met beschikbare panden aanklikbaar te maken (of beter: gemeentes zonder panden niét aanklikbaar). Deze worden in het script ingelezen via een met id's gevulde array. Bezoekers zien in één oogopslag in welke gemeentes panden beschikbaar zijn, en kunnen zo meteen op een visuele manier hun keuze bepalen. Uiteraard verandert het aanbod aan panden dagelijks, en daarom ontwikkelden we een web service die dagelijks een lijst genereert met de beschikbare gemeentes. Deze file wordt dan ingelezen in de jQuery module, om te resulteren in een bijna realtime overzicht.

Aangezien veel bezoekers niet specifiek in 1 gemeente zoeken, zochten we naar een script dat de geselecteerde gemeenten op een duidelijke manier kon weergeven. Hiervoor leek het autocomplete script een goede optie.

Als finale hindernis combineerden we alle scripts en lieten we via jQuery een interactie tot stand komen tussen deze scripts. Aangeklikte gemeentes op het kaartje worden nu ook weergegeven in het zoekformulier.

Bekijk het resultaat op http://www.buyens.be

Wat is uw visie? Laat het zeker weten in de comments. Of heeft u nood aan een gelijkaardige integratie in uw website, neem dan zeker contact met ons op!