1 Introduction

For more than 25 years, approaches of audiovisual map design have been discussed in cartography (e.g., Brauen 2014; Dickmann 2001; Kraak and Ormeling 2010; Krygier 1994; MacEachren 2004; Müller et al. 2001; Schiewe 2015; Schito and Fabrikant 2018; Taylor and Lauriault 2001; Tyner 2014). Thanks to digital visualization techniques that have become part of the mass media market, many sophisticated approaches have been made so far to show the thematic applications and methods of cartography including sound (Edler et al. 2019).

In terms of applications of audiovisual maps, several examples exist that are related to spatially oriented neighboring disciplines of cartography, such as environmental sciences (Brauen 2011; Scharlach 2002; Weninger 2015), history (Kersten et al. 2018; Pulsifer et al. 2007), tourism (Laakso and Sarjakoski 2010), video and computer gaming (Edler and Dickmann 2016, 2017; Grimshaw 2014; Nitsche 2008), teaching of foreign languages (Edler and Dodt 2010; Lammert-Siepmann et al. 2011), geology (Helmuth and Davis 2004), landscape research (Edler et al. 2018), and geography (Brauen and Taylor 2008; Edler et al. 2015; Siekierska and Armenakis 2007). Other examples focus on the topic of geographic data representation based on auditory map features (Ballatore et al. 2018; Fisher 1994; Schito and Fabrikant 2018). In addition, some examples of audiovisual maps were specifically designed for experimental research focused on cognitive user behavior in represented audiovisual environments (Hruby 2019; Lammert-Siepmann et al. 2014, 2017; Siepmann et al. 2019). However, compared to maps that only communicate through the visual dimension, the body of maps including auditory map elements is still small today (Dickmann 2018). The main variants of audio elements established in multimedia cartography are abstract sounds or sound sequences (as already suggested by Krygier 1994), music, speech recordings, and audiorealistic compositions simulating the “soundscape” (Schafer 1977) at a specific location of the real environment (Brauen 2014; Dodt et al. 2017; Edler et al. 2012).

In terms of methodological and technical considerations, audiovisual maps had commonly been created with proprietary software for quite a long time, such as Macromedia (later: Adobe) Flash (e.g., Feringa 2001; Lienert et al. 2012; Muehlenhaus 2018). These software solutions allowed the connection between a media library (incl. audio file formats, such as mp3) and a graphical user interface to create multimedia products. The exported media (.swf-files) could be implemented into websites, and common browsers (linked with a Flash Player plug-in) were—and still are—able to present these files.

The growing use of the World Wide Web caused new demands for its core technologies, incl. the programming language JavaScript (see also Stefanakis 2015). These developments gave a new boost for the rise of open-source solutions in web cartography. Based on specific JavaScript libraries, professional and 'homebrew' cartographers have got new alternatives to create modern interactive and multimedia (audiovisual) maps (e.g., Crickard III 2014; Peterson 2015; Tsou et al. 2017). The implementation based on modern scripting languages is nowadays easy to use and often coupled with open access.

At present, one of the most popular open-source JavaScript libraries is leaflet.js (see also Brambilla et al. 2017; Donohue et al. 2013; Farkas 2017; Muehlenhaus 2013; Peterson 2014a). The first version of the library was originally developed in 2010 and released in 2011. The project was initiated by the software engineer and open-source enthusiast Vladimir Agafonkin. The overall aim of this project was to create an open source JavaScript API for users interested in building interactive and multimedia web mapping applications for common desktop and mobile browsers. The API was designed to work with the worldwide open data and VGI project OpenStreetMap (OSM). The library uses HTML5 and CSS3. It is known to support mobile mapping very well (Peterson 2014b).

In debates on open-source based cartography, the JavaScript library leaflet.js is known to convince through its simplicity. A couple of workflow steps, an organizing HTML5 structure, a dynamic and accurate base map, a few JavaScript code blocks, and some geolocated data (based on leaflet elements), linked to style parameters in CSS3, are required to create simple, but professional interactive web maps with high performance. Modern HTML elements offer straightforward default procedures to implement multimedia elements, such as audio files or videos. These options bring new potentials and data sources to modern web-based audiovisual cartography.

This paper is understood as a compact contribution documenting a very simple and transferrable workflow to create audiovisual web maps based on the current opportunities related to the JavaScript library leaflet.js. The workflow presented in the following chapter is limited to the drawing options of georeferenced standard geometries with leaflet.js. Options to implement the open geodata format GeoJSON, which is often associated with leaflet.js (e.g. Mearns 2015), are not considered in this article. The application of this workflow is possible in the field of private, administrative, and academic cartography.

2 The Simplicity Offered by leaflet.js: Creating a Modern Audiovisual Map in a Few Steps

This chapter sums up the main steps that are required to create an audiovisual web mapping application with leaflet.js. The examples created in the following include auditory map symbols (mp3 files and streamed online videos) which represent famous beach areas and their atmosphere in Rio de Janeiro, Brazil. The cartographic sound variant used is music (for further information on the use of music in cartography, see Théberge 2005).

2.1 Structuring a Project/Folder

To make use of pre-written JavaScript structures for an easier development of interactive web maps, it is essential to link a new HTML website with a JavaScript library, such as leaflet.js. The library leaflet.js has an up-to-date website (https://leafletjs.com/, last access: 01 Feb 2019) and offers download opportunities for the latest stable release (see Fig. 1). A compressed data package (.zip file) can be downloaded and the unzipped data are suitably structured. It is highly recommendable to copy the unzipped data into a folder (e.g., “script”) which is stored in the same folder as an HTML index page (see Fig. 2). The index page can be created with a common source code editor, such as the free editors NotePad++ (used in the following) or Atom.

Fig. 1
figure 1

Download options on the leaflet.js website

Full size image
Fig. 2
figure 2

Data and folder structure of a simple leaflet project

Full size image

2.2 Creating a Basic HTML5 Structure

Before adding cartographic objects to a map project, the HTML index page should get a suitable structure. The page usually begins with a <!DOCTYPE html> declaration, which is an instruction to the web browser about the HTML version which the page is based on. The declaration is the default—and only—declaration in HTML5 (see also West 2013).

The HTML page is based on the several “elements” having particular purposes. The code in this example includes main elements: <html>, <head> and <body> (see Fig. 3). These main components further contain other elements, such as <title>. Most elements are composed of two so-called “tags”, a start tag (e.g. <html>) and a subsequent end tag (</html>). Both tags shape a frame allowing specific contents and structures. The <html> element is the ‘origin’ of an HTML document. It contains all the other elements, except the DOCTYPE declaration. The <head> element contains some overall information about the page, such as a title (see <title> element) and a specification of the character encoding (e.g., Unicode UTF-8) for the document (see <meta> charset attribute). The <head> also manages the embedding of the leaflet.js library and the leaflet style sheet (CSS) document. This is first based on a <script> src attribute, incl. a relative path to the source location of the external library file. Second, <link> rel attribute connects the index page to the external CSS file.

Fig. 3
figure 3

HTML5 structure—index page incl. links to leaflet.js and leaflet.css files

Full size image

The <body> element usually contains the content that should be presented in the browser window. If a JavaScript library is involved, the <body> element usually contains a <script> element which is used to define client-side scripting statements in JavaScript. It is the fundamental element to create animated and interactive map content and to integrate multimedia.

2.3 Loading a Base Map

The HTML structure presented before is a base for the inclusion of cartographic contents. In a next step, a ‘virtual container’ can be defined on the browser page which receives visual details in the following steps, such as JavaScript tasks or styles in CSS. In HTML, divisions and sections are made with <div> elements. The <div> element is given an ID, and the size of both dimensions (width and height) in a 2D extent is defined. The example used in this paper contains a div in a square format (Fig. 4).

Fig. 4
figure 4

Defining a div element and loading a tile layer provided by OpenStreetMap (OSM)

Full size image

The defined div is further linked with an element of the leaflet library: L.map. This core element of the API is used to load and manipulate basemaps or other (thematic) layers as tile layers. It involves the definition of a location where the initial map screen is centered. This view is based on decimal degrees (latitude, longitude). The pair of geographic coordinates can be taken from common user-friendly and map-based web services, such as http://geojson.io (last access: 01 Feb 2019), or using a GIS. Moreover, a zoom level is defined matching standardized and numbered options, from 0 (small) to 19 (large scale). A zoomable range can additionally be determined using the minZoom and maxZoom options. An ‘unwrapping’ of the (OSM) world map leads to a continuous—and from a cartographer’s perspective: confusing—base of neighboring world maps (see an example illustration in Fig. 5). This can be avoided by changing the Boolean variable of the noWrap option (by default: false) to true. The user could also restrict the extent of a map using and adjusting the maxBounds option, which would bounce the user back if attempts are made to pan outside the defined extent. In any case, the required credits ought to be given to the map data providers/contributors using the attribution option (Fig. 4). Figure 6 illustrates the initial screen when launching the current html index page in the Mozilla Firefox web browser (Fig. 4). An up-to-date list of provided tile layers that goes beyond the standard OSM service can be found here: https://leaflet-extras.github.io/leaflet-providers/preview/ (last access: 01 Feb 2019).

Fig. 5
figure 5

The map on a low zoom level if noWrap option is not activated (default status, Map data © OpenStreetMap contributors)

Full size image
Fig. 6
figure 6

The first screen of the map when launching the html page (Fig. 4)

Full size image

2.4 Adding Individual Geodata

Having set up the structure and code of a located and zoomed base map, individual content can be added. To highlight specific locations in the map, cartographers can make use of the L.marker element. This element displays clickable (also draggable) point symbols, such as the blue and shadowed leaflet default marker. To add a marker, the geographic coordinates (decimal degrees) of a location are required (see also Fig. 4). The method addTo() is used to add the marker as a layer to the map. Figure 7 shows example code how to add two markers to a base map (see Fig. 8). The markers are located at two Rio de Janeiro beach areas, Copacabana and Ipanema.

Fig. 7
figure 7

Adding point symbols to the map using the L.marker element

Full size image
Fig. 8
figure 8

The web map incl. marker objects

Full size image

The options provided by the leaflet library also offer the changing of the default marker. To do so, cartographers may use their custom image (raster or vector) files and implement them as point symbols into the project. A recommendable tutorial hosted on the leaflet website contains a workflow how to do it practically: https://leafletjs.com/examples/custom-icons/ (last access: 01 Feb 2019).

The library also enables to draw other typical geometries. The L.polyline and L.polygon elements were specifically prepared to add the corresponding lines and areas to the map projects. In contrast to the L.marker element, the other two elements require an array of coordinate pairs. Based on these pairs and their order, the lines and polygons are interpolated (Euclidean distances between the anchoring locations). Based on the style options, typical graphical parameters, such as fill and stroke color, opacity, and stroke width, can be defined and changed. Figure 9 gives a code example for a leaflet polygon object (see further Crickard III 2014).

Fig. 9
figure 9

Using the L.polygon object to draw and style a polygon object

Full size image

2.5 Adding Interactivity and Multimedia Contents

A simple and user-friendly way of adding multimedia elements to already drawn map symbols (see chapter 2.4) is using the standard popup window. The popup works with all the fundamental geometries, and can be bound to L.marker, L.polyline, and L.polygon elements. A popup can be added based on the bindPopup() method. Having added a popup, it can be activated by left-clicking on the object. By adding the openPopup() method, the corresponding popup will be activated in the initial screen of the map, which may be a proper tool to guide the map user and to highlight specific locations in the map. The multimedia content is implemented and organized inside the round brackets.

To embed audio files and other media, cartographers can use the HTML <iframe> element. This element specifies an inline frame and allows to define a relative path (source) to the storage location of an audio file. In HTML5, there are three supported formats, i.e., mp3, wav, and ogg. In addition, the <iframe> element has several other attributes, such as a specification of the width and height in pixels and a border around an iframe. Figure 10 includes code examples showing how to add mp3 files to markers. These mp3 files are songs related to the Copacabana and Ipanema leisure areas. The files are accompanied by short and bold texts providing information about interpret and title. Both media, audio and text, are part of a bound popup window. Figure 11 gives a visual impression of the map when audio content is played in an activated popup. An alternative way of integrating sound is using the possibilities of the HTML <audio> element (see https://www.w3schools.com/HTML/html5_audio.asp, last access: 01 Feb 2019).

Fig. 10
figure 10

Implementing mp3 files into iframe elements within a popup bound to a marker

Full size image
Fig. 11
figure 11

Playing an audio file in a popup

Full size image

Other examples of modern media bringing sound to a map are videos of video hosting services, such as youtube.com. The videos which uploaded there can be watched on YouTube itself, it can also be shared via links (on social media or blogging pages, e.g. Facebook, Twitter, and Tumblr). Another option is embedding a URL of a YouTube video into an <iframe> element. This can be achieved by right clicking on a YouTube video and selecting the option “Copy embedded code”, or using the embed option in the “share” menu, which is currently available below each YouTube video frame. The copied code is prepared for being pasted into HTML5 websites. It is also compatible with the leaflet bindPopup method. If the code is pasted into the round brackets, the leaflet-based web map displays the streamed YouTube video in a popup window. It may occur that iframe parameters, such as height and width, have to be adjusted. The authors would like to recommend the pixel values 300 (width) and 200 (height) as a suitable format to embed video files for web mapping applications used on a common desktop.

Of course, it is also highly important to consider copyright restrictions. YouTube also offers some videos which are offered to be shared without strict copyright licenses. Moreover, embedding YouTube videos in general should be legally permissible, as long as these videos are legally uploaded to YouTube and refer to the original YouTube source. In times of growing open (geo)data initiatives, one could argue that such sharable videos whose content has a clear geographical reference extend the range of available data. Figure 12 contains example code showing how to embed a music video into a bound popup (Fig. 13).

Fig. 12
figure 12

Adding YouTube songs (videos) to bound popup windows

Full size image
Fig. 13
figure 13

Playing an audiovisual YouTube video in a popup

Full size image

3 Summary

For more than 2 decades, cartographers have dealt with the exploration of audio files as a cartographic design element used to communicate spatial information (see Brauen 2014; Edler et al. 2019; Krygier 1994). Without having a standardized and empirically verified set of rules recommending how to use sound and its variants in (thematic) cartography (cf. Edler et al. 2012; Schiewe 2015), the field of multimedia cartography has got new technical methods to create audiovisual maps over the time. These technical developments have massively influenced the opportunities to create and spread these maps.

For a long time, multimedia cartography, incl. web-based multimedia cartography, was methodically handled with techniques offered by proprietary animation software products, such as Adobe Flash (e.g., Lienert et al. 2012; Muehlenhaus 2018; Siepmann et al. 2019). The general availability of the Internet as well as the rising demand for mobile devices required a rethinking of making maps that are accessible for individual user-purposes (see also Fish and Calvert 2016; Hurtig and Scharlach 2018). The flexibility of JavaScript and its customizable (open source) ‘library system’ allowed establishing new cartographic web tools.

Earlier JavaScript libraries, especially OpenLayers (see Gratier et al. 2015), coupled web mapping with JavaScript coding and professional cartography, thus, creating a new consciousness for web-based multimedia cartography. The library leaflet.js has gained worldwide popularity in a short time (see also Brambilla et al. 2017; Donohue et al. 2013). It enjoys the reputation of being simple to handle and easy to use and adopt. It becomes obvious that cartographers and the cartography-interested online community are currently interested to get more and more familiar with this new simple open-source option to create web-based multimedia cartographic applications, incl. audiovisual elements.

This article has given a compact and easy to follow overview of some current opportunities to integrate modern audio data files into open-source web mapping applications. The workflow presented is based on the widely spread JavaScript library leaflet.js, which uses the structures of HTML5 and CSS3 and which is particularly designed for (mobile-friendly) web and multimedia cartographic purposes.

The selected workflow steps might have pointed to the simplicity offered by leaflet.js, thanks to its pre-written elements used to imbed cartographic media, such as tile layers, standard geometries, interactive popups, and individual multimedia contents. Having set up a working project, cartographers can easily apply their structures to new similar projects. The programming code which has to be changed is narrowed down to just a few key components.