Abstract
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.
Zusammenfassung
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.
Similar content being viewed by others
Avoid common mistakes on your manuscript.
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.
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.
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).
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).
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.
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).
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).
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).
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.
References
Ballatore A, Gordon D, Boone AP (2018) Sonyfying data uncertainty with sound dimensions. Cartogr Geogr Inf Sci. https://doi.org/10.1080/15230406.2018.1495103
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
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
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
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
Crickard P III (2014) Leaflet.js essentials. Packt Publishing, Birmingham
Dickmann F (2001) Web-mapping und web-GIS. Westermann, Braunschweig
Dickmann F (2018) Kartographie. Westermann, Braunschweig
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
Donohue RG, Sack CM, Roth RE (2013) Time series proportional symbol maps with Leaflet and jQuery. Cartogr Perspect 76:43–66. https://doi.org/10.14714/CP76.1248
Edler D, Dickmann F (2016) Interaktive Multimediakartographie in frühen Videospielwelten—Das Beispiel „Super Mario World“. Kartographische Nachrichten 66(2):51–58
Edler D, Dickmann F (2017) The impact of 1980s and 1990s video games on multimedia cartography. Cartographica 52(2):168–177. https://doi.org/10.3138/cart.52.2.3823
Edler D, Dodt J (2010) Eine audio-visuelle Flash-Applikation zur Fremdsprachenvermittlung. Kartographische Nachrichten 60(5):276–278
Edler D, Lammert-Siepmann N, Dodt J (2012) Die akustische Dimension in der Kartographie—eine Übersicht. Kartographische Nachrichten 62(4):185–195
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
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
Edler D, Kühne O, Keil J, Dickmann F (2019) Audiovisual cartography: established and new multimedia approaches to represent soundscapes. J Cartogr Geogr Inf. https://doi.org/10.1007/s42489-019-00004-4
Farkas G (2017) Practical GIS. Packt Publishing, Birmingham
Feringa W (2001) Appendix A. File formats and plugins. In: Kraak M-J, Brown A (eds) Web cartography. CRC Press, London, pp 181–198
Fish CS, Calvert K (2016) Analysis of interactive solar energy web maps for urban energy sustainability. Cartogr Perspect 85:5–22
Fisher PF (1994) Hearing the reliability in classified remotely sensed images. Cartogr Geogr Inf Syst 21(1):31–36
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
Grimshaw M (2014) Sound. In: Wolf MJP, Perron B (eds) The Routledge companion to video game studies. Routledge, New York, pp 117–124
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. http://marahelmuth.com/research/RockMusicFinalFinal.pdf. 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. https://www.dgpf.de/src/tagung/jt2018/proceedings/proceedings/papers/108_PFGK18_Hurtig_Scharlach.pdf. 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
Kraak M-J, Ormeling F (2010) Cartography. Visualization of spatial data, 3rd edn. Routledge, London
Krygier JB (1994) Sound and geographic visualization. In: MacEachren AM, Taylor DRF (eds) Visualization in modern cartography. Elsevier, Oxford, pp 149–166
Laakso M, Sarjakoski LT (2010) Sonic maps for hiking—use of sound in enhancing the map use experience. Cartogr J 47(4):300–307. https://doi.org/10.1179/000870410X12911298276237
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
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
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. https://doi.org/10.1371/journal.pone.0186065
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
MacEachren AM (2004) How maps work. Representation, visualization, and design. Guilford, London
Mearns B (2015) QGIS blueprints. Develop analytical location-based web applications with QGIS. Packt Publishing, Birmingham
Muehlenhaus I (2013) Web cartography. Map design for interactive and mobile devices. CRC Press, Boca Raton
Muehlenhaus I (2018) Internet mapping. In: Kent AJ, Vujakovic P (eds) The Routledge handbook of mapping and cartography. Routledge, London, pp 375–387
Müller J-C, Scharlach H, Jäger M (2001) Der Weg zu einer akustischen Kartographie. Kartographische Nachrichten 51(1):26–40
Nitsche M (2008) Video game spaces. Image, play, and structure in 3D worlds. MIT Press, Cambridge
Peterson GN (2014a) GIS cartography. A guide to effective map design, 2nd edn. CRC Press, Boca Raton
Peterson MP (2014b) Mapping in the cloud. Guilford, New York
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
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
Schafer RM (1977) The soundscape. Our sonic environment and the tuning of the world. Destiny Books, Rochester
Scharlach H (2002) Lärmkarten. Kartographische Grundlagen und audiovisuelle Realisierung. PhD thesis, Ruhr University Bochum, Bochum. http://www-brs.ub.ruhr-uni-bochum.de/netahtml/HSS/Diss/ScharlachHolger/diss.pdf. 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
Schito J, Fabrikant SI (2018) Exploring maps by sounds: using parameter mapping sonification to make digital elevation models audible. Int J Geogr Inf Sci. https://doi.org/10.1080/13658816.2017.1420192
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
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. https://doi.org/10.1007/s42489-019-00005-3
Stefanakis E (2015) Web mapping and geospatial web services. CreateSpace Independent, North Charleston
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
Théberge P (2005) Sound maps: music and sound in cybercartography. In: Taylor DRF (ed) Cybercartography: theory and practice. Elsevier, Amsterdam, pp 380–410
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
Tyner B (2014) Principles of map design. Guilford, New York
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
Author information
Authors and Affiliations
Corresponding author
Rights and permissions
OpenAccess This article is distributed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), 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.
About this article
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). https://doi.org/10.1007/s42489-019-00006-2
Received:
Accepted:
Published:
Issue Date:
DOI: https://doi.org/10.1007/s42489-019-00006-2
Keywords
- Audiovisual cartography
- Multimedia cartography
- Web cartography
- Open-source cartography
- JavaScript
- HTML
- Leaflet
- OpenStreetMap
- Copacabana