iwmw campus maps workshop

Campus Maps - Plan A

IWMW 2011

Who

Digimap

ROAM

Questions

Conclusions

0

90

Confession

Next StepsPractical

IWMW 2011

Digimap’s Ordnance Survey Collection

Map panel

Map tools: measure, annotate, print,

navigate

Hints & Tips

Task menu: Search,

Overview map, Map Content Control, Map Info, MyMaps

IWMW 2011

Menus

• Choose to Hide or Display

IWMW 2011

Roam

• 13 fixed scale map views• Search options: full postcode, place name, grid

reference• Slippy maps – click and drag• Add annotations• Measure lines and areas• Some views customisable:

– can select which features to display– can select an alternative map data display at the

same scale

• Print in PDF format - A4, A3, landscape or portrait

• Export to JSON........... Soon?

IWMW 2011

13 map views, or is it 14?

IWMW 2011

National

IWMW 2011

Regional

IWMW 2011

County

IWMW 2011

Metropolitan

IWMW 2011

City

IWMW 2011

District

IWMW 2011

Local Plus

IWMW 2011

Local

IWMW 2011

Neighbourhood

IWMW 2011

Street

IWMW 2011

Detailed

IWMW 2011

Digimap Training Workshops

Plan

Search – Place name

IWMW 2011


London is not a unique search

term, you get to select the

instance that you want to view

IWMW 2011


Local view map returned

IWMW 2011

Search - postcode

IWMW 2011

Search - postcode

Street view map returned

IWMW 2011

Search – 4 figure grid reference

Metropolitanview

SE4182

IWMW 2011

Map Information

Map product,

Coordinates,

Print scale

IWMW 2011

Navigation

• Zoom in/out– Fishbone– Double click to zoom in– Scroll wheel on mouse

• Drag zoom

• Pan– Click and drag the map– Compass

• Full extent / Previous / Next views

IWMW 2011

Map Content Control

Feature selection available in 7 views:

• Plan

• Detailed

• Street

• Neighbourhood

• District

• City

• Metropolitan

2 types of mapping types RASTER and VECTOR

List of layers

IWMW 2011

Map Content Control

Uncheck boxes to

remove layers

IWMW 2011

Map Content Control

Alternative representation is available in 4 views, style the map for a specific purpose

You can select alternative

themes here

IWMW 2011

Map Information

Map product,

Coordinates,

Print scaleIWMW 2011

Measurement Tools

• Tools to measure distance/area of map features available

IWMW 2011

Measurement tools

• Click the distance tool to activate

•Click at each point on the map – a pink line is added

•Double click at last point

•Distance given in tools box

IWMW 2011

Measurement tools

• Click the area tool to activate

•Click at each point of your area – a pink shaded area is added

•Double click at last point

•Area given in tools box

IWMW 2011

Annotations tools

• Tools to add lines, shapes, text and labels to your maps available

IWMW 2011

Annotation tools

• Toolbar appears at the top of the screen – can be moved around

• Main options to add annotations in the Draw & Create area - add:

• Add symbols, text, lines, polygons, pre-defined shapes

• Annotations remain on your map at the same scale as you zoom in and out

• Annotations appear on your PDF map print

IWMW 2011

Sample of annotations

IWMW 2011

Print

•Print icon available at top right

•Opens in new window

IWMW 2011

Print

• add gridlines, title• option to include annotations• move map around in preview• print A3/A4 landscape or portrait

IWMW 2011

PDF print

IWMW 2011

Saving maps

• Click Save current map, enter a Map title, Click Ok

• Available whenever you login

•Saving annotations – soon......

IWMW 2011

Making a Campus Map

Confession time – at the present you cant actually do what I am about to demonstrate, but we hope to implement this soon and welcome feedback on what would be useful to web.

IWMW 2011

Theoretical process 1

1. Do some digitising – I would recommend that you theme your polygons. The colours are retained in the output so it makes it easier to re-interpret.

2. When you are happy with it, press the magic button

3. Get the code and load it into a GIS or load it into a web page through an API such as openlayers/google

Magic button may appear

here....

IWMW 2011

Practical

Onto the practical exercise

Familiarising yourself with Digimap ROAM

This should take around 30 minutes

Then we will look at what we can do with the output.

IWMW 2011

After the magic button?

Well, this is the bit has still to be decided and we want your help.

IWMW 2011

Theoretical process 1

1. Do some digitising – I would recommend that you theme your polygons. The colours are retained in the output so it makes it easier to re-interpret.

2. When you are happy with it, press the magic button

3. Get the code and load it into a GIS or load it into a web page through an API such as openlayers/google

Magic button may appear

here....

IWMW 2011

What to do next?

Now we have digitised the buildings and grabbed the GeoJSON through the “magic button” what options are there?Here we will outline 3 options:

– Google Earth– Image files as output (for print or Google Earth)– OpenLayers dynamic map

There may be other options/needs. If you have any thoughts, we would like to hear them.

IWMW 2011

Google Earth

To get the annotations into Google Earth it is pretty easy. We need to convert the GeoJSON to KML

Using the ogr2ogr libraries:

ogr2ogr –f “KML” campusmap.kml input.geoJSON

IWMW 2011

OGR2OGR libraries available through FWToolshttp://fwtools.maptools.org/

Google Earth

IWMW 2011

Case study

Campus maps for Edinburgh University

Requirements:– Make map that can be integrated into

MobileCampus App– Define all university buildings as polygons– Link to attributes– Make maps which show uni building

• Maps must be “lite” enough to deploy on mobile

IWMW 2011

Recipe – part 1

1 x IS intern

30 minute intro to Digimap ROAM

1 x copy of current campus map

1 x access to Google Streetview

2 x lunch time walks

1 – 2 days of digitising

http://www.flickr.com/photos/indieb0i/101943682/

Not mine, honest

Take intern and train on how to digitise, set intern loose and copy existing map, checking it is correct with google streetmap, Openstreetmap and ground truthing (lunchtime walks).

IWMW 2011

Recipe Part 2

• Once you have the JSON, convert to shapefile format: – Ogr2ogr –f “ESRI SHAPE FILE” campusmap.shp

input.geoJSON

• Import into GIS and theme• Add basemap• Export to desired file format (png in this

case)• Re-project png from OSGB to WGS84 for use

in google maps.

IWMW 2011

Edinburgh Central Campus

IWMW 2011

Kings Buildings

IWMW 2011

Western General Hospital

IWMW 2011

Easter Bush

Issue with the buildings here, they are new

and don’t appear on OS

maps yet.

IWMW 2011

Doing more with GIS/OpenLayers

QGIS is a free, open source piece of software that is easy to use and well documented

We will try to get our shapefile loaded and then export it in some openlayers code that can be dropped into a webpage to give an interactive map.

http://www.qgis.org

IWMW 2011

QGIS main screen

Add vector layer

Layer list

Map

Window

IWMW 2011

Plugins

IWMW 2011

OGR2Layer

Set an output folder Set map size

IWMW 2011

OpenLayers Code

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

<script type="text/javascript">

var map, selectsControls

function init(){

var option = {

projection: new OpenLayers.Projection("EPSG:900913"),

displayProjection: new OpenLayers.Projection("EPSG:4326")

};

map = new OpenLayers.Map('map', option);

olmapnik = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.org/${z}/${x}/${y}.png");

map.addLayer(olmapnik);

map.setBaseLayer(olmapnik);

var ls= new OpenLayers.Control.LayerSwitcher();

map.addControl(ls);

ls.maximizeControl();

map.addControl(new OpenLayers.Control.Scale());

var OGRGeoJSON_style = new OpenLayers.Style(

OpenLayers.Util.applyDefaults({

strokeColor: "${getStrokeColor}",

strokeOpacity: 1,

strokeWidth: "${getLineWidth}",

fillColor: "${getFillColor}",

fillOpacity: 1

}

//START QUERY OGRGeoJSONfunction onPopupCloseOGRGeoJSON(evt) {

selectControl.unselect(selectedFeature);}function onFeatureSelectOGRGeoJSON(feature){

selectedFeature = feature;tableOGRGeoJSON="<html><meta http-

equiv='Content-Type' content='text/html; charset=UTF-8'><body><table><tr><td>alignment:</td><td>"+feature.attributes.alignment+"</td></tr><tr><td>fcode:</td><td>"+feature.attributes.fcode+"</td></tr><tr><td>fillColor:</td><td>"+feature.attributes.fillColor+"</td></tr><tr><td>fillOpacity:</td><td>"+feature.attributes.fillOpacity+"</td></tr><tr><td>fontColor:</td><td>"+feature.attributes.fontColor+"</td></tr><tr><td>fontFamily:</td><td>"+feature.attributes.fontFamily+"</td></tr><tr><td>fontSize:</td><td>"+feature.attributes.fontSize+"</td></tr><tr><td>fontWeight:</td><td>"+feature.attributes.fontWeight+"</td></tr><tr><td>internal:</td><td>"+feature.attributes.internal+"</td></tr><tr><td><..........></td></tr></table></body></html>";

popup = new OpenLayers.Popup.FramedCloud("chicken",

feature.geometry.getBounds().getCenterLonLat(),new OpenLayers.Size(1000,500),tableOGRGeoJSON,null,true,onPopupCloseOGRGeoJSON

);feature.popup = popup;map.addPopup(popup);

}function onFeatureUnselectOGRGeoJSON(feature) {

map.removePopup(feature.popup);feature.popup.destroy();feature.popup = null;

}//STOP QUERY OGRGeoJSON

IWMW 2011

Output (OSM)

• No coded written

• Can add in attributes

• Can apply styles to data in QGIS

• Works in all good browsers (so not IE)

IWMW 2011

Output (Digimap OpenStream)

• Grab the example code from OpenStream site

• Copy the variables to the beginning of the script

• Add a new OpenLayer.map to the index.html

• Discover the projections dont match• Panic!• Find someone clever• Copy their code (function proj2.js)

IWMW 2011

Useful Links

http://edina.ac.ukhttp://edina.ac.uk/digimap/http://www.gogeo.ac.uk/http://openstream.edina.ac.uk/registration/http://www.qgis.orghttp://fwtools.maptools.org/

IWMW 2011

iwmw campus maps workshop

Education