--- title: "Map data visualization with MapTiler | Guides | Map design" description: "Create circle, heatmap, and choropleth visualizations in MapTiler." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Map data visualization with MapTiler This tutorial shows how to create three different types of **data visualizations** in MapTiler: **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. ## 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 account’s [Maps section](https://cloud.maptiler.com/maps/stage/). To view all the variants of the Dataviz map, click on the **NEW MAP** button and switch to the Simple category. ![dataviz.png](./13042728912785_b1509edacd.webp) 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. ![dataviz-light.png](./13042732048017_182ebee5fc.webp) 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 [Data section](https://cloud.maptiler.com/data/). You can either start drawing by hand **from scratch** or **upload your prepared data**. Supported formats for the upload include GeoJSON, GPX, KML, or zipped SHP. The file size limit is 10 MB with 10 000 features. For larger datasets, you should use [MapTiler Engine](https://www.maptiler.com/engine/) software to [convert them into **optimized MBTiles**](https://docs.maptiler.com/guides/map-tiling-hosting/data-processing/how-to-create-tiles-from-vector-data). Then you can upload the tiles into your [Tiles section](https://cloud.maptiler.com/tiles/). Another supported container for vector or raster tiles is the GeoPackage format. Once you have your data ready in MapTiler, you can add them to your map in the **Map Designer** tool (access via **Customize** 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](https://earthquake.usgs.gov/). There are many other free sources of cool point data such as Meteorite Landings from [NASA](https://data.nasa.gov/dataset/meteorite-landings) or Global Airports from [HDX](https://data.humdata.org/dataset/global-airports). 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 [GL Style Specification](https://docs.maptiler.com/gl-style-specification/). Expressions can be written in the JSON editor tab (accessible by Alt+E shortcut). This particular piece of code needs to go to the “paint”{} section as “circle-color.” ```json [ "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. This particular expression is a property of “circle-radius”. ```json [ "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. ```json { "paint": { "heatmap-radius": { "stops": [ [1, 5], [7, 25] ] } } } ``` The color scheme is generated **automatically** by MapTiler. 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](https://www.naturalearthdata.com/) or [MapLibre Rwanda provinces](https://maplibre.org/maplibre-gl-js/docs/assets/rwanda-provinces.geojson) dataset. We used example data on the **Mean age of women at first marriage** from EUROSTAT available [here](https://docs.maptiler.com/sdk-js/assets/Mean_age_of_women_at_first_marriage_in_2019.geojson) 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. ```json [ "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](https://docs.maptiler.com/sdk-js/examples/countries-with-own-data/) 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 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](https://docs.maptiler.com/guides/map-design/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](https://cloud.maptiler.com/maps/dataviz-v4/) [How to add a custom dataset or tileset to your map in MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/dataset-upload-formats-and-limits) [How to upload map tiles to MapTiler](https://docs.maptiler.com/guides/map-data/upload-files/) [How to style a choropleth map in the Edit Tool](https://docs.maptiler.com/sdk-js/examples/countries-with-own-data/) [MapTiler Planet Schema](https://docs.maptiler.com/schema/planet/)