Intro to Web Mapping + GIS

Girl Develop It 26 Aug 2015

Created by Stuart Lynn / @stuart_lynn

Follow allong here : http://stuartlynn.github.io/GDIChicagoWorkshop/#/

Stuart Lynn

Map Scientist

Your guess is as good as mine

CartoDB

Maps are great!

Help us find places(bars)

Help us navigate to places(other bars)

Maps can also be beautiful

Points on a map

Choropleth

Directions of US rivers

Ages of buildings in Chicago

Even non-earth based maps

Where am I?

At the Girl Develop It meet up.

Where am I?

111 N. Canal St., Suite 455, Chicago, IL

Where am I?

41.883739, -87.639441

Where am I?

41° 53' 1.4604'' N, 87° 38' 21.9876'' W

Reads as 41 hours 53 minues 1.4 Seconds North, 87 degrees 28 minutes 21 seconds west

Components of web mapping

Maps in the age of the internet

Map Tiles

https://a.tiles.mapbox.com/v4/mapbox.streets/0/0/0.png

Map Tiles

Map Tiles - more info

Base maps

Vector data

Vector data

• Can be used to mark out regions
• Can be used to mark out points
• Provide interaction to your maps

Leaflet

Leaflet - starter kit

• Clone/download the starter kit
• Select a base map from http://leaflet-extras.github.io/leaflet-providers/preview/index.html
• Update the starting location to lat: 41.8814 long: -87.6337
• Update the base map on leaflet
• Add some vector data from here

Leaflet

• Data.js contains some vector data
• In index.hmtl include leaflet.js and leaflet.css.
• Also make sure to have a div with id='map'
• site.js lets you set the inital location and base layer

Open Layers

Can be more powerful but can also be more complicated

Google maps

Pretty straight forward but can be restrictive

Where to find data to map

Data formats - csv

Table of points with attributes

Data formats - csv

Table of points with attributes

Note about geocoders

Geocoders are peices of software that turn adresses in to locations

MapZen's pelias https://mapzen.com/pelias

MapBox geocoder https://www.mapbox.com/developers/api/geocoding/

Google has an excelent geocoder but it can be restrictive

Data formats - geojson

Data formats - kml

Used a lot by google maps

Usually contains vector data and sometimes image overlays

Data formats - shapefiles

Vector data format from ESRI

Usually a zip file containing multiple files with endings like .shp .shx .dbf .sbn

Sources of Data: Natural Earth

Sources of Data: Chicago public data portal

Sources of Data: Data.gov

Sources of Data: Fulcrum

Sources of Data: Epicollect

Sources of Data: Extract your location history from google

Mapping Platforms

Going to need this file: libraries.kml

Github

https://help.github.com/articles/mapping-geojson-files-on-github/

• Upload a geojson file as a gist Try this one
• Git hub will automatically create a map
• Use the embed link to get it on to your website

Map Box

• Go to https://www.mapbox.com
• Create an account
• Go to data
• Upload libraries.kml

CartoDB

• Going to make a map showing pothole reports in Chicago overlayed on bike tracks
• Pot Hole data
• Pot Hole data

CartoDB under the hood

We can use the editor on CartoDB to make most maps

Under the hood what CartoDB is doing is combining an SQL query to select data with some CartoCSS to style it

You can write these directly to create really powerful applications

Data

Query

SELECT * FROM buildings where shape_area > 100
	

Carto CSS

/** choropleth visualization */

#buildings{
polygon-fill: #91003F;
polygon-opacity: 0.8;
line-color: #FFF;
line-width: 0;
line-opacity: 1;
}
#buildings [ year_built <= 2013] {
polygon-fill: #F1EEF6;
}
#buildings [ year_built <= 1990] {
polygon-fill: #D4B9DA;
}
#buildings [ year_built <= 1967] {
polygon-fill: #C994C7;
}
#buildings [ year_built <= 1944] {
polygon-fill: #DF65B0;
}
#buildings [ year_built <= 1920] {
polygon-fill: #E7298A;
}
#buildings [ year_built <= 1897] {
polygon-fill: #CE1256;
}
#buildings [ year_built <= 1874] {
polygon-fill: #91003F;
}
	

Cartodb.js

Getting it on to your site

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<div id="map"></div>
<script>
window.onload = function() {
	cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json');
}
</script>

Interacting with other code

// create a layer with 1 sublayer
cartodb.createLayer(map, {
user_name: 'mycartodbuser',
type: 'cartodb',
sublayers: [{
	sql: "SELECT * FROM table_name",
	cartocss: '#table_name {marker-fill: #F0F0F0;}'
}]
})
.addTo(map) // add the layer to our map which already contains 1 sublayer
.done(function(layer) {

// create and add a new sublayer
layer.createSubLayer({
	sql: "SELECT * FROM table_name limit 200",
	cartocss: '#table_name {marker-fill: #F0F0F0;}'
});

// change the query for the first layer
layer.getSubLayer(0).setSQL("SELECT * FROM table_name limit 10");
});
				

Just the data

var sql = new cartodb.SQL({ user: 'cartodb_user' });
sql.execute("SELECT * FROM table_name WHERE id > {{id}}", { id: 3 })
.done(function(data) {
	console.log(data.rows);
})
.error(function(errors) {
	// errors contains a list of errors
	console.log("errors:" + errors);
})
				

gem 'cartodb-rb-client'
				

Stories

Odyssey.js

Other resources

• CartoDB Map Academy http://academy.cartodb.com/
• CartoDB APIS http://docs.cartodb.com/cartodb-platform.html
• Similar talk in NY here
• Local data sources here
• National data sources here