Welcome to Methods 3, Lecture 9

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Methods 3

Sana source 
#layer {
  marker-width: 9;
  marker-fill: #004cff;
  marker-fill-opacity: 0.9;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
  [zoom < 14] {marker-width: 0;}
  [description = 'zoom-out'] {marker-fill: white; }
  [description = 'zoom-out'][zoom < 14] {marker-width:9; }
  [description = 'zoom-out'][zoom > 13] {marker-width:0; }
}
Matt source 
#layer['mapnik::geometry_type'=1] {
  marker-width: 7;
  marker-fill: #EE4D5A;
  marker-fill-opacity: 0.9;
  marker-line-color: #FFFFFF;
  marker-line-width: 1;
  marker-line-opacity: 0;
  marker-type: ellipse;
  marker-allow-overlap: true; 
  [zoom<=13]{marker-width:2}
  [zoom>=14]{marker-width:4}
  [vehicle_ty='Bike'] {marker-width:8}
  [vehicle_ty='Bike'] {marker-fill:#22ac00}
}

#layer {
  polygon-fill: #826DBA;
  polygon-opacity: 1;
  [zoom>15] {polygon-opacity:.2}
}
#layer::outline {
  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

#layer {
    marker-fill: #ff307a;
    marker-line-color: #FFF;
    marker-line-width: 0.25;
    marker-line-opacity: 0.4;
    marker-width: 2;
    marker-allow-overlap: true;
}
#layer {
    marker-width: 3;
    ...
    [zoom >= 10] {
        marker-width: 8;
    }
    [zoom >= 16] {
        marker-width: 15;
    }
}

more ways to get data

source

Getting data from OpenStreetMap

source

a free map of the world

source

kinda like a giant shapefile of the world

source
source

if you need a whole city

source

if you only need a certain feature type

not sure what to search for?

go to openstreetmap.org

find something you would like to get data for

right-click on it

use the tags you find

collecting your own data

Demonstrators Smash Google Bus Piñata in San Francisco
source
source
source
source

"We enlisted people to go to stops, measure traffic and count people getting off and on and we hired bike messengers to see where the buses went..."

source
source

"... The cyclists used Field Papers to transcribe the various routes and what they found out, which we recompiled back into a database of trips, stops, companies and frequency."

source
source
source
source
source
  1. download GeoTIFF
  2. open in QGIS
  3. create new shapefile and trace

want to collect data directly on a phone?

source

costs $$ but can likely get a student deal

source

maps.me

source
source
source

basically QGIS on an android device

source

you can load a QGIS project and create/edit data in it

source

using SVG icons with Carto

nounproject.com

find or make an SVG

nounproject.com

customizing legends and popups

HTML

HTML gives content and structure to web pages

<p>
    <a href="http://data.cityofnewyork.us">source</a>
</p>
<p>some text on a web page</p>
<p>
<p>

the paragraph opening tag 

<p>

the paragraph opening tag

opening tags always start with 

<
<p>

the paragraph opening tag

opening tags always start with 

<

and end with

>
</p>

the paragraph closing tag

</p>

the paragraph closing tag

closing tags always start with

</

and end with

>
<p>some text on a web page</p>
<a href="http://data.cityofnewyork.us">source</a>

HTML in Carto

you can add HTML and style it with CSS before and after Carto legends

in popups, {{}} around a field name will be replaced by the value of that field for the feature you clicked

{{neighbourhood}}, {{neighbourhood_group}}
{{neighbourhood}}, {{neighbourhood_group}}

becomes

SoHo, Manhattan

you can use this to add links within Carto maps

<p>
    <a href="http://data.cityofnewyork.us">source</a>
</p>

and in popups those links can change based on the clicked feature

<p>
    <a href="{{url}}">learn more</a>
</p>
<p>
    <a href="{{url}}">learn more</a>
</p>

(if there is a field called url)

in-class exercise, part 1

CSS

CSS

makes things look nice

<p>
    some text on a web page
</p>
<p style="font-size: 20px;">
    some text on a web page
</p>
source

similar to CartoCSS but just for webpages

source 
<div class="CDB-infowindow">
<div class="CDB-infowindow" style="color: green;">

add style="" in an opening tag

in-class exercise, part 2

you can add images with HTML

<img src="http://i.ytimg.com/cat.jpg" />

if you want to learn a more about HTML and CSS, there are many free resources

codecademy
learn.shayhowe.com/html-css

if you take Advanced GIS we'll get into much more depth

Advanced GIS