---
title: "Create a 3D choropleth map of Europe with countries extruded | JavaScript maps SDK"
description: "Create 3D choropleth map with extruded country polygons."
---
> 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.
# Create a 3D choropleth map of Europe with countries extruded
This map of Europe presents a 3D choropleth map representation, where countries are visually extruded based on data provided by an external dataset. The fill-extrusion-height paint property is employed to assign data-driven values to the polygons of different countries within the fill-extrusion layer.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
zoom: 3,
center: [19.43, 49.49],
pitch: 60,
style: MapStyle.BASE,
hash: false
});
map.on('load', function () {
map.addSource('countries', {
'type': 'geojson',
'data': 'https://docs.maptiler.com/sdk-js/assets/Mean_age_of_women_at_first_marriage_in_2019.geojson',
});
map.addLayer(
{
'id': 'eu-countries',
'source': 'countries',
'type': 'fill-extrusion',
'paint': {
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'age'],
23.0,
'#fff5eb',
24.0,
'#fee6ce',
25.0,
'#fdd0a2',
26.0,
'#fdae6b',
27.0,
'#fd8d3c',
28.0,
'#f16913',
29.0,
'#d94801',
30.0,
'#8c2d04'
],
'fill-extrusion-opacity': 1,
'fill-extrusion-height': ['*', ['get', 'age'], 5000]
}
}, 'Airport labels'
);
//Hide country borders for better visualization
map.setLayoutProperty('Other border', 'visibility', 'none');
map.setLayoutProperty('Disputed border', 'visibility', 'none');
map.setLayoutProperty('Country border', 'visibility', 'none');
});
```
#### index.html
```html
Create a 3D choropleth map of Europe with countries extruded | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Create and style clusters
```
## Related examples
### [Polygon layer (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-minimal/)
Examples
Add minimal polygon layer using MapTiler polygon helper.
### [Choropleth GeoJSON](https://docs.maptiler.com/sdk-js/examples/choropleth-geojson/)
Tutorials
Create a styled choropleth map using a GeoJSON overlay.
### [Choropleth legend](https://docs.maptiler.com/sdk-js/examples/control-legend-choropleth/)
Tutorials
Implement an interactive legend control for a choropleth map.
### [GeoJSON multiGeometry layer](https://docs.maptiler.com/sdk-js/examples/geojson-multigeometry/)
Tutorials
Add a GeoJSON MultiGeometry overlay to your map application.