Mapping Events
Putting together some agenda items for american-architects.com earlier, I came across the redesigned web page for AIA / Los Angeles. The layered interface is impressive for keeping a map (a terrain one, from Google Maps) of Los Angeles in the background. But it is not just for show, the map highlights relevant events geographically and by type (lecture, exhibition, conference, etc.), jumping around to highlight certain events and make the visitor aware of the map's interactivity; a click on an event stabilizes the map. Some screen shots:
According to the designers, Use All Five:
According to the designers, Use All Five:
"We focused the new design on creating a navigation for the different types of AIA users (members, students, and people who want general information), and also put a large emphasis on the Los Angeles Architecture culture ... by building the site around mapping software, specifically the Google Map API ... [the] custom content management system ... allows the AIA Los Angeles committee to post events, articles, news, etc., as well as geocode these posts so they can be displayed accurately on the map."Checking the site on the iPad, the map interface has some kinks to work out. It only works in map view (link at top of page) and the finger/thumb-pinch-zoom on the iPad wreaks havoc on it; after a few minutes I was left with a patchwork of different maps in a square grid with no relation to each other, quite confusing. Nevertheless for PC browsing the redesign is exemplary.
Hey, thanks for the great write-up. My name is J.J. and I'm one of the designers here at Use All Five. Just so you know, we've got a big update we're pushing next week with a lot of updates and fixes. Thanks again for the shout out.
ReplyDeleteThis site is real cool. A perfect concept for an firm's website. One that shows you locations where each project is located. Wonder how the map was imbedded as the background. Care to share jjaye? Big ups on the originality.
ReplyDelete@andrew, thanks for the really positive feedback. I'll try to answer your question, but it might get technical...
ReplyDeleteThe map sits in a top-level div element that's been absolutely positioned with height/width 100%. There's an onResize event attached to the window that resizes the map if a user resizes their browser.
As far as the overlay, the content container is absolutely positioned as well to 0, 0 with a z-index of 500 (?) so that it is always on top of the map.
Then to get the whole thing to play nice we use GMap 3 to convert lat/long to pixel data so that the HTML elements line up with the markers rendered on the map.
Hope that helps, I might just expand this to a blog post on the UA5 site...
J.J. - If you do such a post please put a link here. I'd be interested in seeing it...even though most of the above is way over my head!
ReplyDelete