Web Mash Up Making maps with web tools
Jun 25, 2015
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!