We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Beautiful Thematic Maps in Leaflet with Automatic Data Classification

00:00

Formal Metadata

Title
Beautiful Thematic Maps in Leaflet with Automatic Data Classification
Title of Series
Number of Parts
156
Author
License
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
With the web being a platform that provides lots of features and a high degree of customizability for creating web maps, web-based thematic maps still require expertise to visualize geospatial data in a way that highlights spatial differences in an exact and cartographically comprehensive way. While most thematic maps show data with seven or less classes, as determined by (Linfang and Liqiu, 2014), the maker of a thematic map must choose a class count and classify quantitative data to properly convey their message through the map. Data classification methods all have advantages and disadvantages for specific spatial data types, therefore choosing the most optimal method is of great importance to minimize information loss (Osaragi, 2002). Choosing an optimal class count massively helps the map user to quickly comprehend thematic data and discover relevant spatial differences. With a plethora of visual variables, summarized by (Roth, 2017), there are many ways to distinguish classes of features in geovisualization. For styling features, mapping libraries provide tools to make use of only a few visual variables natively. A thematic map requires a specific symbology tailored to the given data, which distinguishes classes by altering one or more of these visual variables for their symbols. While its symbology needs to be legible and visually separated from the background map, it also needs to be created in a way that does not overload the map visually. The popular open source web mapping framework Leaflet lacks a straightforward approach to create thematic maps with all basic principles that they should adhere to (data classification, automatic symbology and legend generation). In the paper, features and shortcomings of Leaflet in the context of thematic mapping are examined in detail. First, Leaflet lacks any kind of native data classification process that would be needed to create discrete classes of data for thematic maps. Therefore, using GIS software beforehand to classify and style the dataset properly (to get class boundaries and exact colours) is inevitable. Second, for symbology, although it makes use of modern web standards like HTML5 and CSS3 to style vector map features (Agafonkin, 2023), it still lacks styling solutions that are common in traditional thematic cartography (e.g., hatch fill patterns), as discussed in (Gede, 2022). As a thematic map requires some kind of explanation of visualized data, the presence of a descriptive, well-formed legend with exact symbols for all data classes is non-trivial either. Although various tutorials and workarounds are available, those only solve part of the principles. The examples provided by the official website of Leaflet are hard-coded and static, meaning that they will have to be recreated for each specific thematic map, making them unsuitable for implementation in a dynamic data visualization. Moreover, these workarounds are complex to accomplish, especially for those who are not familiar with programming to an extent to be able to code visually pleasing thematic maps on websites. As a solution, this paper introduces a highly customizable, open source plugin for Leaflet, developed by the author, which extends Leaflet's GeoJSON class and combines all processes required for creating a thematic map in a single step. By combining all the necessary processes, this easy-to-use extension is a solution that wraps the individual processes of quantitative data classification, symbology and creation of an appealing legend. The extension puts an emphasis on providing numerous options for a highly customizable visualization. It supports well-known data classification methods, custom and Brewer colour ramps as defined by (Brewer et al., 2003), symbol colour-, size- and hatch fill pattern-based distinctions, HTML legend row templating, legend class order, data manipulation options, and many other features. For maps with graduated symbol sizes, it generates widths between user-adjustable min-max sizes. For point features, the symbol shape can also be changed to predefined SVG shape symbols. Data manipulation options include normalization by a secondary attribute field in dataset, rounding generated class boundary values and visually modifying them by applying division or multiplication (to easily change unit of displayed value). In case the input GeoJSON dataset has features without data for the set attribute field (null/nodata), these features are handled to optionally form a separate class with a neutrally styled symbol. Should the map maker wish to ignore these nodata features, they can be ignored, therefore not showing up on the map as a distinguished class. As it is an extension of a native L.geoJSON layer, multiple instances of L.dataClassification layers can also still be used within a single Leaflet map object. This allows for more complex thematic maps with multiple layers or different kinds of data with a different symbology type at the same time (e.g., a combination of a choropleth background map, with graduated symbol sized points as a second layer in the foreground). Since a legend is automatically generated and displayed for each instance, they are linked to the respective data layer, therefore it inherits all methods that are called on the layer (e.g., if the map maker uses remove() to programmatically remove the layer for some reason, the related legend also reflects these changes). Even though the legend is created with a clear and concise style by default, legend styling can easily be customized with the provided options and CSS definitions. As one of the goals, the plugin facilitates the easy creation of clean thematic maps using exclusively open source software and libraries, with the hope of increasing the availability, accessibility and popularity of such thematic mapping on the web. The extension is still under development, and is available on GitHub (with examples).
Keywords
127
Fluid staticsTexture mappingVisualization (computer graphics)Computer programmingComplex (psychology)Process (computing)Perspective (visual)Sign (mathematics)Menu (computing)RadiusCircleShape (magazine)Motion blurFunction (mathematics)Knowledge-based configurationComputer configurationAdditionAttribute grammarLemma (mathematics)Motif (narrative)QuantileEquals signScale (map)Standard deviationLetterpress printingLibrary catalogInformationNumbering schemeCountingComplexity classBoundary value problemSymbol tablePoint (geometry)Line (geometry)Pattern languagePolygonNatural numberMiniDiscAverageArithmetic meanAreaDatabase normalizationVotingClique-widthAsynchronous Transfer ModeVideo gameProduct (business)Default (computer science)Interactive televisionPlug-in (computing)Message passingAttribute grammarComplexity classObject (grammar)Web pageWeb 2.0Process (computing)Texture mappingGraph coloringComputer programmingMappingSet (mathematics)MereologySlide rulePlug-in (computing)Database normalizationTerm (mathematics)CountingSoftwarePattern languageClique-widthProduct (business)Sampling (statistics)Point (geometry)Context awarenessDegree (graph theory)Free variables and bound variablesLine (geometry)Different (Kate Ryan album)Symbol tableBitLibrary (computing)Visualization (computer graphics)Multiplication signFluid staticsRaw image formatField (computer science)Closed setTemplate (C++)PolygonInteractive televisionPSPACEWebsiteComputer configurationFormal languageInternationalization and localizationLecture/ConferenceMeeting/InterviewComputer animationSource code
Computer-assisted translationComputer animation
Transcript: English(auto-generated)
So, hello everyone. I'll try to be quick, or wait for lunch for some time now. So, let's talk about something different, data visualization on the web, web.js. So, Leaflet, I think, is quite known in this community.
So, in the context of thematic mapping, of course, we can create thematic maps in any kind of library. This time, Leaflet has been chosen for various reasons. Thematic mapping requires some expertise, expertise,
to create a product that is legible, and then it has some requirements, or basic principles. Leaflet lacks a straightforward approach to create thematic maps that adhere to these principles. There are some tutorials on the Leaflet's official website, but they are quite basic
and static in terms of hard, they are hard-coded. Oops, can I go back? They are hard-coded with the classes and values. So, what do we do currently in Leaflet
if we want to create a thematic map? Of course, we have to classify it somehow. Maybe we launch QGIS and any kind of software and classify our data. We also have to do it, the symbology beforehand. So, we have the classes, the exact values, and the symbology for them.
And also, we have to have a legend for the interactive web map. So, we have to code some in HTML and CSS to have a good-looking legend. As a solution, we introduced a plugin for this that combines all the three processes.
So, we just use some GOGs and data with quantitative attributes. We create the layer based on this. Of course, we have some settings that we can choose and set that define the whole classification method and the symbology things. And also, it generates a legend automatically,
so we don't have to mess with that. In the end, we have a final map object that's presentable and looks great, basically. These are all the options. It's not the main point. Only three are required, of course. The classification method we want to use, the class count we want to classify the features in, and the attributes field
that the classification is based on. So, some of the features, just quickly. It has three main dependencies, ChromaJS for core-related things. It uses simple static stitch JS for some of the classification methods. And if we use hatch field patterns,
then we have to use the leaflet hatch class plugin developed by the co-author of this paper, Mike Yashgheda. So, the goal is to provide an easy way of creating maps with a very high degree of customization. It supports all the well-known classification methods,
and we can also use our own classes if we want to just leverage the symbology and legend features of the plugin. We can do data normalization on the fly if we use raw data or values in the attributes. It handles no data features as well, so it either creates a different class for them,
or we just omit them. It supports some methods of distinction. So, for points, we can use symbol, color, and size to distinguish between classes. For lines, of course, line color, and also width. And for polygons, we can operate with fill color
and also the hatch pattern fills that I mentioned with the leaflet hatch class plugin. It also supports class-bounder rounding to make the legend just a little bit more clearer, and we can also use a complete,
you can customize the legend with templates, placeholders. So, this opens for internationalization, and we can basically create any kind of map that's in any language or so. So, just quickly, some examples created with this plugin.
These are just sample data sets, so these are points distinguished by color and symbol size. These are lines, again, based on color and line width. I think it's quite cool to create some of these maps,
especially for river discharge, the width. For polygons, these are both distinguished by fill colors. And as I mentioned, it also supports hatch fills. That's the more interesting or traditional part of cartography.
This map is created with that. So, just a quick summary. In performance, it's detailed in the paper, but it's quite fast. I don't think I have to go into detail. So, this plugin just allows creation
of great-looking thematic maps that are cartographically comprehensive, even for users who have no programming knowledge or cartographic knowledge. Yeah, and hopefully, this plugin facilitates the creation
of appealing thematic maps, web maps, for various purposes, let it be scientific or not. So, that's a closing slide. You can find this on GitHub, of course. You can find all the example pages there on GitHub pages
and you can play with it if you are interested. Thank you for listening.