web mashup slides for lesson 1

Web Mash Up Making maps with web tools

Lesson Outcome

At the end of this segment, you will have: 1.  Your own interactive map

2.  Containing real data

3.  And an understanding of how to

leverage the potential of web tools to produce maps

Some Cool Maps

Stamen Design: Water Color

Stamen Design: Toner

Stamen Design: Terrain

MapBox: Baltimore Dark, http://tiles.mapbox.com/mapbox

MapBox: DC Night Vision, http://tiles.mapbox.com/mapbox

MapBox: Control Room, http://tiles.mapbox.com/mapbox

Utilitarian Maps Maps with data

Stamen Design: Oakland Crime Spotting, http://oakland.crimespotting.org

Stamen Design: San Francisco Crime Spotting, http://sanfrancisco.crimespotting.org

New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer

New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer

Cambridge: Solar Tool, http://cambridgema.gov/solar/

MIT: Resource Intensity of Cities, http://urbmet.org

4sqmap: Foursquare Maps and Statistics

To Do This

I’ll introduce you to simple concepts in: 1.  GIS 2.  KML

3.  Data processing

Objectives

Learn to:

1.  Produce styled maps

2.  Append data to maps

3.  Include basic dynamic elements

4.  Make our maps freely accessible online

The Fun Part Styling Maps

Required components for this exercise:

1.  Google styled map wizard

2.  Google maps

3.  Basic javascript

The Fun Part Styling Maps

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

The Fun Part Styling Maps

Features 1.  Area of interest defined by Google

2.  You have control over what you want or do not want to show

3.  Dependent on the type of map you are building and the design goal it is meant to achieve

The Fun Part Styling Maps

Each feature has 2 elements •  Geometry

•  Shape •  Fill •  Stroke

•  Label •  Text

•  Fill •  Stroke

•  Icon

The Fun Part Styling Maps

Stylers •  Visibility

•  On •  Off •  Simplified

•  Colour •  RGB •  HSB •  Invert Lightness

The Fun Part Styling Maps

You may remember styling with CSS, this is similar except that it is structured in a different data format

.json Java Script Object Notation

JSON Data Structure [!

!{!! !“A” : [!! ! !{ “A1” : “value” },!! ! !{ “A2” : “value” },!! ! !{ “A3” : “value” },!! ! !{ “A4” : “value” },!! ! !{ “A5” : “value” }!! !]!!},{!! !“B” : “value”,!! !“C” : “value”,!! !“D” : [!! ! !{ “D1” : “value” }!! !] !!} ! !!

]!

JSON Data Structure [!

!{!! !“stylers” : [!! ! !{ “visibility” : “on” },!! ! !{ “hue” : “#ff0000” },!! ! !{ “saturation” : -100 },!! ! !{ “lightness” : 4 },!! ! !{ "gamma": 0.5 }!! !]!!},{!! !“featureType” : “road.highway”,!! !“elementType” : “labels.icon”,!! !“stylers” : [!! ! !{ “visibility” : “off” }!! !]!!} ! !!

]!

A

B

C

D

Another Way to Understand

A1

A2

A3

A4

A5

B

C

D1

Another Way to Understand

A1

A2

A3

A4

A5

B

C

D1

Another Way to Understand

The Fun Part Styling Maps

.json Style file •  Click show JSON

•  Copy and paste into empty document

•  Save document with .json extension

Data & GIS •  The marker is an indication of a location

on the map

•  Geographically, we understand this as a coordinate.

•  GIS is a way to work with data on digital maps.

Geographic Information System GIS

•  Is a broad term •  A system to work with geographic data •  In simplest form, GIS is the merger of:

– Cartography – Analysis – Database

GIS & Space

Projection & Coordinate System Google Maps: Mercator projection

– Latitude, Horizontal Grid, Rows – Longitude, Vertical Grid, Columns – Elevation, Depth, Z Axis

GIS & Space Reading a coordinate

– Latitude, Longitude •  50.8790° N, 4.7015° E •  Google Search It

– Machine Readable Format •  Float Values •  50.877613, 4.70438 •  Google Search It

Google Maps Street Address

Geo Coding

Finding geographic coordinates (in our case latitude and longitude) from other geographic data, (street addresses or Postal codes)

Google Maps & Data

Basic element of Google maps is the marker

Latitude ,Longitude

How to find Lat Lon?

Many websites offer geocoding services – http://www.findlatitudeandlongitude.com – http://itouchmap.com/latlong.html – http://stevemorse.org/jcal/latlon.php – http://www.gpsvisualizer.com/geocode

Slightly Technical

How to include your style file 1.  Embed Google maps in a .html

document

2.  Load your style file

3.  Bind your style with to the map

Slightly Technical

Embed Google maps

Device has no GPS sensor

Slightly Technical

Embed Google maps Where we will center the map

Slightly Technical

Embed Google maps

Define map options

Slightly Technical

Embed Google maps

Map zoom level

Slightly Technical

Embed Google maps

Set map center

Slightly Technical

Embed Google maps

Specify the type of map

Slightly Technical

Embed Google maps

Options •  TERRAIN •  ROADMAP •  SATELLITE •  HYBRID

Slightly Technical

Embed Google maps

Display the map within the html div tag name ‘map’ with the defined map options

Slightly Technical

Load your style file

URL of my file where the file lives in the computer

Slightly Technical

Load your style file

Load the style file into an object called styles using the defined options

Slightly Technical

Load your style file

Create a new map type with the name “styledMap”

Slightly Technical

Load your style file

Instead of specifying 1 map type, we can specify

several as an array

Slightly Technical

Load your style file

The 2nd map type in this case is our styled map

and its unique id is ‘map_style’

Slightly Technical

Load your style file Associate unique id ‘map_style’ with maptype ‘styledMap’

Let’s Make a Marker

How to add a marker 1.  Embed Google maps in a .html

document

2.  Define a location in coordinates

3.  Add the marker to the map

Let’s Make a Marker

Define a location in coordinates Create a new marker object

Let’s Make a Marker

Define a location in coordinates Set its position

Let’s Make a Marker

Add the marker

Tell it which map it should go to

Is it customizable?

How to change the look of your marker 1.  Embed Google maps in a .html document

2.  Add your marker

3.  Change the marker with a .png file (max res. 32 x 32 pixels)

Custom Marker

Load marker image

Get the marker image and define its anchor point

Custom Marker

Tell the marker to use your image

Simply add it to your marker options

Animate?

When someone clicks the marker…

Pan the map to the marker when it is clicked

Geo Tagging •  By making a geo tag, we are essentially

associating location specific information with other data.

•  In doing so, we create a connection between data and space.

Photo <Lat, Lon>

Text

Twitter Instagram Facebook Flickr

Let’s Geotag Some Data

Simple geotagging 1.  Embed Google maps in a .html

document 2.  Add the marker to the map

3.  Add html content

Let’s Geotag Some Data

Create an info window

Let’s Geotag Some Data

Specify its content

Include all content into a single html div

Let’s Geotag Some Data

When someone clicks the marker…

Send the content to the info window

Let’s Geotag Some Data

When someone clicks the marker…

Open the info window

Is it customizable?

How to change the look of your info window

1.  Embed Google maps in a .html document

2.  Add the marker to the map

3.  Add html content

4.  Style the content

Style the Info Window

We’ll need a plugin

Style the Info Window

Customizable CSS Don’t move the window because we are already moving it in the mouse event

Style the Info Window

Customizable CSS Standard 1:1 aspect ratio

Batch Processing

•  Manually populating a map is time consuming

•  Datasets may contain up to several million objects

•  We can speed up this process

Batch Processing Geo coding with Google spreadsheet

1.  Get a set of addresses 2.  Populate column B with addresses 3.  In cell A1, insert

•  http://maps.google.com/maps/geo?output=csv&q= 4.  In cell C1 insert

1.  =importData(CONCATENATE($A$1,B1)) 2.  Click & drag to iterate formula

Batch Processing So what’s the extra stuff?

1.  Column C = Query Response 2.  Column D = Zoom Level 3.  Create a new spreadsheet

•  Bottom Left Corner ‘ + ‘ Symbol 4.  Insert the following query into cell A1

•  =query(Sheet1!B:F,"select B,E,F”) 5.  Now the set is clean

Batch Processing Publically Accessible

1.  Select File 2.  Select Publish to the web 3.  Click Publish now 4.  Copy the generated URL 5.  For all subsequent changes to take effect,

you must republish this document

Let’s See It On The Map

Get the source URL

Let’s See It On The Map

Load the data

Let’s See It On The Map

Parse it Break data down into individual lines

Let’s See It On The Map

Parse it Break down into individual words using comma as a splitter

Let’s See It On The Map

Parse it Create an array that will contain our data

Let’s See It On The Map

Parse it

Send each line to the array

Let’s See It On The Map

Create multiple markers

For each data entry Create a marker with the corresponding lat,lon

Let’s See It On The Map

When a marker is clicked…

For the clicked marker among all markers, get its corresponding data and display it in the infowindow

Assignment

Assignment

Assignment

•  Each student takes an address •  Conducts field observation based on a list

of characteristics

•  Bring your observation during the next lesson and we will attempt to complete it!