Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH OSM · Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM The aim of this workshop is to use uMap to create an individual

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


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


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


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


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


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


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


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


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


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


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


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

https://www.openstreetmap.org/?mlat=41.90056&mlon=-8.86213#map=17/41.90056/-8.86213




Documents

Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH OSM · Workshop uMap - Heidelberg 18. and 21.09.2019 - EuYoutH_OSM The aim of this workshop is to use uMap to create an individual