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 / 12
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 yourPassword
2 / 12
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 distanceChange Map background
iD / JOSM
3 / 12
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 / 12
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 / 12
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 - toEscola Secundária Jerónimo Emiliano de Andrade
6 / 12
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 / 12
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM
9.Let us look, how the map now looks like!
Save and Disable Editing thenzoom 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 properties1. color 2. icon shape3. icon symbol
11.1 zoom in to the school11.2 remove the text box byclicking 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 icon11.5 click on that Edit Pen (to enable editing the school‘s icon
8 / 12
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 – define … to red or as you like it ;-)
2. Icon shape – open the pull down menu and chek all – finally choose Drop
3. Icon symbol – define ...
13. Now let us choose the interaction options for the name – you rememer it wasthe 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 ofthe school‘s icon
Don‘t forget:1. Save2. Diable editing ;-)
Now we have to addthe picture to the description
to get our final product.
9 / 12
Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM
14.1 Open the school again14.2 Search the picutre in the Internet
14.3 Copy Imag location
14.4 and – 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 / 12
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 357Email: [email protected]: 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 / 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 / 12