Progressive overview #map
Flickr has a very slick way of showing the geolocation of a photo (thanks to Nicholas Furness for sending me this finding!). As you move your mouse towards the center of the map on the right panel of a photo page, the map zooms in a couple of times.
http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&clat=58.276828&clon=13.602856&zoom=4&imh=100&imw=300&mflags=YKM
http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&v=2&clat=58.276828&clon=13.602856&lat=58.276828&lon=13.602856&zoom=7&z=7&imh=100&imw=300&h=100&w=300&mflags=YKM&year=2011
http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&v=2&clat=58.276828&clon=13.602856&lat=58.276828&lon=13.602856&zoom=14&z=14&imh=100&imw=300&h=100&w=300&mflags=YKM&year=2011
A quick re-engineering showed me that the HTML structure is really basic, a container holding a link, the 3 images (see above images) generated by REST calls at different fixed zoom levels (highlighted in bold above), the location marker (dot), and the copyright statement. JavaScript triggers the hover effect, now that is really slick and innovative - Bravo!
<div id="photo-story-map"> <a data-ywa-name="Location, Taken in, Map" class="photo-story-geopanel-trigger ywa-track" onclick="return F.actionQueue.queue_click(this.id);" id="photoGeolocation-smallmap" href=""> <img width="300" height="100" alt="" src="http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&clat=58.276828&clon=13.602856&zoom=4&imh=100&imw=300&mflags=YKM" id="photo-story-map-zoom-out" style="opacity: 1;"> <img width="300" height="100" alt="" src="http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&v=2&clat=58.276828&clon=13.602856&lat=58.276828&lon=13.602856&zoom=7&z=7&imh=100&imw=300&h=100&w=300&mflags=YKM&year=2011" class="defer" id="photo-story-map-zoom-in" style="opacity: 0;"> <img width="300" height="100" alt="" src="http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&v=2&clat=58.276828&clon=13.602856&lat=58.276828&lon=13.602856&zoom=14&z=14&imh=100&imw=300&h=100&w=300&mflags=YKM&year=2011" class="defer" id="photo-story-map-zoom-street" style="opacity: 0;"> <div id="photo-story-image-dot" class=""></div> <canvas id="photo-story-dot" width="16" height="16"></canvas><canvas id="photo-story-copyright" width="300" height="100"></canvas> </a> </div>
Real Name?
I dubbed this feature "Progressive overview map". If anybody knows the real name, please let me know, this is a cool feature!
Similar Posts:
Enjoy this article?
About Michael Gaigg
Michael Gaigg is a User Interface Expert at Esri. He is the team lead of the UI Engineering group in Professional Services and has been designing map applications for over 8 years.About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (10)
- Conclusions (4)
- Design Guidelines (12)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (20)
- Here and there (23)
- Map Applications (9)
- This Week's Highlights (53)
- Usability & UCD (23)
- Web Design (23)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
Latest tweets
- Esri's main auditorium by richie http://t.co/4xhaiklf #esri 1 day ago
- Mapping Stereotypes: Europe according to Americans - http://t.co/E8VKHrq6 #map #europe #americans #stereotype 1 week ago
- Amazing Paintings with inlaid Maps http://t.co/ZZUKS836 #maps #mapart #art #painting 2 weeks ago
- @wodi79 lecker!!! in reply to wodi79 3 weeks ago
- amazing story #map of the Titanic Centennial http://t.co/t4reGvzb #esri 2012-04-13
- More updates...
Posting tweet...
August 11th, 2011 - 10:58
Weeeee, what a quick and easy sluotion.