map your project

map your projectDelft Centre for Entrepreneurship - TU DelftInternational Development & Entrepreneurship

map your project

Objectives

• Share your project with the world

• Make your project data accesible

• Receive feedback on your project

Method

• publishing & sharing your project data on popular web applications.

• using the DCE Map application (http://map.dce.tudelft.nl) as a portal to present and access your project data by linking to these web applications.

map your project

Manage your project

• go to http://map.dce.tudelft.nl

• login (top right)

• use credentials send to you by DCE

• two new tabs appear ‘view my project’ & ‘edit my project’

• select ‘edit my project’

• note: the white bar that appears between the menu and the map is the status bar

select ‘login’ enter credentials select ‘edit’

map your project

Edit project settings

• click on project settings to open and edit your project details

• set your basic details: upload an image, write a description, type the location

• then focus the map on your project area

• use this view as default by clicking ‘set current view as default’ in your project set-tings

• and don’t forget to press save!

• after saving you should see a message in the status bar saying: “Project details are successfully updated.”

open project settings focus map

set view as default save settings

map your project

Organize your project

You can organize your project data by using map layers. Layers can be added, removed, edited and structured in a tree by using the layer manager in the left panel. We first cre-ate the structure and later add content to the layers.

• use the ‘add’, ‘remove’ and ‘rename’ but-tons to create and modify the layer nodes

• use ‘drag & drop’ to change the layer structure

• when viewing the project use the check-boxes to control the layer visibility (on/off)

• when viewing the project use the triangle icon in fron of a layer to collapse/expand a tree layer branch

default layer manager create layer structure: use buttons and drag&drop

map your project

Edit layer content

We now have an organized tree structure of empty layers. To add content to a layer, select it and click the edit button in the layer manager.

A layer consists of• name• image (optional) (e.g. impression or key)• description (optional)• map overlay (optional)

Use the edit layer form to add project data.After saving you should see:• Message in the status bar:

“Successfully updated layer ‘layer name’”• Image preview in the edit panel• Map overlay preview on the map

If you press ‘save and return’ instead of ‘save’ the layer is updated and you return di-rectly to the ‘edit my project’ page. Here you will also see the layer icon in the layer man-ager changed to indicate it has content.

edit layer form after saving

map your project

Map content

A map overlay can be (a combination of) markers, polygons, photos or an image overlay. The file needs to be in KML format (keyhole markup language) which can be created with many applications like Google Maps, Google Earth, Picasaweb and many others. You can virtually add anything as long as its hosted online.

In the next steps we’ll study a few examples on differtent ways to create map content.

You can find the original files on:http://www.activeids.nl/downloads/bicing_barcelona.zip

http://picasaweb.google.com/j.b.moelker/BicingBarcelona?feat=directlink

You can find the results on the DCE Map:

http://dce.berlage.youngzaphod.org/project/show/id/39

the result: a project map with multiple map layers containing the project data and custom map overlays

map your project

Map content: Google My Maps map

To use Google My Maps go to http://maps.google.com and select ‘my maps’.

With My maps you can create, edit, collabo-rate with others and share your map. You can use markers (with standard or custom icons) and polylines & polygons, but Google Maps does not (yet) support image overlays.

When you are done editing your map and want to add it to your DCE project, click ‘save’ (not ‘done’), select ‘view in Google Earth’ (or rmb > save link as...) which down-loads your map as a KML file. Upload this file to your project layer and save the layer to add it to your project map.

Note: this procedure creates a KML file with a link to your Google My Maps-map. If you upload this, it will also change in your project map.

Tutorial on using Google My Maps:http://maps.google.com/support/bin/static.py?hl=en&page=guide.cs&guide=21670&topic=21676

map overlay example: Google My Maps view in Google Earth to save KML

set view as default

add KML to a project layer

map overlay on your project map

map your project

Map content: Video markers

Google Maps supports the usage of html code snippets as marker content. This al-lows us to add YouTube videos to our maps.

Note: you can only use videos from YouTube and Google Videos as other scripts are filtered out automatically.

To add a video to your map marker:• upload video to YouTube (http://www.youtube.com)

• view the video• select ‘embed video’• copy the code (optionally customize first)• go to your Google My Maps map• add a marker• select ‘edit html’• paste the code• click ‘ok’ and save the map• get the KML and upload it to your project

map like you did on the previous slide

Tutorial on adding video:http://maps.google.com/support/bin/static.py?page=guide.cs&guide=21670&topic=21676&answer=144364

map overlay example: Marker with video

select ‘embed video’

customize and copy the code

paste the code and save the map

download and add KML to project (like in previous example)

map your project

Map content: Photo overlays

There are multiple ways to add photos to your map depending on your preference.

Just like with a video you can add a photo as marker content by copying the embed code. (in PicasaWeb: select photo > link to image > embed image)

Alternatively you can create a photo overlay:• go to PicasaWeb (http://picasweb.google.com)

• select or create a new album• upload photos• select ‘view album map’• position the photos on the map• select ‘view in Google Earth’ to download

the photo overlay as KML file • upload it to your project map like you

would always do

More help:• http://picasa.google.com/support• http://maps.google.com/support/bin/static.py?page=guide.cs&guide=216

70&topic=21676&answer=144364

map overlay example: Photo overlay from PicasaWeb album

map your project

Map content: Polylines & polygons

There are many more tools & applications to draw polylines and polygons, like:

• Google Maps (http://maps.google.com)

• Google Earth (http://earth.google.com)

• gps visualizer (http://www.gpsvisualizer.com/)

• BirdTheme maps tool (http://www.birdtheme.org/useful/googletool.html)

You can also convert data to poly’s using many applications. In this example we use gps tracks converted with gps visualizer.The ‘bicycle routes’ layer is used for a map key (image in info panel on the right) and each route is added as a KML file to its own layer ‘route 1’ and ‘route 2’ and nested in the ‘bicycle routes’ layer so that they can be controlled individually or as a group.

See also: Tutorial on using gps tracks:http://wiki.activeids.nl/index.php/Map_Tracks

map overlay example: gps tracks

map your project

Map content: Image overlay

Instead of using an image as a small icon or as marker content you can put an image as an overlay over your map.

To add an image overlay:• upload image to PicasaWeb album

(make background transparant using tools below)• view image > right mouse click on image >

copy image location• in GEarth: add > image overlay > paste

image url > ok > rmb on layer > save KML• in ImageOverlay Tool (see tutorial below):

center map > paste image url > update > kml output > copy code to notepad > save as name.kml

• upload to DCE project as usual

Tools to edit your image:• Pixlr (http://www.pixlr.com)• Picnic (in PicasaWeb: select photo > edit (right top))

Image overlay tutorials:• http://wiki.activeids.nl/index.php/Tools_KML_ImageOverlay• http://earth.google.com/support/bin/static.py?hl=en&page=guide.

cs&guide=22373&topic=22376

map overlay example: photo overlay - bicycle map destilled from sign and rotated and cut out (using Pixlr)

position using kml overlay tool copy kml output to notepad and save upload to your project map

map your project

The result: Your custom project map

In summary:

• First make all your multimedia project data accessible using your favorite web apps

• Configure your project settings

• Structure your project in the layer manager

• Add your project data to the layers

Extra features:

The DCE Map offers to extra features that allow you to get more information from your visitors and allow them to give feedback:

• Project survey• Comment markers

the result: a project map with multiple map layers containing the project data and custom map overlays

map your project

Extra feature: Project survey

For your project research you can add a questionnaire to your map. Go to the edit page and in the ‘Survey widget’ in the left panel selet ‘add a / edit survey’.

In the survey editor you can create your sur-vey: add a survey name, description and up to 10 questions.Each question is a statement and a mark-er which you can place with the ‘(re)place marker’ button.

When you save your survey the visitors will see the survey widget and they can ‘do the survey’. After they submit their answers the results are displayed on the map as ‘ques-tion markers’ which show the statistics when clicked.

edit project page: add / edit surveyadd questions: place marker and write statement

visitor’s page: do the survey

survey page: answer the questions & submit result statistics on map

map your project

Extra feature: Comment markers

A visitor can leave a comment on your proj-ect map by going to the comments widget in the panel on the left side of the map.

The can write a message and link it to the map by placing a comment marker. After submitting the comment is added to the map.

All comments can be toggled (on/off) with the ‘show/hide all comments button’.

Visitors can leave a comment on the your project map