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

#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;
    }
}
Grace source
Kevin source
Kevin
source
source
source
source
source
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.com/tracks/web
learn.shayhowe.com/html-css

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

Urban Reviewer

urban reviewer

Edgemere Urban Renewal Park

596 Acres

call Parks and say "where's our park?"

Edgemere Urban Renewal Park

Fitzgerald

today

Nathan Kensinger

today

NYC EDC

today

Performing Arts Educators

today

Panoramio

let's map them!

we weren't the first to have this idea

Community Development Program Progress Report (1968)

Atlas of Urban Renewal (1984)

FOIL

FOILed!

thanks, volunteers!

urban reviewer
source
source