Web Mashup Slides For Lesson 1
Upcoming SlideShare
Loading in...5
×
 

Web Mashup Slides For Lesson 1

on

  • 1,269 views

Credit: Background images from Eric Fischer

Credit: Background images from Eric Fischer

Statistics

Views

Total Views
1,269
Views on SlideShare
1,269
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Mashup Slides For Lesson 1 Web Mashup Slides For Lesson 1 Presentation Transcript

  • Web Mash UpMaking maps with web tools
  • Lesson OutcomeAt the end of this segment, you will have:1.  Your own interactive map2.  Containing real data3.  And an understanding of how to leverage the potential of web tools to produce maps
  • Some Cool Maps View slide
  • Stamen Design: Water Color View slide
  • 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 MapsMaps 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 ThisI’ll introduce you to simpleconcepts in:1.  GIS2.  KML3.  Data processing
  • ObjectivesLearn to:1.  Produce styled maps2.  Append data to maps3.  Include basic dynamic elements4.  Make our maps freely accessible online
  • The Fun Part Styling MapsRequired componentsfor this exercise:1.  Google styled map wizard2.  Google maps3.  Basic javascript
  • The Fun Part Styling Mapshttp://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  • The Fun Part Styling Maps Features1.  Area of interest defined by Google2.  You have control over what you want or do not want to show3.  Dependent on the type of map you are building and the design goal it is meant to achieve
  • The Fun Part Styling MapsEach feature has2 elements•  Geometry •  Shape •  Fill •  Stroke•  Label •  Text •  Fill •  Stroke •  Icon
  • The Fun Part Styling MapsStylers•  Visibility •  On •  Off •  Simplified•  Colour •  RGB •  HSB •  Invert Lightness
  • The Fun Part Styling MapsYou may remember styling with CSS, thisis similar except that it is structured in adifferent 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” }! ! !]! !} ! !! ]!
  • Another Way to Understand B A C D
  • Another Way to Understand A1 B A2 A3 C A4 D1 A5
  • Another Way to Understand A1 B A2 A3 C A4 D1 A5
  • 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 & SpaceProjection & Coordinate SystemGoogle Maps: Mercator projection – Latitude, Horizontal Grid, Rows – Longitude, Vertical Grid, Columns – Elevation, Depth, Z Axis
  • GIS & SpaceReading 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
  • Geo CodingFinding geographic coordinates (in our caselatitude and longitude) from othergeographic data, (street addresses or Postalcodes) Street Address Google Maps
  • 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 TechnicalHow to include your style file1.  Embed Google maps in a .html document2.  Load your style file3.  Bind your style with to the map
  • Slightly TechnicalEmbed Google maps Device has no GPS sensor
  • Slightly TechnicalEmbed Google maps Where we will center the map
  • Slightly TechnicalEmbed Google maps Define map options
  • Slightly TechnicalEmbed Google maps Map zoom level
  • Slightly TechnicalEmbed Google maps Set map center
  • Slightly TechnicalEmbed Google maps Specify the type of map
  • Slightly TechnicalEmbed Google maps Options •  TERRAIN •  ROADMAP •  SATELLITE •  HYBRID
  • Slightly TechnicalEmbed Google maps Display the map within the html div tag name ‘map’ with the defined map options
  • Slightly TechnicalLoad your style file URL of my file where the file lives in the computer
  • Slightly TechnicalLoad your style file Load the style file into an object called styles using the defined options
  • Slightly TechnicalLoad your style file Create a new map type with the name “styledMap”
  • Slightly TechnicalLoad your style file Instead of specifying 1 map type, we can specify several as an array
  • Slightly TechnicalLoad your style file The 2nd map type in this case is our styled map and its unique id is ‘map_style’
  • Slightly TechnicalLoad your style file Associate unique id ‘map_style’ with maptype ‘styledMap’
  • Let’s Make a MarkerHow to add a marker1.  Embed Google maps in a .html document2.  Define a location in coordinates3.  Add the marker to the map
  • Let’s Make a MarkerDefine a location in coordinates Create a new marker object
  • Let’s Make a MarkerDefine a location in coordinates Set its position
  • Let’s Make a MarkerAdd the marker Tell it which map it should go to
  • Is it customizable?How to change the look of your marker1.  Embed Google maps in a .html document2.  Add your marker3.  Change the marker with a .png file (max res. 32 x 32 pixels)
  • Custom MarkerLoad marker image Get the marker image and define its anchor point
  • Custom MarkerTell the marker to use your imageSimply 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. Twitter Photo <Lat, Lon> Instagram Facebook Text Flickr
  • Let’s Geotag Some DataSimple geotagging1.  Embed Google maps in a .html document2.  Add the marker to the map3.  Add html content
  • Let’s Geotag Some DataCreate an info window
  • Let’s Geotag Some DataSpecify its content Include all content into a single html div
  • Let’s Geotag Some DataWhen someone clicks the marker… Send the content to the info window
  • Let’s Geotag Some DataWhen someone clicks the marker… Open the info window
  • Is it customizable?How to change the look ofyour info window1.  Embed Google maps in a .html document2.  Add the marker to the map3.  Add html content4.  Style the content
  • Style the Info WindowWe’ll need a plugin
  • Style the Info Window Don’t move theCustomizable CSS window because we are already moving it in the mouse event
  • Style the Info WindowCustomizable 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 ProcessingGeo 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 ProcessingSo 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 ProcessingPublically 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 MapGet the source URL
  • Let’s See It On The MapLoad the data
  • Let’s See It On The MapParse it Break data down into individual lines
  • Let’s See It On The MapParse it Break down into individual words using comma as a splitter
  • Let’s See It On The MapParse it Create an array that will contain our data
  • Let’s See It On The MapParse it Send each line to the array
  • Let’s See It On The MapCreate multiple markers For each data entry Create a marker with the corresponding lat,lon
  • Let’s See It On The MapWhen 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!