code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY' , center: [ 7.66 , 45.98 ], zoom: 12 , pitch: 60 , bearing: - 20 , maxPitch: 85 }); map. addControl ( new maplibregl. NavigationControl ()); map. on ( 'load' , () => { map. addSource ( 'terrain-dem' , { type: 'raster-dem' , url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY' , tileSize: 256 }); map. setTerrain ({ source: 'terrain-dem' , exaggeration: 1.5 }); map. addLayer ({ id: 'sky' , type: 'sky' , paint: { 'sky-type' : 'atmosphere' , 'sky-atmosphere-sun' : [ 0 , 90 ], 'sky-atmosphere-sun-intensity' : 15 } }); }); 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://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" /> < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script type = "module" > import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs' ; const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY' , center: [ 7.66 , 45.98 ], zoom: 12 , pitch: 60 , bearing: - 20 , maxPitch: 85 }); map. addControl ( new maplibregl. NavigationControl ()); map. on ( 'load' , () => { map. addSource ( 'terrain-dem' , { type: 'raster-dem' , url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY' , tileSize: 256 }); map. setTerrain ({ source: 'terrain-dem' , exaggeration: 1.5 }); map. addLayer ({ id: 'sky' , type: 'sky' , paint: { 'sky-type' : 'atmosphere' , 'sky-atmosphere-sun' : [ 0 , 90 ], 'sky-atmosphere-sun-intensity' : 15 } }); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import maplibregl from 'maplibre-gl' ; import 'maplibre-gl/dist/maplibre-gl.css' ; const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY' , center: [ 7.66 , 45.98 ], zoom: 12 , pitch: 60 , bearing: - 20 , maxPitch: 85 }); map. addControl ( new maplibregl. NavigationControl ()); map. on ( 'load' , () => { map. addSource ( 'terrain-dem' , { type: 'raster-dem' , url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY' , tileSize: 256 }); map. setTerrain ({ source: 'terrain-dem' , exaggeration: 1.5 }); map. addLayer ({ id: 'sky' , type: 'sky' , paint: { 'sky-type' : 'atmosphere' , 'sky-atmosphere-sun' : [ 0 , 90 ], 'sky-atmosphere-sun-intensity' : 15 } }); }); const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [7.66, 45.98],
zoom: 12,
pitch: 60,
bearing: -20,
maxPitch: 85
});
map.addControl(new maplibregl.NavigationControl());
map.on('load', () => {
map.addSource('terrain-dem', {
type: 'raster-dem',
url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY',
tileSize: 256
});
map.setTerrain({ source: 'terrain-dem', exaggeration: 1.5 });
map.addLayer({
id: 'sky',
type: 'sky',
paint: { 'sky-type': 'atmosphere', 'sky-atmosphere-sun': [0, 90], 'sky-atmosphere-sun-intensity': 15 }
});
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" />
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs';
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [7.66, 45.98],
zoom: 12,
pitch: 60,
bearing: -20,
maxPitch: 85
});
map.addControl(new maplibregl.NavigationControl());
map.on('load', () => {
map.addSource('terrain-dem', {
type: 'raster-dem',
url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY',
tileSize: 256
});
map.setTerrain({ source: 'terrain-dem', exaggeration: 1.5 });
map.addLayer({
id: 'sky',
type: 'sky',
paint: { 'sky-type': 'atmosphere', 'sky-atmosphere-sun': [0, 90], 'sky-atmosphere-sun-intensity': 15 }
});
});
</script>
</body>
</html> import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [7.66, 45.98],
zoom: 12,
pitch: 60,
bearing: -20,
maxPitch: 85
});
map.addControl(new maplibregl.NavigationControl());
map.on('load', () => {
map.addSource('terrain-dem', {
type: 'raster-dem',
url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY',
tileSize: 256
});
map.setTerrain({ source: 'terrain-dem', exaggeration: 1.5 });
map.addLayer({
id: 'sky',
type: 'sky',
paint: { 'sky-type': 'atmosphere', 'sky-atmosphere-sun': [0, 90], 'sky-atmosphere-sun-intensity': 15 }
});
});
