OSM portion of this presentation borrows from OSM 101.
BREAK
Apart from the OSM project itself, why is OSM so crucial to web mapping?
Because getting data is hard.
But OSM makes it easy!You will often find yourself in need of data for a project and unable to find a comprehensive dataset. This is where OSM comes in. If OSM doesn't have the data you're looking for, you can add it yourself, then pull the newly-created data into your project from OSM. No database required and you've given back to the community!
You can download the whole planet from OpenStreetMap for free!
You can take things much further with JavaScript libraries like Leaflet, D3, and many others.
LET MESTOP YOU RIGHTTHERE!
It's cartography time!
In print or on the web, maps are information design.
Cartographers have been thinking about how to do that effectively in print for hundreds of years.
Too often in web mapping, design decisions are constrained by the tools available.
"Cartographers limit themselves – because of a lack of software skills or a client’s desired final product – to using pre-fabricated tools for Web map design (e.g., Google Maps, Esri’s ArcGIS Online). By the time data-organization and design decisions are considered, the potential efficacy of the map’s communication is already grossly constrained by the limitations of the tool chosen." - Ian Muehlenhaus in Going Viral: The Look of Online Persuasive Maps
Developers and mappers don't always speak the same language, which leads to poor information design decisions.
We're gonna change all that. Starting next time, we will talk more about magical languages of web mapping introduced earlier.
(Don't be intimidated!)
For the rest of today: some vocabulary and key concepts in mapping to help us think more critically about web maps.
There are several types of maps, but we can mostly break them down into two categories:
Thematic maps
and Reference maps.
"Thematic maps are data maps of a specific subject or for a specific purpose. Statistical thematic maps include a variety of different map types such as choropleth or shaded maps, dot maps, proportional symbol maps, and isarithmic maps." - U.S. Census Bureau
Some examples:
"A reference map is a map that emphasizes the geographic location of features. ... For these maps, the goal is to display a lot of different kinds of information without drawing the reader's attention to any one theme of information more than any other theme." - Esri Mapping Center
Why might you use a reference map?
Wayfinding
Transit
Navigation
Topographic
All of these map classes are well described in print cartography, but they have corollaries in web cartography as well.
Historically, web mapping has evolved without much cartographic theory.
The term "heatmap" is imprecise. Isopleth? Point density? Interpolation?
On the web it usually means kernel density and usually just shows population density.
Where the points are sparse or coincident, kernel density generates a meaningless blur:
Common JavaScript libraries that generate "heat maps" dynamically use zoom level as a proxy for kernel size, which makes no sense analytically.
The default color scheme is horrid. (Nicknames: "Tacky Angry Rainbow" and "Angry Fruit Salad".)
Tacky Angry Rainbow
Angry Fruit Salad
They arise from demand from people who don't know what they are doing, but know they want to show a lot of points on a map.
Alternative: clustering.
Entirely different (although they look similar): dot density maps.
Someone clever putting a lot of points on maps quite artfully: Eric Fischer.
We should still strive for sound cartography in mashups.
A few high level concepts from cartography, which is a visual enterprise:
Don't worry if you don't catch all of this right away. We're glossing over topics that people dedicate entire careers to. There are links along the way for you to explore later if you want more!
1. Visual variablesThe differences in map elements as perceived by the human eye. There are 7 classical categories of visual variables: position, size, shape, value, color, orientation, and texture.
A French cartographer named Jacques Bertin identified seven main categories of visual variables: position, size, shape, value, color, orientation, and texture.
2. Visual hierarchyVisual hierarchy is the order in which the human eye (brain) perceives what it sees. As cartographyers, this helps us prioritize information and help guide our viewers and users through the information we've designed. How is this concept different from visual variables?
3. Visual argumentUse visual elements to map relationships between map elements from one image, the base, to another image(s), the target. https://books.google.com/books?id=29uSBQAAQBAJ&pg=PA54&lpg=PA54&dq=cartography+%22visual+argument%22&source=bl&ots=u0-7yaF8aJ&sig=WncXbrfxVAjFmuxQnFDGCy-2b7I&hl=en&sa=X&ved=0ahUKEwjyhvLCptfKAhULw2MKHYLtByIQ6AEIIjAB#v=onepage&q=cartography%20%22visual%20argument%22&f=false. Not a single transfer of features or properties, but a mapping of a whole web of relations between nodes. Also visual analogy.
An important concept for web cartography is "screen real-estate".
Space is scarce
Mobile vs. desktop
Fluid vs. compartmentalized layout
Panning and zooming, which we will talk more about next time, are a way around all of this but.... for some maps it is overkill & potentially a cop-out.
The main thing the web brings to cartography is interactivity, which can take many forms.
In web design and development, people make entire careers out of designing for interactivity.
The field is called UI/UX, which is shorthand for user interface and user experience.
It means you think through how people who visit your site will interact with it, and you design the interface to guide the user toward the experience you want them to have.
UI/UX is a really important component in web mapping.
(Project managers creating government web portals for geospatial data, I am talking to you.)
For this reason, while it makes sense in print cartography to talk about map readers, in web cartography we talk about map users.
Next time we will explore some forms of interactivity that are standard in out-of-the-box tools.
Panning & Zooming
Info Boxes
Tooltips
Highlighting
Charts
Embedded images/video
Geocode box
"Zoom to my location" button
Animation
All these whizz-bangs are neato!
But we must use them sparingly, wisely, and with purpose.
So, you have some homework. But it's fun homework.
FIRST: Find a cool web map online and bring the link with you next week.
Think about what type of web map it is and why you think it's a cool web map.
Also think about how it could be better.
THEN: Send me an email (dswick@ccsfgis.org) and tell me what you want to learn in the next few weeks.
