Welcome to Advanced GIS, Lecture 4

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

→ to move forward

← to go back

Advanced GIS

Class 4

source
source
source
source
source
Sarah
Majid
Gulsum

Carto uses a system called PostGIS

this lets you do more GIS-like things with SQL

SELECT *, ST_area(the_geom)
FROM boundary
source 
SELECT *,
  ST_area(the_geom::geography)
FROM boundary
SELECT *,
  ST_area(the_geom::geography)
FROM boundary

calculate area in square meters

SELECT *,
  ST_area(ST_transform(the_geom, 2263))
FROM boundary
SELECT *,
  ST_area(ST_transform(the_geom, 2263))
FROM boundary

(reproject to EPSG:2263, then calculate the area)

SELECT *
FROM dams
WHERE ST_DWithin(
  the_geom::geography,
  cdb_latlng(40.735, -73.994)::geography,
  100000
)
SELECT *
FROM dams
WHERE ST_DWithin(
  the_geom::geography,
  cdb_latlng(40.735, -73.994)::geography,
  100000
)

select features within 100 kilometers

SELECT cartodb_id,
  ST_Transform(the_geom, 3573)
    AS the_geom_webmercator
FROM my_table
Urban Reviewer

HTML

defines the structure and content of a page, loads other bits

HTML

HTML does not make nice-looking web pages on its own

CSS will help us with that (next week!)

CSS

adds style to parts of a page

CSS

JavaScript

makes web pages dynamic (eg AJAX)

JavaScript

JavaScript

JavaScript

your browser loads the HTML, which tells it which CSS and JavaScript files to get (if any)

if you want something to be online, it has to be on a server somewhere

(it needs a URL that starts with http or https)

neocities.org

pages.github.com

glitch

uploading images

in-class exercise, part 1

HTML

HyperText Markup Language

HTML

HyperText Markup Language

(text with links)

vox
Stanford

Tim Berners-Lee

The original RFC (standard) for HTML

twitter

Mosaic, initially released in 1993

Mosaic

HTML defines the content of web pages

HTML tells the browser what to put on the page

HTML isn't going to help you make things look nice

HTML isn't going to help you make things look nice

(we'll talk about CSS soon)

every HTML page starts out the same way:

<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>
<!doctype html>
<html>
    <head>
    </head>
    <body>
        Content to show on the
        page goes here!
    </body>
</html>
<body>
<body>

the body opening tag 

<body>

the body opening tag

opening tags always start with

< 
<body>

the body opening tag

opening tags always start with

<

and end with

> 
</body>

the body closing tag

</body>

the body closing tag

closing tags always start with

</

and end with

> 
<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

let's make an html file

in-class exercise, part 2

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>
<p>
    Text goes <em>here</em>
</p>
<p>
    Text goes <strong>here</strong>
</p>
<a>
    This should be a link
</a>
<a href="http://example.com/awesome/page">
    This should be a link
</a>
<img src="" />

in-class exercise, part 3

<iframe width="100%" height="520" frameborder="0"
src="https://thenewschool.carto.com/u/brelsfoeagain/
builder/fd0fea4a-ee46-11e6-8c31-0ecd1babdde5/embed"
allowfullscreen webkitallowfullscreen mozallowfullscreen
oallowfullscreen msallowfullscreen></iframe>

iframe

iframe

lets you embed other pages in your page

let's add a Carto map to our html file

in-class exercise, part 4

Looking at other people's pages

view source

developer tools

<ul>
    <li>eggs</li>
    <li>milk</li>
    <li>bread</li>
</ul>
<ul>
    <li>eggs</li>
    <li>milk</li>
    <li>bread</li>
</ul>
<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
  1. one
  2. two
  3. three
<div>
</div>
<div class="sidebar">
</div>
<div class="sidebar">
    text
    search
</div>
<span></span>
<input />
<input type="text" />
<input type="checkbox" />
yes
no
maybe 
<input type="radio" />
yes
no
maybe
html
head
body
p
br
a
img
em
strong
ul
ol
li
div
span
input

HTML reference on the class page

HTML in Carto

you can add HTML 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 5

some notes on terminology

elements

element:

an opening tag, closing tag, and all the things inside it

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

"a p element"

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

"a body element"

elements go inside other elements

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

"the p element is in the body element"

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

"the p element is also in the html element"

indent elements one more step than the elements they are inside

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

everything in the html element is indented once

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

everything in the body element is indented again

make sure you move an entire element

move this

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

don't move this

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p>
            Text goes here
        </p>
    </body>
</html>

this is going to take some effort

don't memorize this stuff

copy paste is recommended

copy paste (with your customizations) is recommended

learn more here

codecademy.com/learn/learn-html

and here

learn.shayhowe.com/html-css

use, but with caution

recommended

developer.mozilla.org

recommended

css-tricks.com

HTML does not make nice-looking web pages on its own

CSS will help us with that (next week!)

please do focus on getting a grasp on HTML this week and next time we'll get to CSS