Skip to main content

The Simplicity of Modern Audiovisual Web Cartography: An Example with the Open-Source JavaScript Library leaflet.js


Audio files entered cartography about 25 years ago. Since the mid-1990s, several examples of audiovisual maps have been created and published. These maps cover a diverse range of applications. In terms of the sound elements implemented, four characteristic variants were mainly used: abstract sounds/sound sequences, language recordings, and music and recordings/simulations of the real soundscape. To built audiovisual maps technically, several tools of animation software solutions were intensively explored. The rising importance of the World Wide Web also increased the demand for new and modern web-based approaches of multimedia cartography. One of the core technologies of the Internet is the programming language JavaScript (JS). The language is often associated with the so-called libraries which are applied programming packages pre-written for particular purposes. In cartography, one of the most popular and widely used JS libraries is leaflet.js. This open-source library is known for its simplicity and, meanwhile, it also supports a straightforward integration of multimedia content, such as audio files. It also teams up with HTML5 and CSS3. This paper intends to give a workflow focused on how to create individual audiovisual web mapping applications based on the contemporary options offered by leaflet.js.


Moderne audiovisuelle Web-Kartographie einfach gemacht—Ein Beispiel mit der Open Source JavaScript-Bibliothek leaflet.js

Soundelemente werden seit etwa 25 Jahren in der Kartographie eingesetzt. Seit Mitte der 1990er Jahre wurden mehrere Beispiele audiovisueller Karten entwickelt und veröffentlicht. Diese Karten bedienen vielseitige Anwendungen. Unter den eingesetzten Audioelementen haben sich insbesondere vier Ausprägungen durchgesetzt: abstrakte Töne bzw. Tonabfolgen, Sprachaufnahmen, Musik und Aufnahmen bzw. Simulationen der realen Klanglandschaft („Soundscape“). Um audiovisuelle Karten technisch zu erstellen, wurden Werkzeuge einschlägiger Animationssoftware intensiv erkundet. Die zunehmende Bedeutung des Internets erforderte ebenfalls die Nachfrage nach neuen und modernen web-basierten Ansätzen der multimedialen Kartographie. Eine der zentralen Technologien des Internets ist die Programmiersprache JavaScript (JS). Die Sprache unterstützt so genannte Bibliotheken (libraries), die als angewandte Programmierpakete verstanden werden können, die für spezifische Anwendungsfelder vorgefertigt worden sind. In der Kartographie ist derzeit die JavaScript-Bibliothek leaflet.js weit verbreitet. Diese Open-Source-Bibliothek ist bekannt für ihre Unkompliziertheit. Mittlerweile unterstützt sie die einfache Einbindung multimedialer Inhalte, wie bspw. Audiodateien. Sie ist ebenfalls an HTML5 und CSS3 gekoppelt. Dieser Beitrag konzentriert sich auf die Vorstellung eines praxisorientierten Workflows zur Erstellung individueller audiovisueller Webkarten, die auf den aktuellen Möglichkeiten von leaflet.js fußen.


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.

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).

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 (, 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

Fig. 2
figure 2

Data and folder structure of a simple leaflet project

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

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.

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)

The defined div is further linked with an element of the leaflet library: 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 (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: (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)

Fig. 6
figure 6

The first screen of the map when launching the html page (Fig. 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

Fig. 8
figure 8

The web map incl. marker objects

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: (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

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, last access: 01 Feb 2019).

Fig. 10
figure 10

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

Fig. 11
figure 11

Playing an audio file in a popup

Other examples of modern media bringing sound to a map are videos of video hosting services, such as 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

Fig. 13
figure 13

Playing an audiovisual YouTube video in a popup


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.


  • Ballatore A, Gordon D, Boone AP (2018) Sonyfying data uncertainty with sound dimensions. Cartogr Geogr Inf Sci.

    Google Scholar 

  • Brambilla G, Amoretti M, Zanichelli F (2017) Adgt.js: a web application framework for peer-to-peer location-based services. In: Desprez F et al (eds) EUROPAR 2016: parallel processing workshops. Lecture Notes in Computer Science, vol 10104. Springer, Cham

    Google Scholar 

  • Brauen G (2011) Interactive audiovisual mapping: BTEX emissions from NPRI reporting facilities in Montréal. In: Cartwright W, Caquard S, Vaughan L (eds) Mapping environmental issues in the city: arts and cartographic cross perspectives. Springer, Berlin, pp 74–108

    Chapter  Google Scholar 

  • Brauen G (2014) Interactive audiovisual design for cartography: survey, prospects, and example. In: Lauriault T, Taylor DRF (eds) Developments in the theory and practice of cybercartography. Applications and indigenous mapping, 2nd edn. Elsevier, Amsterdam

    Google Scholar 

  • Brauen G, Taylor DRF (2008) Linked audio representation in cybercartography: guidance from animated and interactive cartography for using sound. Revista Brasileira de Cartografia 60(3):223–242

    Google Scholar 

  • Crickard P III (2014) Leaflet.js essentials. Packt Publishing, Birmingham

    Google Scholar 

  • Dickmann F (2001) Web-mapping und web-GIS. Westermann, Braunschweig

    Google Scholar 

  • Dickmann F (2018) Kartographie. Westermann, Braunschweig

    Google Scholar 

  • Dodt J, Bestgen A-K, Edler D (2017) Ansätze der Erfassung und kartographischen Präsentation der olfaktorischen Dimension. Kartographische Nachrichten 67(5):245–256

    Google Scholar 

  • Donohue RG, Sack CM, Roth RE (2013) Time series proportional symbol maps with Leaflet and jQuery. Cartogr Perspect 76:43–66.

    Google Scholar 

  • Edler D, Dickmann F (2016) Interaktive Multimediakartographie in frühen Videospielwelten—Das Beispiel „Super Mario World“. Kartographische Nachrichten 66(2):51–58

    Google Scholar 

  • Edler D, Dickmann F (2017) The impact of 1980s and 1990s video games on multimedia cartography. Cartographica 52(2):168–177.

    Article  Google Scholar 

  • Edler D, Dodt J (2010) Eine audio-visuelle Flash-Applikation zur Fremdsprachenvermittlung. Kartographische Nachrichten 60(5):276–278

    Google Scholar 

  • Edler D, Lammert-Siepmann N, Dodt J (2012) Die akustische Dimension in der Kartographie—eine Übersicht. Kartographische Nachrichten 62(4):185–195

    Google Scholar 

  • Edler D, Jebbink K, Dickmann F (2015) Einsatz audio-visueller Karten in der Schule—Eine Unterrichtsidee zum Strukturwandel im Ruhrgebiet. Kartographische Nachrichten 65(5):259–265

    Google Scholar 

  • Edler D, Kühne O, Jenal C, Vetter M, Dickmann F (2018) Potenziale der Raumvisualisierung in Virtual Reality (VR) für die sozialkonstruktivistische Landschaftsforschung. Kartographische Nachrichten 68(5):245–254

    Google Scholar 

  • Edler D, Kühne O, Keil J, Dickmann F (2019) Audiovisual cartography: established and new multimedia approaches to represent soundscapes. J Cartogr Geogr Inf.

    Google Scholar 

  • Farkas G (2017) Practical GIS. Packt Publishing, Birmingham

    Google Scholar 

  • Feringa W (2001) Appendix A. File formats and plugins. In: Kraak M-J, Brown A (eds) Web cartography. CRC Press, London, pp 181–198

    Google Scholar 

  • Fish CS, Calvert K (2016) Analysis of interactive solar energy web maps for urban energy sustainability. Cartogr Perspect 85:5–22

    Google Scholar 

  • Fisher PF (1994) Hearing the reliability in classified remotely sensed images. Cartogr Geogr Inf Syst 21(1):31–36

    Google Scholar 

  • Gratier T, Hazzard E, Spencer P (2015) OpenLayers3. Get started with OpenLayers3 and enhance your web pages by creating and displaying dynamic maps. Packt Publishing, Birmingham

    Google Scholar 

  • Grimshaw M (2014) Sound. In: Wolf MJP, Perron B (eds) The Routledge companion to video game studies. Routledge, New York, pp 117–124

    Google Scholar 

  • Helmuth M, Davis T (2004) Rock music: a granular and stochastic synthesis based on the Matanuska glacier. In: Proceedings of ICMC 2004: the 30th annual international computer music conference, Miami. Accessed 23 Jan 2019

  • Hruby F (2019) The sound of being there—audiovisual cartography with immersive virtual environments. J Cartogr Geogr Inf (online first)

  • Hurtig T, Scharlach H (2018) NLGA-Map: Web-gestützte thematische Karten mit JavaScript und Leaflet. In: Publikationen der DGPF 27, pp 306–316. Accessed 23 Jan 2019

  • Kersten TP, Deggim S, Tschirwitz F, Lindstaedt M, Hinrichsen N (2018) Segeberg 1600—Eine Stadtrekonstruktion in Virtual Reality. Kartographische Nachrichten 68(4):183–191

    Google Scholar 

  • Kraak M-J, Ormeling F (2010) Cartography. Visualization of spatial data, 3rd edn. Routledge, London

    Google Scholar 

  • Krygier JB (1994) Sound and geographic visualization. In: MacEachren AM, Taylor DRF (eds) Visualization in modern cartography. Elsevier, Oxford, pp 149–166

    Chapter  Google Scholar 

  • Laakso M, Sarjakoski LT (2010) Sonic maps for hiking—use of sound in enhancing the map use experience. Cartogr J 47(4):300–307.

    Article  Google Scholar 

  • Lammert-Siepmann N, Edler D, Redecker AP, Jürgens C (2011) Designing teaching units via WebGIS: remotely sensed imagery in the language classroom. EARSeL eProc 10(2):149–158

    Google Scholar 

  • Lammert-Siepmann N, Edler D, Dickmann F (2014) Die Effekte audiovisueller Informationsvermittlung in Topographischen Karten auf die Behaltensleistung—Das Beispiel geographische Namen. Kartographische Nachrichten 64(6):308–316

    Google Scholar 

  • Lammert-Siepmann N, Bestgen A-K, Edler D, Kuchinke L, Dickmann F (2017) Audiovisual communication of object-names improves the spatial accuracy of recalled object-locations in topographic maps. PLoS One 12(10):e0186065.

    Article  Google Scholar 

  • Lienert C, Jenny B, Schnabel O, Hurni L (2012) Current trends in vector-based internet mapping: a technical review. In: Peterson MP (ed) Online maps with APIs and web services. Springer, Heidelberg, pp 23–36

    Chapter  Google Scholar 

  • MacEachren AM (2004) How maps work. Representation, visualization, and design. Guilford, London

    Google Scholar 

  • Mearns B (2015) QGIS blueprints. Develop analytical location-based web applications with QGIS. Packt Publishing, Birmingham

    Google Scholar 

  • Muehlenhaus I (2013) Web cartography. Map design for interactive and mobile devices. CRC Press, Boca Raton

    Book  Google Scholar 

  • Muehlenhaus I (2018) Internet mapping. In: Kent AJ, Vujakovic P (eds) The Routledge handbook of mapping and cartography. Routledge, London, pp 375–387

    Google Scholar 

  • Müller J-C, Scharlach H, Jäger M (2001) Der Weg zu einer akustischen Kartographie. Kartographische Nachrichten 51(1):26–40

    Google Scholar 

  • Nitsche M (2008) Video game spaces. Image, play, and structure in 3D worlds. MIT Press, Cambridge

    Book  Google Scholar 

  • Peterson GN (2014a) GIS cartography. A guide to effective map design, 2nd edn. CRC Press, Boca Raton

    Google Scholar 

  • Peterson MP (2014b) Mapping in the cloud. Guilford, New York

    Google Scholar 

  • Peterson MP (2015) Evaluating mapping APIs. In: Brus J, Vondrakova A, Vozenilek V (eds) Modern trends in cartography. Selected papers of CARTOCON 2014. Springer, Heidelberg, pp 183–212

    Google Scholar 

  • Pulsifer PL, Caquard S, Taylor DRF (2007) Toward a new generation of community atlases—the Cybercartographic Atlas of Antarctica. In: Cartwright W, Peterson MP, Gartner G (eds) Multimedia cartography, 2nd edn. Springer, Berlin, pp 195–216

    Chapter  Google Scholar 

  • Schafer RM (1977) The soundscape. Our sonic environment and the tuning of the world. Destiny Books, Rochester

    Google Scholar 

  • Scharlach H (2002) Lärmkarten. Kartographische Grundlagen und audiovisuelle Realisierung. PhD thesis, Ruhr University Bochum, Bochum. Accessed 23 Jan 2019

  • Schiewe J (2015) Physiological and cognitive aspects of sound maps for representing quantitative data and changes in data. In: Brus J, Vondrakova A, Vozenilek V (eds) Modern trends in cartography. Selected papers of CARTOCON 2014. Springer, Heidelberg, pp 315–324

    Google Scholar 

  • Schito J, Fabrikant SI (2018) Exploring maps by sounds: using parameter mapping sonification to make digital elevation models audible. Int J Geogr Inf Sci.

    Google Scholar 

  • Siekierska EM, Armenakis C (2007) Territorial evolution of Canada – an interactive multimedia cartographic application. In: Cartwright W, Peterson MP, Gartner G (eds) Multimedia cartography, 2nd edn. Springer, Berlin, pp 117–127

    Chapter  Google Scholar 

  • Siepmann N, Edler D, Dickmann F (2019) A software tool for the experimental investigation of cognitive effects in audio-visual maps. J Cartogr Geogr Inf.

    Google Scholar 

  • Stefanakis E (2015) Web mapping and geospatial web services. CreateSpace Independent, North Charleston

    Google Scholar 

  • Taylor DRF, Lauriault TP (2001) Future directions for multimedia cartography. In: Cartwright W, Peterson MP, Gartner G (eds) multimedia cartography, 2nd edn. Springer, Berlin, pp 502–522

    Google Scholar 

  • Théberge P (2005) Sound maps: music and sound in cybercartography. In: Taylor DRF (ed) Cybercartography: theory and practice. Elsevier, Amsterdam, pp 380–410

    Google Scholar 

  • Tsou M-H, Jung C-T, Allen C, Yang J-A, Han SY, Spitzberg BH, Dozier J (2017) Building a real-time geo-targeted event observation (geo) viewer for disaster management and situation awareness. In: Peterson MP (ed) Advances in Cartography and GIScience. Selections from the International Cartographic Conference 2017. Springer International Publishing, Cham, pp 85–98

    Google Scholar 

  • Tyner B (2014) Principles of map design. Guilford, New York

    Google Scholar 

  • Weninger B (2015) Lärmkarten zur Öffentlichkeitsbeteiligung. Analyse und Verbesserung ausgewählter Aspekte der kartografischen Gestaltung. Ph.D. Thesis, HafenCity University, Hamburg

  • West M (2013) HTML5 foundations. Wiley, Chichester

    Google Scholar 

Download references

Author information

Authors and Affiliations


Corresponding author

Correspondence to Dennis Edler.

Rights and permissions

OpenAccess This article is distributed under the terms of the Creative Commons Attribution 4.0 International License (, which permits unrestricted use, distribution, and reproduction in any medium, provided you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license, and indicate if changes were made.

Reprints and Permissions

About this article

Verify currency and authenticity via CrossMark

Cite this article

Edler, D., Vetter, M. The Simplicity of Modern Audiovisual Web Cartography: An Example with the Open-Source JavaScript Library leaflet.js. KN J. Cartogr. Geogr. Inf. 69, 51–62 (2019).

Download citation

  • Received:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI:


  • Audiovisual cartography
  • Multimedia cartography
  • Web cartography
  • Open-source cartography
  • JavaScript
  • HTML
  • Leaflet
  • OpenStreetMap
  • Copacabana


  • Audiovisuelle Kartographie
  • Multimediakartographie
  • Webkartographie
  • Open-Source-Kartographie
  • JavaScript
  • HTML
  • Leaflet
  • OpenStreetMap
  • Copacabana