This lesson is designed to introduce you to web-based map generation with annotated icons on the map. The annotation is visible by clicking on the icon and the annotation will appear as popup. The annotation is pure HTML so you can add links to other resources to the popup.
Learning Objective[edit | edit source]
At the end of the lesson, you should be able to create a web-based map with Markers4Map that encodes different location as icons with popups on a map. All data is encoded in a link/URL that can be used as link in Wikiversity or Wikipedia.
Creating a web based Map with Icons[edit | edit source]
The following steps describe the basic workflow of
- (Download Demo JSON) First download the file landau_markers4map.json from GitHub (use the browser with "Save As ...")
- (Start Markers4Map) Start the OpenSource tool Markers4Map load the file landau_markers4map.json with (Load) in the tool Markers4Map.
- (Display Map with Icons/Popup) Display the loaded icons on the OpenStreetMap card (Display Map) represents.
- (Change Marker Definition/Popup text) Experiment with Markers4Map and
- change the popup text behind the icons
- change the link for the icons
- create more icons on the map
- remove some icons on the map
- (Save JSON) Save the JSON file to your local file system for further use or if you want to add more icons and popups later.
- (Copy Map Link) Press button to display map and copy the link in the browser that encodes all the information for the markers and the popup text. You can copy and use the link in Wikiversity to display certain information and icons in OpenStreetMap.
Tools[edit | edit source]
- Markers4Map - OpenSource GitHub Tool to create an URL that encodes the geolocation of markers with their pop-ups for OpenStreetMap in OpenLayers
- OpenLayers Display Markers - OpenSource GitHub Tool takes a JSON file as input via URL to display geo-encoded markers with pop-ups for OpenStreetMap Maps in OpenLayers