Proposing: Feature Spotlight
Posted by Michael Gaigg
Feature Spotlight
Let's say you want to highlight a feature on the map, e.g. a user has searched for a landmark, typically one would place a marker on the map and zoom to that location. The downside is that the user still needs to 'search' for the visual clue (the marker) on the map.
I think the missing link here is to 'black out' the whole map and only highlighting the area surrounding the landmark. This provides a natural focus on the feature and is a really elegant alternative I believe.
Optionally one could use the modal area to add a description or even photos (get creative for yourself). And yes, leave the marker also for browsers that don't support CSS3.
The code is as simple as could be, here is the CSS class called 'spotlight':
.spotlight { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; border: 0; pointer-events: none; /* this is the sweet spot */ background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to (rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0))); background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px); }
And here the HTML defining the spotlight container:
<span id="spot" class="spotlight"></span>
Implementation inspired by CSS3 Spotlight.
Amazing: National Geographic World Map by Esri
Posted by Michael Gaigg
Yes, I'd rather be skiing in the Austrian Alps as well... 
Amazing map!!
This map is designed to be used as a general reference map for informational and educational purposes as well as a basemap by GIS professionals and other users for creating web maps and web mapping applications.
The map was developed by National Geographic and Esri and reflects the distinctive National Geographic cartographic style in a multi-scale reference map of the world. The map was authored using data from a variety of leading data providers, including DeLorme, NAVTEQ, UNEP-WCMC, NASA, ESA, USGS, and others.
Link to map contents on ArcGIS online: National Geographic World Map
Where to study HCI [Map App]
Posted by Michael Gaigg
I feel like back to school - in many ways. I can't believe how interesting my job can be, I learn new and fascinating things every day. The other day I spoke with Keita, who told me about her little project which I'd like to share here.
Keita created a map on ArcGIS.com that shows schools offering
- degrees in Human-Computer Interaction (HCI) or Human-Centered Computing (HCC)
- schools offering degrees with an HCI track/concentration
- schools offering HCI-related degrees
- UPA chapters
- SIGCHI chapters
The idea for the map came from the realization of how difficult it’s been to find HCI programs and UPA/SIGCHI chapters in SoCal. "So I wanted to create a visual and a resource for others. Majority of programs are East Coast. But I have no insights into why yet. And there are hardly any online programs.", says Keita.
Really cool, isn't it?
Welcoming Yiwei Ma to our UI Design Team
Posted by Michael Gaigg
This week Yiwei Ma (LinkedIn) joined our design team as a UI Engineer.
He earned his master from the University of Michigan specializing in Human Computer Interaction (HCI) and has a BS in Computer Science and a background in graphic design.
I'm very excited knowing that we can now further improve our ability to designing map interfaces. Welcome on board!
Start calling your Web Map “Map App”
Posted by Michael Gaigg
I design map applications for the web. I talk a lot about it but I just don't seem to find the right term for it. Should I call these applications "Web Map"? "Web Map Application"? "Mapping Application"? "Map Application"?
I decided to let my decision be driven by the people and what they are used to. Therefore I turned to Google Trends to match the terms against each other.
Mapping Application vs. Map Application
First I compared "Mapping Application vs. Map Application" (Figure 1). The shorter Map Application was the clear winner. The term mapping just doesn't seem to fly.
Figure 1: Mapping Application vs Map Application
Map Application vs Web Map
So I decided to match the winner (Map Application) with the common term Web Map (Figure 2). While Web Map is clearly the favorite it's also evident that the term itself is on the decline which made me think whether another term is actually on the raise.
Figure 2: Map Application vs Web Map
Map Application vs Map App
If Map Application cannot hold up, how about the short term "Map App"? As Figure 3 shows this expression has only been around since 2008 but it really seems to have taken off in Q2 of 2010 and has outranked the longer brother (Map Application) quite considerably ever since. I wonder how "Web App" would match against Web Map.
Figure 3: Map Application vs Map App
Map App vs Web Map
Now this comparison looks very similar to Figure 2 (Map Application vs Web Map) - just a little closer. We did expect that since Map App measured better than Map Application. The comparison (Figure 4) already hints us towards the term Map App, but let's zoom into the past 12 months to have a closer look.
Figure 4: Map App vs Web Map
Map App vs Web Map (past 12 months)
That's a really close call. It seems like the two lines in Figure 5 are converging. Is this good enough to call a winner?
Figure 5: Map App vs Web Map (past 12 months)
Map App vs Web Map (past 12 months, USA only)
By looking at the individual regions though, I saw that the USA - which is our main market - looks slightly different. Figure 6 shows that the term Map App is actually already more popular in the USA than across all countries and languages.
Figure 6: Map App vs Web Map (past 12 months, USA only)
Conclusion
At this point I think it's too close to call it a clear winner, but what we've learned is that
- it's safe to remove the term "web" from map
- the term "map" is better than "mapping"
- the trend leans toward Map App, so let's start calling your Web Map "Map App".
What do you think? How do you call your map apps?
Successful Map App = Frame the Question
Posted by Michael Gaigg
What makes a Map App successful?
It sounds so easy and obvious. It's the basic, the 101 of analysis, Input-Analysis-Output. Usually I skip over introductions of books and that's especially true when I know the subject matter like GIS, but for some reason I started reading "The Esri Guide to GIS Analysis, Volume 1" (by Andy Mitchell, Esri Press) and it struck me like lightning, this is exactly what we should be doing:
You start an analysis by figuring out what information you need. This is often in the form of a question. Where were most of the burglaries last month? How much forest in each watershed? Which parcels are within 500 feet of this liquor store? Being as specific as possible about the question you're trying to answer will help you decide how to approach the analysis, which method to use, and how to present the results.
Other factors that influence the analysis are how it will be used and who will use it. You might simply be exploring the data on your own to get a better understanding of how a place developed or how things behave; or you may need to present results to policy makers or the public for discussion, for scientific review, or in a courtroom setting. In the latter cases, your methods need to be more rigorous, and the results more focused.
Frame the Question
Framing the question correctly will tell you:
- The problem you are trying to solve
- The approach of the analysis you want to use
- Which methods to use
- How to present the results
Who & How
Other factors that influence the analysis are:
- Who will use it?
- How will they use it?
- How are the results being used?
Design Implications
All this will impact your design, on what you should focus and how to lay the elements out on the page. Consider:
- Get the user to the location they are interested quickly
- Create clear call to action that allows the user to get answers to his/her question
- Simplify the methods on how to do analysis
- Provide means to use or export the results
Typographic Map Posters [Link]
Posted by Michael Gaigg
Typographic Map
Have a look at these beautifully crafted maps by axismaps! Cartography at its best, true beauty. Great job, loving it!
"There was nothing automated about making these maps, unless you count copying and pasting. Everything was laid out manually, from tracing streets over an OpenStreetMap image, to nudging curved water text, to selectively erasing text to create a woven street pattern."
ArcGIS Silverlight App: World Bank Data Mapper
Posted by Michael Gaigg
World Bank Data Mapper
The World Bank Data Mapper is the latest mapping application published by the Esri Applications Prototype Lab (thanks Richie).
The app is built using Esri's ArcGIS API for Microsoft Silverlight and the recently published (free) web API of the World Bank that provides access to up to 50 years of economic, financial and health data.
Besides mastering some technical challenges (missing cross-domain access file, amount of web requests) the map viewer looks sharp and straight forward without the usual template-related overkill of functionality - great job visualizing all this economic data. Let's see which other - maybe analytical? - mapping tools will follow...
Oh, of course, have a look at the working app and download the full source if you are interested to see how the pros did it.
Templates for Building Map Applications with ArcGIS API for JavaScript
Posted by Michael Gaigg
Templates for ArcGIS API for JavaScript
Creating web mapping applications has never been easier.
Esri offers a multitude of API's, from Silverlight to Flex and JavaScript.
Without discussing the design approach for your particular user-specific needs, I want to point to some great template resources that can serve as a starting point for customizing your app. The templates are based on ArcGIS Explorer Online viewer.
Follow this really nice tutorial on how to access the template gallery to get started.
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...
