code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ 2.3488 , 48.8534 ], zoom: 15.5 , pitch: 60 , bearing: - 17 , canvasContextAttributes: { antialias: true } }); map. on ( 'load' , () => { const style = map. getStyle (); const src = Object. keys (style.sources). find ( s => map. getSource (s).type === 'vector' ); if ( ! src) return ; // Insert above basemap but below labels so labels stay on top. const labelLayerId = style.layers. find ( l => l.type === 'symbol' && l.layout && l.layout[ 'text-field' ])?.id; map. addLayer ({ id: 'buildings-3d' , type: 'fill-extrusion' , source: src, 'source-layer' : 'building' , minzoom: 14 , filter: [ '!=' , [ 'get' , 'hide_3d' ], true ], paint: { 'fill-extrusion-color' : '#9C27B0' , 'fill-extrusion-height' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 14 , 0 , 16 , [ 'coalesce' , [ 'get' , 'render_height' ], 0 ] ], 'fill-extrusion-base' : [ 'coalesce' , [ 'get' , 'render_min_height' ], 0 ], 'fill-extrusion-opacity' : 0.8 } }, labelLayerId); }); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" /> < script src = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ 2.3488 , 48.8534 ], zoom: 15.5 , pitch: 60 , bearing: - 17 , canvasContextAttributes: { antialias: true } }); map. on ( 'load' , () => { const style = map. getStyle (); const src = Object. keys (style.sources). find ( s => map. getSource (s).type === 'vector' ); if ( ! src) return ; // Insert above basemap but below labels so labels stay on top. const labelLayerId = style.layers. find ( l => l.type === 'symbol' && l.layout && l.layout[ 'text-field' ])?.id; map. addLayer ({ id: 'buildings-3d' , type: 'fill-extrusion' , source: src, 'source-layer' : 'building' , minzoom: 14 , filter: [ '!=' , [ 'get' , 'hide_3d' ], true ], paint: { 'fill-extrusion-color' : '#9C27B0' , 'fill-extrusion-height' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 14 , 0 , 16 , [ 'coalesce' , [ 'get' , 'render_height' ], 0 ] ], 'fill-extrusion-base' : [ 'coalesce' , [ 'get' , 'render_min_height' ], 0 ], 'fill-extrusion-opacity' : 0.8 } }, labelLayerId); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import * as maptilersdk from '@maptiler/sdk' ; import '@maptiler/sdk/dist/maptiler-sdk.css' ; maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ 2.3488 , 48.8534 ], zoom: 15.5 , pitch: 60 , bearing: - 17 , canvasContextAttributes: { antialias: true } }); map. on ( 'load' , () => { const style = map. getStyle (); const src = Object. keys (style.sources). find ( s => map. getSource (s).type === 'vector' ); if ( ! src) return ; // Insert above basemap but below labels so labels stay on top. const labelLayerId = style.layers. find ( l => l.type === 'symbol' && l.layout && l.layout[ 'text-field' ])?.id; map. addLayer ({ id: 'buildings-3d' , type: 'fill-extrusion' , source: src, 'source-layer' : 'building' , minzoom: 14 , filter: [ '!=' , [ 'get' , 'hide_3d' ], true ], paint: { 'fill-extrusion-color' : '#9C27B0' , 'fill-extrusion-height' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 14 , 0 , 16 , [ 'coalesce' , [ 'get' , 'render_height' ], 0 ] ], 'fill-extrusion-base' : [ 'coalesce' , [ 'get' , 'render_min_height' ], 0 ], 'fill-extrusion-opacity' : 0.8 } }, labelLayerId); }); maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3488, 48.8534],
zoom: 15.5,
pitch: 60,
bearing: -17,
canvasContextAttributes: { antialias: true }
});
map.on('load', () => {
const style = map.getStyle();
const src = Object.keys(style.sources).find(s => map.getSource(s).type === 'vector');
if (!src) return;
// Insert above basemap but below labels so labels stay on top.
const labelLayerId = style.layers.find(l => l.type === 'symbol' && l.layout && l.layout['text-field'])?.id;
map.addLayer({
id: 'buildings-3d',
type: 'fill-extrusion',
source: src,
'source-layer': 'building',
minzoom: 14,
filter: ['!=', ['get', 'hide_3d'], true],
paint: {
'fill-extrusion-color': '#9C27B0',
'fill-extrusion-height': [
'interpolate', ['linear'], ['zoom'],
14, 0,
16, ['coalesce', ['get', 'render_height'], 0]
],
'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
'fill-extrusion-opacity': 0.8
}
}, labelLayerId);
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3488, 48.8534],
zoom: 15.5,
pitch: 60,
bearing: -17,
canvasContextAttributes: { antialias: true }
});
map.on('load', () => {
const style = map.getStyle();
const src = Object.keys(style.sources).find(s => map.getSource(s).type === 'vector');
if (!src) return;
// Insert above basemap but below labels so labels stay on top.
const labelLayerId = style.layers.find(l => l.type === 'symbol' && l.layout && l.layout['text-field'])?.id;
map.addLayer({
id: 'buildings-3d',
type: 'fill-extrusion',
source: src,
'source-layer': 'building',
minzoom: 14,
filter: ['!=', ['get', 'hide_3d'], true],
paint: {
'fill-extrusion-color': '#9C27B0',
'fill-extrusion-height': [
'interpolate', ['linear'], ['zoom'],
14, 0,
16, ['coalesce', ['get', 'render_height'], 0]
],
'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
'fill-extrusion-opacity': 0.8
}
}, labelLayerId);
});
</script>
</body>
</html> import * as maptilersdk from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3488, 48.8534],
zoom: 15.5,
pitch: 60,
bearing: -17,
canvasContextAttributes: { antialias: true }
});
map.on('load', () => {
const style = map.getStyle();
const src = Object.keys(style.sources).find(s => map.getSource(s).type === 'vector');
if (!src) return;
// Insert above basemap but below labels so labels stay on top.
const labelLayerId = style.layers.find(l => l.type === 'symbol' && l.layout && l.layout['text-field'])?.id;
map.addLayer({
id: 'buildings-3d',
type: 'fill-extrusion',
source: src,
'source-layer': 'building',
minzoom: 14,
filter: ['!=', ['get', 'hide_3d'], true],
paint: {
'fill-extrusion-color': '#9C27B0',
'fill-extrusion-height': [
'interpolate', ['linear'], ['zoom'],
14, 0,
16, ['coalesce', ['get', 'render_height'], 0]
],
'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
'fill-extrusion-opacity': 0.8
}
}, labelLayerId);
});
