Web-Mapping Quickstart: Session 1

Design and cartography principles for the web
More on styling and interaction (html, CSS, Javascript, CartoCSS)
Tilemill

There are libraries and APIs and tutorials to help you translate these map types to the web.

... (but only a subset of these are easy with out-of-the box tools)

Historically web mapping has evolved without much cartographic theory...

... which led to an explosion in special thematic maps

... and also this question in the minds of many cartographers:

Are web maps and print maps homologous or analagous?

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 Js libraries that generate 'heatmaps' 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").

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.

Entirely different although it looks similar: dot density maps

Someone clever putting a lot of points on maps quite artfully: Eric Fischer

In general all of these examples follow certain slippy map and mashup paradigms, which we talked about last time.

D3 is a Javascript library built for data visualization.

...there are other mapping libraries out there that can handle different projections, distortions, and animations... plus whatever else you want to do.

We should still strive for sound cartography in mashups.

A few high level concepts from cartography, which is a visual enterprise:

An important concept for web cartography is "screen real-estate"

Space is scarce
Mobile vs. desktop
Fluid vs. compartmentalized layout

Slippy map is 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.

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.

In our first session, we saw some forms of interactivity that are standard in out of the box tools.

Let's play with a web map: In Chrome go to: leafletjs.com/examples/mobile.html

Click on Menu > Tools > View Source & copy/paste all the text you see into a text editor.

File > Save As > mobile.html
(remember where you save it!)

This tutorial uses a function from the Leaflet library to zoom to your approximate location.

To make it work, you probably need a web server running.

If you are on a mac or a Windows or Linux machine with Python installed and globally available, type:
python -m SimpleHTTPServer

Type "localhost:8000" into an new browser window & navigate to where you saved mobile.html

Can you figure out how to switch the basemap to the Stamen toner tiles we used last week?

CartoCSS is based on CSS. Some things to understand:

Just like with CSS, rules are applied in order. Later ones overwrite earlier ones.
There are #selectors which are like layers.
You can display your data as points or lines or text depending on what symbolizer you use.

Thanks everyone! See you on the interwebs: @mizmay....