Favorite places in kindergarten days, former youth hangouts, the best vacation spot, or places of learning during school and college years – memories are often closely linked to places (and thus indirectly maps). Even in many recreational (running or cycling is hardly imaginable today without a jogging app with maps) and different fields of work, maps play an important role. Some years ago, when I was writing more regularly for local media one or the other small article, I was usually glad when I could fall back on existing maps and pictures from archives. Topics with location reference could be described more comprehensible and tangible this way. Be it event information, smaller reports or reports on the traffic situation. It is not without reason that geographers like Georg Gartner (professor of cartography at the University of Vienna and former president of the International Cartographic Association) say: "Without maps, we would be ‘spatially blind’."Depending on the region, I rarely had suitable material available for quick access. But with uMap, such maps can now be created and customized without much effort. And all this without any programming knowledge.
A tweet from colleague Tobias Zeumer drew my attention to uMap. This guy shared a beautiful map he created himself, which I share along with some ideas that crossed my mind while trying out uMap in the "More ideas and suggestions for interactive maps" chapter. I have also included my first steps in this article as a kind of step-by-step short guide in the chapter "Short tutorial", so that parallel participation is as easy as possible if you are interested in it.
What is uMap?
With the open source application uMap, it is possible to create individual, interactive maps with just a few mouse clicks. For this purpose, it uses the map material of OpenStreetMaps, a project that has been running since 2004 and is supported by the non-profit organization OpenStreetMap-Foundation. Since uMap is a web application, no software download is required. Also an account for creating maps is not needed. However, if a map project is to be (potentially) further edited later, it is easiest to fall back on one of the currently four login options (Github, Bitbucket, Twitter or OpenStreetMaps). Otherwise, the link provided at the beginning of the creation of a map must be well kept.
For the following quick guide (as of 29.09.2021) an OpenStreetMaps account was used. More information about uMap and the different language variants can be found in this wiki.
Short tutorial for uMap using the example of a fictitious event day
The individually adapted maps are implemented in uMap via an easy-to-use editor. This contains menu bars on the left and right side of the screen, which contain elements such as markers, layers, lines, etc. include.
Via a code snippet the created maps can be integrated into web pages. How this works is illustrated in the following short introduction. For this one, I went through the whole thing using the example of a fictitious action day of the TU library for the Open Access week with presence offers such as lectures and exchange opportunities and listed the individual steps. In addition to the library’s premises, the surrounding outdoor areas of the TU campus are used as venues for the event. With this map, among other things, we can coordinate more easily, ..
- … where actually the main entrance of the library/ the event registration is,
- … where the lecture rooms of the event are located,
- … where there is room for free, technical and creative exchange,
- … which food and beverage services are available,
- … what other organizational units there are (for example, rest rooms).
1. Start creating a map
We now call the website https://umap.openstreetmap.fr/en/ on. Whether logged in or not: To start creating a map, we click on the button "Create a map" in the upper right corner:
"Create a Map", (Photo: Fho4train via Wiki, shared under CC0/Public Domain)
2. Menu bars of the editor
A world map opens. On the left and on the right side of the window we have respectively a menu bar.
Under point 3 and 4 the main functions are listed.
3. Left menu bar options
– zoom in and zoom out ("+" and "-" symbols),
– Location search ,
– Sharing and embedding the current map in other web offers ,
– Viewing and hiding data layers ,
– Show and hide other options for the map display .
4. Right menu bar options:
– "Draw a marker" ,
– "Draw a line" ,
– "Draw an area" ,
– "Import data" ,
– "Edit map settings" ,
– "Change background map" ,
– "Manage layers" ,
– "Save current position and zoom level" ,
– Change permissions and editors .
5. Name the map
The first thing we do is give our map a name. To do this, we click on the edit icon in the upper left corner of the browser window . A window opens on the right side of the screen. I decide to name the event "Open-Access-Event tub. (imaginary)".
6. Search a place
Since we know specifically where the event is to take place, we use the search option in the left menu to search for "university library tuhh". In parallel, of course, the quick guide can be played out with a different location. From the list of suggested locations on the right side of the screen, we click on the entry that suits us best. The map now shows not the world map, but our smaller and more detailed region around the TU library.
7. Map settings and map options
Now a short look into the map settings is useful to get a feeling for the different map options. For this we click on "Change background map" in the menu on the right side . Here we see that there are, for example, maps with bike paths, satellite images, hiking maps and other options. Depending on what the map is to be used for and what details are needed, it is worth taking a look at these settings. In our case we choose "OpenStreetMap".
Different types of maps can be used
(Screenshot map menu, not under free license)
For example, we have the TU campus with clear building names ("Mensa", "Audimax", etc.) and an overview of transport connections such as bus and train stops as well as parking facilities.
8. Draw an (event) area
After naming our map (item 5), selecting a more concrete map section (item 6) and choosing a suitable map type (item 7), we now mark the concrete event area. For this we use the option "Draw a surface" in the right menu bar . With a click on the map we start the area drawing, by setting further points we "enclose" the event area. A click on the last set point finishes the surface drawing. Now a menu opens on the right side of the screen. Here we can give the area a name and a description. To the right of menu item "Description" we see a question mark icon. With a click on this icon we get hints for an enriched text formatting. This way we can include images and videos on the map in addition to plain text. In order to facilitate the orientation later by visual anchor points, we thus include a photo of the library building.
To do this, we can copy the text for including images and replace the placeholder link it contains with the link to the image of our choice. For the TU library I have used the wiki entry of the library. Attention: we have to use the concrete image link, otherwise we will get an error message in the interactive map instead of the expected image display. Now we save our map via "Save" at the upper right edge of the screen. To the left of the save button there is a button "Deactivate edit". With this we leave the edit mode:
Button to deactivate the edit mode (Photo: Fho4train via Wiki, released under CC0/Public Domain)
If we make a mistake while drawing surfaces, we can remove the corresponding corner points (click on the corresponding point and select "Delete this corner point") and move them (hold down the left mouse button and move the respective corner point to the desired position).
9. Adjusting the shape properties of a drawing area
If we now click on the drawn area in our map after leaving the edit mode, nothing out of the ordinary happens. So for more interactivity we need to make some more adjustments. To do this, we click on the area we have drawn and select "Edit" . A menu opens at the right side of the browser window. Here we select "Shape properties" and adjust the shape and line colors as desired. I color the drawn area in the typical TU blue. I also adjust the line width and opacity a little bit. Then we click on "Interaction options" further down in the "Shape properties" menu. We adjust these in the following step.
10. Settings for popups of objects
In the "Interaction Options" menu, we select "Popup Form" and click on "Type of Popup.". With this option we decide whether additional information should be displayed on the right side of the screen or directly in a popup window at the drawn surface. After we have made the settings of our choice, we click again on "Save" at the top right of the screen.
11. Check: Function of text and image popup
In order to check our adjustments, we now deactivate editing again by clicking on "Deactivate editing" in the upper right-hand corner of the screen. Now we click on our area drawing, a popup should appear with the previously entered description text and the image of the library. That would be done! Now we need a bit more structure for the different organizational areas of our fictitious event.
Using the popup effect, additional information is displayed by clicking on the corresponding areas and shapes (screenshot popup menu, not under free license)
13. Create layers
For this we look at the "Layers" option. We can use this for better organization of our event. This is how we plan the layers "building organization", "catering" and "event contents. Anyone who has ever looked at the infinitely confusing (analog) area maps of larger shopping centers can perhaps already guess what benefit levels can offer: if we are looking for catering options, for example, a map with a lot of additional information (for example, locations of numerous clothing and electrical stores as well as other shopping options) leads to a dwindling overview. So if we are looking for catering facilities at our event, an option to filter would be desirable. To do this, we now click on "Manage Layer" in the menu on the right side of the screen and select "Add Layer" in the subsequent menu. We do this for the following layers:
- Building organization (e.g. Entrance, Toilets),
- Catering (beverage stand, snack stands),
- Event content (markers for event rooms and booths).
We rename our "layer 1" to "event site" for a better overview. So this is the whole drawing area we created at the beginning (see point 8).
14. Create markers and assign layers
Now we assign markers to the newly created layers. We have to create these first, which we do by clicking on the marker icon (first item in the menu on the right side of the screen) and a mouse click at the desired position on our drawing area for the main entrance of the building. In the right menu we select a name for the marker ("Entrance") and can also enter a short description. We can now do the same for the sanitary facilities. So we press the button "Draw a marker" , click in the area drawing on the desired location, select again the layer "Building organization" and assign here as a name for example "Toilets". Now we can also use the additional format options and select a color under "Format properties" and a suitable icon under "Image drawing symbol.
15. Creating further markers
To finish creating markers on our event map, we now create the following markers ( ):
- three catering options (assignment to the "Catering" level, color yellow),
- two lecture rooms and three theme tables (assigned to the "event content" layer, color Coral),
- a rest room (assigned to the "Building organization" layer, color red).
16. Split and include map
For a test of the previous features of our current map, let’s now try the embedding of the map. In the left menu we click on the "Share and embed this map" option . We copy the code snippet that was already mentioned at the beginning of the short tutorial chapter. Now we can insert this for example into an available WordPress installation or for a quick sense of achievement into a guest note in the TU-Hackpad. For the latter, after clicking on "New guest note" at the top of the screen, we paste the code into the left window. On the right, we see our map and can click on the option "full screen display" to see the complete map. Of course, it would also be possible to simply call up the link to the map directly. But that’s also how we got to know the embedding feature right away. On the now opened map we now have the possibility to show and hide the map layers as we like in the left menu. To do this, we click on "Data Layers" and select "Show/Hide Layer":
Use the eye symbol to show and hide layers (Photo: Fho4train via Wiki, released under Creative Commons Attribution-ShareAlike 2.0)
17. draw directions to the campus on the map
The only thing our map is missing now for a successful first organizational design is to show possible ways to get there. For this we use the line tool in the menu to the right. There are different format options available (e.g. opacity, colors of the lines, thickness and shape). For our example I have created two possible paths and a corresponding layer for each of them.
18. Set permissions to edit/view the map
In addition to sharing our map, it is now also possible to use the "Change permissions and editors" button to make settings in order to continue working on the map together. Otherwise: If you have made it this far, you have implemented your first own map material. Congratulations!
More ideas and suggestions for interactive maps
Of course there are many other possibilities for the use of uMap. Some ideas that went through my head during the trial and error, I have recorded at this point.
Active interlibrary loan of the tub. as uMap
The actual inspiration for this post came – as mentioned at the beginning – from a tweet from colleague Tobias Zeumer. This guy had the great idea of using uMap to map which libraries we could go to as tub. have books lent internationally.
Traditionally, this form of interlibrary loan, where libraries lend books to each other, is also called interlibrary lending. More about interlibrary loan can be read in "Bibliothekarisches Grundwissen", a classic of library textbook literature. The title is part of the tub both electronically and in different print editions.-stock.
Campus map
This campus map of the TUHH was also implemented by Tobias with the help of uMap. The map is maintained via a GitLab repository. The integration of the virtual map of the TU library is also great here. This can be accessed, for example, via the menu on the right (click on "University Library") and the option "tub.map" under "Infos& Links" in the popup that appears.
An automated campus guide for the beginning of the study period
Many students know the feeling: when you start your studies, you have to deal with a lot of things. How to register where? Where do I have to go at all on the first day? A good way to get to know the campus without too much information could be a little interactive guide.
To illustrate this, I have created a simple example in uMap "quick and dirty". In my mind a scenario a la "Your first day on campus" is conceivable. So students could in this way, even if presence should not be possible, make a first exploration tour with important stations without too much "superfluous" information. For a quick design, I first created five markers (see also item 14 in the previous tutorial section):
- "Start Denickestrabe",
- "We take a look at the university library",
- "Relaxing in good weather",
- "The fastest way to building A",
- "Christmas Tree Building A".
For the markers, placeholder elements and descriptions were created, and symbol images were used, for which research was done via CC-Search and Pic4Carto (here we can see if there are already images in certain regions), among others. Depending on the needs, these can lead meaningfully through an introduction day or an orientation week.
After creating the markers, I selected the options that fit a more "narrative" map:
- click on "Edit map settings" in the right menu and activate the option "Activate slideshow mode" (this gives us an additional navigation bar with which we can jump through our markers on the map),
- If you want these jumps between the markers to run automatically, you have to activate "Automatic start…" in the same menu further down,
- The zoom factor of the map can be fixed in the right menu using the "Current position and zoom level" option,
- If we now let the little story run, we quickly notice that the markers do not run in the desired order, so we now still have to order the sequence of the "stops".
To do this, click on "Manage layers" in the right-hand menu and then on the "Edit features in a table" icon. There we use the option "Add a feature" and call it for example "Order". In the associated table column, we use an ABC sort in the desired order (continuous numbering did not work in my test). Also via the right menu we now go to "Edit map settings", "Standard properties" and enter our example "Order" as sorting key. Once saved, the automatic orientation day on the interactive campus should look something like this:
This automated round trip can also be viewed here.
Such a map is certainly also conceivable as a support for rally formats, in which, for example, students can discover not only the new university, but also recommendable hot spots of a city together with fellow students in combination with small quizzes.
Create thematic maps
I can also imagine the representation of different processes and procedures in card form. The Preparation of a thesis – from official registration, preferred research and writing locations, and submission options for printed and electronic versions – could also be mapped in the context of the location (and make certain business transactions more traceable) as well as Plant and species trails (get to know the local nature) or Copy shop locations for last minute submission of a final paper. Because the printing of the latter can become quite an expensive fun and it should not occur rarely that depending upon conclusion one day before deadline the next best Copyshop is visited and both financially and service-technically this could be prevented with a simple map (illustration of the Shops with rough price groupings, experiences with the pressure and service offers such as quality and binding consultation).
Create common maps
From a student’s perspective, uMap certainly also offers numerous interesting possibilities to improve university life together. For example, a map with favorite places to learn, cultural tips, or locations of sustainable transportation options (for example, "city bike locations," "electric scooter offerings," etc.) should be created for the most practical journey to the campus. For joint editing – as already described in point 18 of the short tutorial – the corresponding setting in the menu "Change permissions and editors" (right menu bar, key symbol) is only necessary, so that the map can be edited by all or selected persons. Every person who has access authorization can enrich locations with markers and provide them with descriptions. It is also possible that all participants can really change or add to all markers (i.e. not only their own). This function can also be used without an account, so that joint continuation stories can also be created. In my study there was for example an exercise unit in the range "technical English", with which all Kursteilnehmer:innen could select themselves an article and then one after the other and with one another from these articles a common history should form.
In summary
With uMap different types of maps can be created individually. In addition to site plans, for example, thematic maps can also be individually designed in this way. Apart from some described ideas, there are also changing sources of inspiration on the uMap website with the section "LASS DICH INSPIRIEREN…". A look at a map on the topic of COVID, for example, triggered in my mind (not least because of the combination of language barrier and display format), in addition to the ideas above, the mental run-through of a map showing election results by region (not really uncommon), while heatmap options such as in this map could certainly be used for mapping particulate pollution or other citizen science projects.
Have you already used uMap or now at least have a slight headache, what kind of content can be implemented and mapped with the help of uMap or interactive maps in general? Whether favorite places, event maps or completely different ideas – feel free to share your ideas, discoveries or own maps via the comment function.