ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Workshop u map

?
?
Manfred A. Reiter
Manfred A. Reiter

This document provides instructions for creating an interactive map using uMap that shows the locations of schools participating in the Erasmus+ euYoutH_OSM project. The instructions guide the user to search for a school, add a marker with the school name and details, and customize the marker properties. Additional steps show how to add photos and links to school websites and social media profiles in the marker descriptions. The goal is to create a finished map with markers for multiple schools, identifying information, and photos.

1 of 14
Download to read offline
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM The aim of this workshop is to use uMap to create an individual map that shows the locations of our schools in the Erasmus+ project euYoutH_OSM with a picture of the school, a link to the website, the phone number and links to social media. 1 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 1. Open your browser and search for uMap - you can try to switch the language 2. Login or Sign in best with OSM and your OSM account 3. Your OSM-Nick and your Password 2 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 4. Create a map The icons on the left Zoom in - possible with the mouse whieel as well ;-) Zoom out Search a place name (like Angra or A Guarda) View Fullscreen Embed and share this map See data layers More controls like - Measure distance Change Map background iD / JOSM 3 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM The icons on the right Draw a marker Draw a polyline Draw a polygone Import data Edit map settings Change tilelayers Manage Layers Save this center and zoom Update permissions and editors 5. Search Angra and choose Angra do Her¨ªsmo (city) 4 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 6. Change Tilelayers Now test the different possiblities how the map could look like 7. If you think the map looks the way you want it to, press SAVE. 5 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM We will continue with the ?French Map Style¡° 7. name the map ?Our schools in our Erasmus+ project¡° and IMPORTANT SAVE! 6. Now Zoom in - to Escola Secund¨¢ria Jer¨®nimo Emiliano de Andrade 6 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 7. Now pick a marker and move the cursor to the school and click! Click, click ;-) 8. Put the name of the school ?Escola Secund¨¢ria Jer¨®nimo Emiliano de Andrade¡° and write in the Description ?The best school on the island of Terceira¡° and SAVE! 7 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 9.Let us look, how the map now looks like! Save and Disable Editing then zoom out (use the mouse wheel!) You see now for the first time the Edit Pen on the top right. ;-) 10. A click on the icon tells you more about what we have done so far :-) 11. Now the idea is to change the appearance of the symbol: Shape properties 1. color 2. icon shape 3. icon symbol 11.1 zoom in to the school 11.2 remove the text box by clicking on the x in the upper right corner. 11.3 click on the Edit Pen (to enable editing the map) 11.4 click on the school¡®s icon 11.5 click on that Edit Pen ( to enable editing the school¡®s icon 8 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 12. We will change the color, the shape and put a symbol into the shape choose 1. Shape properties ¨C define ¡­ to red or as you like it ;-) 2. Icon shape ¨C open the pull down menu and chek all ¨C finally choose Drop 3. Icon symbol ¨C define ... 13. Now let us choose the interaction options for the name ¨C you rememer it was the school¡®s name I¡®d like that the school¡®s name should appear, if we move the mouse over the icon ¡­ (that¡®s called hover) and he school¡®s name should appear on the top of the school¡®s icon Don¡®t forget: 1. Save 2. Diable editing ;-) Now we have to add the picture to the description to get our final product. 9 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 14.1 Open the school again 14.2 Search the picutre in the Internet 14.3 Copy Imag location 14.4 and ¨C Ctrl-V it between {{}} {{https:// proxy.duckduckgo.com/iu/? u=https%3A%2F %2Fwww.delas.pt%2Ffiles %2F2017%2F08%2FES- jemiliano-andrade_-a %25C3%25A7ores.jpg&f=1 &nofb=1}} Save, Diable editing and see your result. 10 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Here we are: How to put more information into the descritpion? The best school on the island of Terceira Website: https://esjea.edu.azores.gov.pt/ Facebook: https://www.facebook.com/esjeandrade/ Telemovel: 965 575 357 Email: es.jea@azores.gov.pt Instagram: https://www.instagram.com/euyouth_osm/ {{https://proxy.duckduckgo.com/iu/?u=https%3A%2F %2Fwww.delas.pt%2Ffiles%2F2017%2F08%2FES-jemiliano- andrade_-a%25C3%25A7ores.jpg&f=1&nofb=1}} And the final result 11 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Work order: Create a uMap map of all schools participating in the Erasmus+ project euYoutH_OSM. At least one photo, the school's website and telephone number should appear in the window. 1. ES - https://www.openstreetmap.org/?mlat=41.90056&mlon=- 8.86213#map=17/41.90056/-8.86213 2. IE - https://www.openstreetmap.org/?mlat=53.4316&mlon=- 6.1377#map=15/53.4316/-6.1377 3. RO - https://www.openstreetmap.org/? mlat=45.08466&mlon=24.35621#map=18/45.08466/24.35621 4. PT - https://www.openstreetmap.org/?mlat=38.65564&mlon=- 27.21380#map=17/38.65564/-27.21380 5. DE - https://www.openstreetmap.org/? mlat=49.6042&mlon=6.5582#map=15/49.6042/6.5582 12 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Schools and firehydrants on the island of Terceira https://umap.openstreetmap.de/fr/map/terceira-schulen- fire_hydrants-etc_921#12/38.7178/-27.1929 13 / 14
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Info: https://dev.overpass-api.de/ov https://lz4.overpass-api.de/api/interpreter? data=[timeout:25];(nwr["amenity"="school"]({south}, {west},{north},{east}););out center; nwr = node, way, relation 14 / 14

More Related Content

Workshop u map

  • 1. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM The aim of this workshop is to use uMap to create an individual map that shows the locations of our schools in the Erasmus+ project euYoutH_OSM with a picture of the school, a link to the website, the phone number and links to social media. 1 / 14
  • 2. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 1. Open your browser and search for uMap - you can try to switch the language 2. Login or Sign in best with OSM and your OSM account 3. Your OSM-Nick and your Password 2 / 14
  • 3. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 4. Create a map The icons on the left Zoom in - possible with the mouse whieel as well ;-) Zoom out Search a place name (like Angra or A Guarda) View Fullscreen Embed and share this map See data layers More controls like - Measure distance Change Map background iD / JOSM 3 / 14
  • 4. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM The icons on the right Draw a marker Draw a polyline Draw a polygone Import data Edit map settings Change tilelayers Manage Layers Save this center and zoom Update permissions and editors 5. Search Angra and choose Angra do Her¨ªsmo (city) 4 / 14
  • 5. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 6. Change Tilelayers Now test the different possiblities how the map could look like 7. If you think the map looks the way you want it to, press SAVE. 5 / 14
  • 6. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM We will continue with the ?French Map Style¡° 7. name the map ?Our schools in our Erasmus+ project¡° and IMPORTANT SAVE! 6. Now Zoom in - to Escola Secund¨¢ria Jer¨®nimo Emiliano de Andrade 6 / 14
  • 7. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 7. Now pick a marker and move the cursor to the school and click! Click, click ;-) 8. Put the name of the school ?Escola Secund¨¢ria Jer¨®nimo Emiliano de Andrade¡° and write in the Description ?The best school on the island of Terceira¡° and SAVE! 7 / 14
  • 8. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 9.Let us look, how the map now looks like! Save and Disable Editing then zoom out (use the mouse wheel!) You see now for the first time the Edit Pen on the top right. ;-) 10. A click on the icon tells you more about what we have done so far :-) 11. Now the idea is to change the appearance of the symbol: Shape properties 1. color 2. icon shape 3. icon symbol 11.1 zoom in to the school 11.2 remove the text box by clicking on the x in the upper right corner. 11.3 click on the Edit Pen (to enable editing the map) 11.4 click on the school¡®s icon 11.5 click on that Edit Pen ( to enable editing the school¡®s icon 8 / 14
  • 9. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 12. We will change the color, the shape and put a symbol into the shape choose 1. Shape properties ¨C define ¡­ to red or as you like it ;-) 2. Icon shape ¨C open the pull down menu and chek all ¨C finally choose Drop 3. Icon symbol ¨C define ... 13. Now let us choose the interaction options for the name ¨C you rememer it was the school¡®s name I¡®d like that the school¡®s name should appear, if we move the mouse over the icon ¡­ (that¡®s called hover) and he school¡®s name should appear on the top of the school¡®s icon Don¡®t forget: 1. Save 2. Diable editing ;-) Now we have to add the picture to the description to get our final product. 9 / 14
  • 10. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM 14.1 Open the school again 14.2 Search the picutre in the Internet 14.3 Copy Imag location 14.4 and ¨C Ctrl-V it between {{}} {{https:// proxy.duckduckgo.com/iu/? u=https%3A%2F %2Fwww.delas.pt%2Ffiles %2F2017%2F08%2FES- jemiliano-andrade_-a %25C3%25A7ores.jpg&f=1 &nofb=1}} Save, Diable editing and see your result. 10 / 14
  • 11. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Here we are: How to put more information into the descritpion? The best school on the island of Terceira Website: https://esjea.edu.azores.gov.pt/ Facebook: https://www.facebook.com/esjeandrade/ Telemovel: 965 575 357 Email: es.jea@azores.gov.pt Instagram: https://www.instagram.com/euyouth_osm/ {{https://proxy.duckduckgo.com/iu/?u=https%3A%2F %2Fwww.delas.pt%2Ffiles%2F2017%2F08%2FES-jemiliano- andrade_-a%25C3%25A7ores.jpg&f=1&nofb=1}} And the final result 11 / 14
  • 12. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Work order: Create a uMap map of all schools participating in the Erasmus+ project euYoutH_OSM. At least one photo, the school's website and telephone number should appear in the window. 1. ES - https://www.openstreetmap.org/?mlat=41.90056&mlon=- 8.86213#map=17/41.90056/-8.86213 2. IE - https://www.openstreetmap.org/?mlat=53.4316&mlon=- 6.1377#map=15/53.4316/-6.1377 3. RO - https://www.openstreetmap.org/? mlat=45.08466&mlon=24.35621#map=18/45.08466/24.35621 4. PT - https://www.openstreetmap.org/?mlat=38.65564&mlon=- 27.21380#map=17/38.65564/-27.21380 5. DE - https://www.openstreetmap.org/? mlat=49.6042&mlon=6.5582#map=15/49.6042/6.5582 12 / 14
  • 13. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Schools and firehydrants on the island of Terceira https://umap.openstreetmap.de/fr/map/terceira-schulen- fire_hydrants-etc_921#12/38.7178/-27.1929 13 / 14
  • 14. Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM Info: https://dev.overpass-api.de/ov https://lz4.overpass-api.de/api/interpreter? data=[timeout:25];(nwr["amenity"="school"]({south}, {west},{north},{east}););out center; nwr = node, way, relation 14 / 14