Block 3
Geoweb

• Spatial information on the web and planning
  Why, how, where?
• More on HTML, CSS and project management
  Your first online map

Why use spatial information on the web for planning?

• Collaboration
• Participation
• Empowerment
• Reduce barriers

How to use web-based spatial information in planning

• Share interactive maps online
• Let citizens complain
• Give suggestions a spatial dimension

There is more WHERE than you think

• Social media - big data
• Geocoding
• Administrative units

Where is the WHERE quiz

• http://geizhals.at/
• http://t-mobile.at/
• http://post.at/
• http://fahrplan.oebb.at/
• http://strava.com/

Guess what?

WHERE ≠ GIS

This is GIS - on the Web

:-(

Paul Ramsey:
Spatial IT and the Spatial Web

Your first online map

Goal: Find something for creating maps on the web

Goal: Use CSS to make the map fullscreen

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}
          

div.full {
  width: 100%;
  height: 100%;
}
          

Goal: Use your own data

new ol.layer.Vector({
  source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: 'mydata.geojson'
  })
})
          

What data format do we use here?

mydata.geojson:

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "Name": "Andreas Hocevar"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [16.3916015625, 48.21735290928554]
    }
  }]
}
          

Goal: Map preview of spatial data

Goal: History of changes

Goal: Team collaboration and communication

Goal: Publish web sites easily

Group exercise: GitHub project setup

• Create user accounts (one for each group member)
• Ask @ahocevar to make you members of tuwien-geoweb-2015
• Create a project for your group, named 'g01-block3', 'g02-block3' etc.

Group exercise: Dev environment

• Set up git, e.g. using GitHub Desktop
• Set up the Atom text editor
• Download the OpenLayers app template
• Make it work - you'll need node and maybe Java.

Note for Windows users: The portable GitNodeSDK app contains Git, Atom, node an Java.

Exercise 1: Group map

Task: Create a map with your group members' locations

• Use a nice background map.
• Use http://geojson.io/ to draw the locations
• Get familiar with and use GitHub tickets, milestones, releases, forks and pull requests
• Get familiar with and use git add, commit, push, branch and tag
• Use GitHub pages (gh-pages) to publish the map.

Hints for exercise 1

OpenLayers examples and docs will help - especially for finding a nice background map

The page you'll want to publish is in the dist directory. The master branch should not contain a dist directory. Solution: create a release tag:

git checkout -b release-1.0 master
git add -f dist/*
git commit -m "Tagging the 1.0 release"
git tag 1.0 -m "1.0"
git push --tags
git subtree push --force --prefix dist origin gh-pages
git checkout master

Exercise 2: CSS

Task: A nice layout for the map from exercise 1

• Update the page from exercise 1 to have a 2-column layout.
• Place the map in the left, and some info about the group members in the right column.
• Again, make use of GitHub, git and gh-pages

Hints for exercise 2

Bootstrap makes CSS easy. It brings simple grid layouts, and many page components like menus, buttons, etc.