Originally written as a manual for the DCE map application (http://map.dce.tudelft.nl) for the International Development & Entrepreneurship minor at Delft University of Technology (TU Delft). The presentation contains a lot of generic tricks to play with all sorts of Google Maps overlays.

1. map your project
Delft Centre for Entrepreneurship - TU Delft
International Development & Entrepreneurship
map your project

2. 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

3. Manage your project
• go to http://map.dce.tudelft.nl
• login (top right)
select ‘login’ enter credentials select ‘edit’
• 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
map your project

4. Edit project settings
open project settings focus map
• 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.”
set view as default save settings
map your project

5. 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
default layer manager create layer structure: use buttons and drag&drop 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
map your project

6. Edit layer content
We now have an organized tree structure
edit layer form after saving 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.
map your project

7. Map content
A map overlay can be (a combination of)
the result: a project map with multiple map layers containing the project data and custom map overlays 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
map your project

8. Map content: Google My Maps map
To use Google My Maps go to http://maps.
map overlay example: Google My Maps view in Google Earth to save KML
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
add KML to a project layer 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-
map overlay on your project map
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:
set view as default http://maps.google.com/support/bin/static.py?hl=en&page=guide.
cs&guide=21670&topic=21676
map your project

9. Map content: Video markers
Google Maps supports the usage of html
map overlay example: Marker with video download and add KML to project (like in previous example)
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
select ‘embed video’ paste the code and save the map • add a marker
• select ‘edit html’
customize and copy the code
• 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 your project

10. Map content: Photo overlays
There are multiple ways to add photos to
map overlay example: Photo overlay from PicasaWeb album
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 your project

11. Map content: Polylines & polygons
There are many more tools & applications to
map overlay example: gps tracks 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 your project

12. Map content: Image overlay
Instead of using an image as a small icon or
map overlay example: photo overlay - bicycle map destilled from sign and rotated and cut out (using Pixlr)
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 >
position using kml overlay tool copy kml output to notepad and save upload to your project map 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 your project

13. The result: Your custom project map
the result: a project map with multiple map layers containing the project data and custom map overlays 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
map your project

14. Extra feature: Project survey
add questions: place marker and write statement
edit project page: add / edit 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.
survey page: answer the questions & submit result statistics on map
When you save your survey the visitors will
visitor’s page: do the survey
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.
map your project

15. Extra feature: Comment markers
Visitors can leave a comment on the your project map 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’.
map your project