Beautiful Thematic Maps in Leaflet with Automatic Data Classification
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
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 | 10.5446/68421 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
| |
Keywords |
FOSS4G Europe 2024 Tartu4 / 156
6
33
35
53
55
59
61
67
70
87
97
99
102
103
104
105
107
111
121
122
123
124
125
126
127
128
134
144
150
151
155
00:00
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
06:26
Computer-assisted translationComputer animation
Transcript: English(auto-generated)
00:01
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.
00:22
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,
00:40
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
01:03
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
01:20
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.
01:40
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.
02:00
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,
02:21
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
02:41
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,
03:02
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,
03:21
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,
03:41
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
04:03
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,
04:22
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.
04:42
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,
05:02
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.
05:23
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
05:45
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
06:02
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
06:23
and you can play with it if you are interested. Thank you for listening.