DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)


Published on

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.

Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)

  1. 1. map your project Delft Centre for Entrepreneurship - TU Delft International Development & Entrepreneurship map your project
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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