Map data visualization with MapTiler Cloud

Map design Custom data visualization

This collection of articles presents a suggested workflow for creating Custom data visualizations.

1. Creating a custom vector dataset (GeoJSON)
2. Data sources
3. Replacing data sources
4. Replacing name label
5. Editing JSON
6. Map data visualization with MapTiler Cloud
7. Preparing gridded raster data for visualization
8. How to add MapTiler attribution to a map

This tutorial shows how to create three different types of data visualizations in MapTiler Cloud: Circles, Heatmaps, and Choropleth. As a background for your data, we recommend using the MapTiler Dataviz map style created specifically for data visualization, data overlay, analytics, or dashboard use cases.

You need to have a MapTiler Cloud account. If you don’t have one yet, don’t hesitate to sign up for free!

MapTiler Dataviz Basemap

MapTiler Dataviz is a simple background map style for data visualization. You can find it listed as a Standard map in your MapTiler Cloud account’s Maps section. To view all the variants of the Dataviz map, click on the NEW MAP button and switch to the Simple category.

There are two other variants of the Dataviz map - Dark and Light. The Dark mode is based on black and dark grey colors. It’s a perfect choice for usage in dark user interfaces or during night hours. The Light mode uses a pared-down color palette based on light greys and pure white colors. Both style variants won’t distract the map users so they can focus on your data.

All Dataviz variants are optimized for data overlay. There is a focus on boundaries and place names across the zooms but other than that, the map contains only a minimum amount of information. This way your visualizations won’t be disrupted but your users will still benefit from the much-needed geographical context.

Data Overlay

You can use your own datasets in various formats in the MapTiler Cloud Data section. You can either start drawing by hand from scratch or upload your prepared data. Supported formats for the upload include GeoJSON, GPX, KML, SHP, or zipped SHP. The file size limit is 5 MB with 5000 features.

For larger datasets, you should use MapTiler Engine software to convert them into optimized MBTiles. Then you can upload the tiles into your Tiles section. Another supported container for vector or raster tiles is the GeoPackage format.

Once you have your data ready in MapTiler Cloud, you can add them to your map in the Customize tool (access via Customize a copy button under your map). Go to the Layer tab, click on the “Plus” button and choose adding a layer. You can move the newly created layer in the Verticality tab to change the layer order in your map. For most cases, we recommend aligning your data directly under the labels.

Circles Dataviz

For the Circles data visualization, we are using a modified point dataset of Earthquakes from USGS. There are many other free sources of cool point data such as Meteorite Landings from NASA or Global Airports from HDX. When adding the data as a layer to your map, be sure to select a circle visualization. Color is based on the magnitude value of the point varying from 6 to 0.5. We are using the case expression below.

You can adjust the expressions from this example or write your own based on the MapLibre GL JS Style specification. Expressions can be written in the JSON editor tab (accessible by Alt+E shortcut).

[  
 "case",  
 [">", ["get", "mag"], 6],  
 ["literal", "hsl(0,0%,0%)"],  
 [">", ["get", "mag"], 5],  
 ["literal", "hsl(351,100%,51%)"],  
 [">", ["get", "mag"], 4],  
 ["literal", "hsl(277.2,94.7%,14.7%)"],  
 [">", ["get", "mag"], 3],  
 ["literal", "hsl(300,79.4%,19%)"],  
 [">", ["get", "mag"], 2],  
 ["literal", "hsl(319,83%,36%)"],  
 [">=", ["get", "mag"], 1.5],  
 ["literal", "hsl(310,95%,50%)"],  
 [">=", ["get", "mag"], 1],  
 ["literal", "hsl(311, 100%, 73%)"],  
 [">=", ["get", "mag"], 0.5],  
 ["literal", "hsl(312, 100%, 83%)"],  
 ["literal", "hsl(312, 100%, 91%)"]  
]

You can also adjust the Opacity and Stroke color of the circles. The circle size depending on the magnitude value is achieved with the interpolate expression varying based on the zoom level.

[  
 "interpolate",  
 ["linear"],  
 ["zoom"],  
 0,  
 ["*", 1, ["get", "mag"]],  
 12,  
 ["*", 10, ["get", "mag"]]  
]

Now you have your Circle map ready. With the use of Dataviz as a basemap, there are no map features disturbing your data but your users can still see the cities most affected by earthquakes.

Heatmap Dataviz

We are using the same modified Earthquakes datasets for the Heatmap as well. This time, you need to select a heatmap visualization when adding the data as a layer. You can adjust the Radius, Weight, Intensity, and Opacity of your heatmap. In this example, we have the Radius set to 5 from zoom 1, and to 25 from zoom 7. The Opacity is 0.5. The remaining parameters have default settings.

{  
 "paint": {  
   "heatmap-radius": {  
      "stops": [  
        [1, 5],  
        [7, 25]  
      ]  
    }  
  }  
}

The color scheme is generated automatically by MapTiler Cloud. And by that, your Heatmap is ready to be used.

Choropleth Dataviz

For the Choropleth, you can use various polygon datasets available for free such as Natural Earth or MapLibre Rwanda provinces dataset. We used example data on the Mean age of women at first marriage from EUROSTAT available here as a GeoJSON. When adding your data to the map, you have to select the Polygon visualization to color the polygons based on your data attributes. In this example, we used the get an expression that works with the name of your attribute.

[  
 "interpolate",  
 ["linear"],  
 ["get", "age"],  
 23,  
 "#FFFFFF",  
 24,  
 "#FCE622",  
 25,  
 "#B0DD2D",  
 26,  
 "#5ECA60",  
 27,  
 "#24AA82",  
 28,  
 "#228B8D",  
 29,  
 "#355F8C",  
 30,  
 "#472A7A"  
]

Feel free to play with the Country labels’ colors to ensure they are visible on the Choropleth. You can adjust the Color, Opacity, or the Halo around them.

You can also follow our Choropleth tutorial and use MapTiler Countries as a source dataset.

Conclusion

The MapTiler Dataviz map is the perfect match for the data visualization use cases. As shown above, you can create various visualizations of your own custom data with MapTiler Cloud atop this map. Integrate it seamlessly into your data dashboards or applications and enjoy the minimalistic background emphasizing your spatial data.

Next steps

Continue to Preparing gridded raster data for visualization to learn how to select and prepare raster data for use in a data visualization created with the MapTiler SDK and weather module.

Useful Links

MapTiler Dataviz Map
How to add a custom dataset or tileset to your map in MapTiler Cloud
How to upload map tiles to MapTiler Cloud
How to style a choropleth map in the Edit Tool
MapTiler Planet Schema