Mapmap.js: A Data-Driven Web Mapping API for Thematic Cartography
ISBN 978-85-88783-11-9
Authors
1Ledermann, F.; 2Gartner, G.
1VIENNA UNIVERSITY OF TECHNOLOGY Email: florian.ledermann@tuwien.ac.at
2VIENNA UNIVERSITY OF TECHNOLOGY Email: georg.gartner@tuwien.ac.at
Abstract
Programming an interactive map for the web entails many decisions, and the tools used in the process influence how decisions are made. Tools and APIs that provide a high level of abstraction allow their users to produce a map with a few basic decisions (e.g. defining its geographic extent and resolution), but may limit the level of control of cartographic details. Some aspects may remain opaque to the user, making it unfeasible to modify certain, possibly cartographically relevant, details of the maps produced. Using low-level APIs like D3.js or the APIs exposed by web browsers directly, the decision space is much larger, allowing for greater choice and fine-grained control of cartographic aspects. However, there are many details to be catered for even to produce simple maps, including technical details of the platform like resource loading, DOM modifications or event handling. This can lead to intertwining of different aspects in the code, which obscures the cartographic decisions made, makes the code hard to maintain and may overwhelm novices. Cartography on the web covers a wide range of aspects from loading and transforming data and geometry to rendering, styling, layout and user interaction. A key question is, how can we allow a maximum of choice and control across all of these aspects, while at the same time produce code that clearly highlights cartographic decisions, remains comprehensible, and allows novices to start with simple solutions and gradually refine, maintaining a clear picture of the overall cartographic process? In the paper, we present mapmap.js, our approach to creating a high-level, transparent, horizontal, cartographic API for creating interactive web maps. We define what we mean with the attributes high-level, transparent and horizontal with respect to mapping APIs and why these are desirable qualities. We establish the term "cartographic API" as a more specific subclass of "mapping API" to emphasize APIs designed to represent a cartographic design process, allowing authors to control all aspects mentioned above to produce a map from raw geometry and data. Mapmap.js supports geometry, data and metadata loading and transformation, selection and symbolization of map elements as well as specifying interaction. Mapmap.js follows the principle "Simple things should be simple, complex things should be possible" (Alan Kay). To support this, the API comes with sensible defaults that encapsulate "best practices" found in cartographic literature, but every aspect can be modified down to completely replacing the default implementation. Inspired by D3's API design, most parameters in the mapmap API can be constants (for simple usecases) or functions (allowing for dynamic parameterization), and methods are "chainable" to form concise, natural language-like blocks of code. In this way, an interactive zoomable choropleth map can be implemented in just 6 lines (including initialization, geometry & data loading and transformation, metadata specification and event handler specification), but it is also possible to modify the inner workings of built-in methods or add novel functionality created from scratch. By following these principles - clarity, separation of concerns, deep customization - we hope to contribute towards answering the key question raised above. Mapmap.js is implemented using SVG and D3.js, which means the generated maps can be styled using CSS and extensions can be implemented using D3 as a low-level API. Mapmap works with imperfect data and comes with powerful data transformation tools, and has been successfully used with messy real-world datasets without the need for external preprocessing. We also present a case study, in which mapmap was used to implement an online atlas including diverse thematic maps, as well as report on initial experience with using the mapmap API in teaching web cartography courses.