Exemples of Thematic Web Maps, with code explanation
based on MapLibreGL

MapLibre GL is a community led fork derived from mapbox-gl-js prior to their switch to a non-OSS license.

Overview of Thematic Web Map Types

There are many ways to represent data on a map. Here we present some examples of the most popular thematic maps on the Web

Dot Maps

Choropleth Maps

Graduated Symbol Maps

Heatmaps

Cluster Maps

3D Maps

    Basic Map   

A basic Web Map consists of a base map (vector tiles), it allows you to move and zoom and even add an interactive marker !

Basic Web Map


Code on Gitlab

Web Map with menu to change Basemap style


Code on Gitlab

A dot distribution map, or dot density map, is a type of thematic map that uses a point symbol to visualize the geographic distribution of a large number of related phenomena. Dot maps rely on a visual scatter to show spatial patterns, especially variances in density.

Code on Gitlab

    Choroplet Map   

A choropleth map of pre-defined areas is colored or patterned in proportion to a statistical variable that represents an aggregate summary of a geographic characteristic within each area, such as population density or per-capita income.

Code on Gitlab

    Graduated Symbol Map   

A Graduated (or Proportional) symbol map is a type of Thematic map that uses map symbols that vary in size to represent a quantitative variable. For example, circles may be used to show within the map the population of each city.

Classical Graduated symbol map


Code on Gitlab

Colored Graduated symbol map


Code on Gitlab

    Heatmap   

A heatmap is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions. The variation in color may be by hue or intensity, giving obvious visual cues to the reader about how the phenomenon is clustered or varies over space.

Code on Gitlab

    Cluster Map   

Our map clustering algorithm looks for markers that are near each other and replaces them with another icon to represent multiple markers. That icon will be labeled by default with the number of markers it contains, but can optionally be used to show the average or sum of specific data

Basic Cluster Map


Code on Gitlab

Cluster thematic Map


Code on Gitlab

    3D Map   

A 3D Map allows you to express your data using three axes: length, width, and height, which can give your maps greater impact. Prism Maps are a type of 3D map in which the height of the geography correlates to a specific value so that the greater the value, the higher the height of the geography.

3D Map based on Grid Population


Code on Gitlab

3D Map based on buildings


Code on Gitlab

3D Choropleth Map


Code on Gitlab

    Other Maps   

MaplibreGL can be used to produce multiple other types of Web Maps, such as Animated Maps, Swipe Maps, Sync Maps, or Web Maps displaying WMS services

Swipe Map


Code on Gitlab

Animated Map


Code on Gitlab

Web Map with externals WMS sources


Code on Gitlab

MapLibre with menu and legend


Code on Gitlab

    The Project    

At the intersection of Spatial Data Science and Urban Planning, the GEOVIZ-URBA research program aims to study community practices in terms of urban data (geo)visualization and to make a prospective of (potential) uses through experimentation.

The project is supported by the Human Sciences Institute in Brittany & Rennes 2 University

All Web Maps on this Website based on MapLibreGL.js. The open-source fork of Mapbox GL JS: Interactive maps in the browser, powered by vector tiles and WebGL.

The syntaxes (HTML / CSS / JavaScript) of each Web Map are commented on and available on a dedicated Gitlab page.

All spatial data of the Web Maps produced by public actors (IGN, INSEE, Ville de Paris,...) and available in opendata.
They can be downloaded in this Github page.