Basics of Online Maps

James Seppi

August 4, 2015

Basics of Online Maps

Presentation by James Seppi

Software Developer at TNRIS, part of TWDB

Twitter: hydrologee

Viewable at jseppi.github.io/intro-to-web-maps/

Source code at github.com/jseppi/intro-to-web-maps/

What is an Online Map?

What is an Online Map?

What is a Web Map?

What is a Web Map?

A cartographic map on a web page

Can move around (pan) and zoom in and out

What is a Web Map?

Like Google Maps

And also maps from Bing, MapQuest, ESRI, Mapbox, Stamen, CartoDB, etc.

What is a Web Map?

Typically streets or satellite imagery

Bing Satellite

Bing Satellite

What is a Web Map?

Sometimes with a simplified basemap and additional data overlaid

apps.texastribune.org/reservoirs/

apps.texastribune.org/reservoirs/

What is a Web Map?

Found everywhere these days:

News sites, food review sites, travel booking sites, data explorers, etc.

Why do we care?

Maps are a valuable tool for communication

Power in communication

Maps show borders, areas of conquest, impacts of policies, natural phenomenon, etc.

Source

Why do we care?

By understanding maps and cartography, we have the power to see biases and think critically

How to Lie with Maps by Mark Monmonier

How to Lie with Maps by Mark Monmonier

Some History

MapQuest in 1996

Driving directions, on the Internet, printable

WHOA!

Mapquest 1996: Source

But it was a little slow

(though so was everything online back then)

Required a full page refresh to pan or zoom

Tiny Turtle: CC BY-NC-ND, Source

Some History

9 years later, in early 2005

Google Maps!

Fluid, continuous panning and zooming

Tile Technology

Alhambra Tiles 7: CC BY, Source

Tile Technology

NER Tile Map segment Beverley: CC BY-NC-ND, Source

Tile Technology

Tiles are 256 x 256 pixel images

When positioned next to each other, they look like one big image

Tile Technology

Tiles are rendered at different zoom levels to show different levels of detail

More detail -> More tiles

The number of tiles increases exponentially at each zoom level

Typically the zoom levels are 0 through 19

Tile Technology

Zoom level 0: The entire planet in a single tile

Zoom level 1: The entire planet in 4 tiles

Zoom level 2: 16 tiles

...

Zoom level 13: 67,108,864 tiles

...

Zoom level 19: 4^19 tiles

Tile Technology

Zoom level 0

Zoom level 0

Tile Technology

Zoom level 1

Zoom level 1

Tile Technology

Zoom level 13, Row 1871, Column 3372

Zoom level 13, Row 1871, Column 3372

Overlaying Data

Tiles generally are just for the background or basemap

Use vectors to overlay points, lines, and polygons

Maps with overlaid data are often called thematic maps

Making Your Own Web Map

Google Maps API

Bing Maps API

ESRI JavaScript API

OpenLayers

Leaflet (Personal Favorite)

But those all require programming

CartoDB

CartoDB is an online service for geospatial data visualizations

Or as most people call them, "maps"

Built on Open Source technology like PostGIS and PostgreSQL

CartoDB

Easily import data from a variety of formats (spreadsheets, Shapefiles, KML)

Visualize the data in a web map with presets or customized options

Perform simple or complex analyses

Free for up 50 MB of (converted) data

CartoDB

Sign up at cartodb.com/signup for today's exercises

Exercise 1 - Simple Points

Natural Earth Data - naturalearthdata.com

This is a great resource for general cartographic data, and it's public domain!

Exercise 1 - Simple Points

  1. Download Natural Earth Data Populated Places Simple Shapefile: goo.gl/QtJiCn

  2. Open cartodb.com and sign-in

  3. Drag the downloaded .zip file into your CartoDB Dashboard

  4. Explore the Data View, note the different columns

  5. Explore the Map View, experiment with the Wizards. Try making a Bubble Map.

  6. Click Visualize, then click Publish. Now you have a shareable link!

Exercise 2 - Polygons

  1. Download Map Academy's Counties Shapefile: acdmy.org/d/counties.zip

  2. Drag the downloaded .zip file into your CartoDB Dashboard

  3. Use the Wizard to make a Choropleth Map based on population. Hint: Use pop_sqkm

  4. Visualize and Publish your map once again.

Exercise 3 - Explore Earthquakes Data

  1. Download All Earthquakes for the Last 30 Days from USGS: goo.gl/hhoAyK

  2. Import the .csv into your CartoDB account (drag and drop)

  3. Experiment with the Wizard tab. Try Heat Map, Intensity, Density, maybe even Torque.

Exercise 4

If time, try finding your own data or using the CartoDB Data Library

Or check out the CartoDB Map Academy: academy.cartodb.com

Local Geo Groups

Austin Open Source GIS User Group

meetup.com/atx-osg

meetup.com/MaptimeATX

Credits