Tuesday, December 7, 2010

OpenLayers map + markers + cool info box

I made a little project for my father (in return he pays for my piano lessons).
My father is one of the managers of the folk dance society in Israel. They have a website, where all dancing clubs are listed, including relevant information such as place, time, price, type of music, ...
He wanted a map where someone could see all dancing places near his/her home.
Google Maps would have been a natural choice hadn't they forbidden access to their API specifically for Israel.
I found a great alternative: OpenLayes, which uses data from OpenStreetMap.
I'm all excited because I know nothing about JavaScript and CSS but eventually it worked!
Well, here it is:


Things to notice:
  • The info box is half transparent
  • It has round corners
  • When you click a place, the info box sticks, so you can follow the links