3D Map

` tag into your page. This div will be the container to display the map. Write the following line into the body of the page. ```html

``` ### Initialize the map Include the MapLibre JavaScript and CSS files in the `` of your HTML file. Add these lines in the `` ```html 3D Map ``` To create a fullscreen map, add the following style in the `` of your page. ```html ``` Inside the ``, write the following code to visualize and add the map to our HTML page. ```html

``` Warning Here you will need to replace **YOUR\_MAPTILER\_API\_KEY** with your [MapTiler API key](https://cloud.maptiler.com/account/keys/). Open the index.html file in your browser, and you will see a full-screen map, like the one shown in the map below. ![full-screen-map.png](./5224349424913_2747c090b7.webp) ## Add 3D terrain to a map Next, we will see how to create a 3D terrain map. To make our 3D map, we will use the elevation data from [MapTiler Terrain RGB](https://cloud.maptiler.com/tiles/terrain-rgb-v2/) To create the 3D map, we must add a new layer. To do this, we must wait until the map resources have been loaded, including the style. Only after this can we add our layers to the map. The `load` event is fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. Add these lines after the map initialization. ```js zoom: 12, }); map.on('load', () => { // Add new sources and layers }); ``` When adding a new layer, the first thing we have to do is define the layer’s data source. Inside the `load` event callback function, write the followings lines. ```js map.on("load", () => { // Add new sources and layers map.addSource("terrain", { type: "raster-dem", url: `https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=${API_KEY}`, }); }); ``` The valid types for the encoding option are: “mapbox”, “mtk” and “terrarium”. To add the terrain layer, we use the `setTerrain` method that receives the id of the data source as a parameter. Add the following line just after where we have added the data source. ```js "maxzoom": 14 }); map.setTerrain({ source: "terrain" }); }); ``` Finally, to see the effect of the 3D of the map, we will give some tilt to the map’s initial view. Add the following line to the maps options. ```js const map = new maplibregl.Map({ container: "map", style: `https://api.maptiler.com/maps/winter-v4/style.json?key=${API_KEY}`, center: [11.40416, 47.26475], zoom: 12, pitch: 70, maxPitch: 85, }); ``` Your `script` should look like this. ```js const API_KEY = "YOUR_MAPTILER_API_KEY"; const map = new maplibregl.Map({ container: "map", style: `https://api.maptiler.com/maps/winter-v4/style.json?key=${API_KEY}`, center: [11.40416, 47.26475], zoom: 12, pitch: 70, maxPitch: 85, }); map.on("load", () => { // Add new sources and layers map.addSource("terrain", { type: "raster-dem", url: `https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=${API_KEY}`, }); map.setTerrain({ source: "terrain", }); }); ``` Refresh the page in your browser and see a 3D map like this one. ![3d-map.png](./5224702644369_c8f349cc9b.webp) Note You can use any of [your maps](https://www.maptiler.com/maps/) and add the [Terrain RGB](https://cloud.maptiler.com/tiles/terrain-rgb/) to see them in 3D. [MapTiler SDK](https://docs.maptiler.com/sdk-js/examples/3d-map/) (which extends MapLibre) makes this a one-line problem! ## Conclusion Congratulations! You have finished your fullscreen 3D map app using MapLibre GL JS. You can explore more about MapLibre GL JS for your map in the [MapLibre API reference](https://docs.maptiler.com/maplibre-gl-js/api-reference/ "https://docs.maptiler.com/maplibre-gl-js/api-reference/"). ## Useful links [API Reference | MapLibre GL JS Docs](https://docs.maptiler.com/maplibre-gl-js/api-reference/) [npm: maplibre-gl](https://www.npmjs.com/package/maplibre-gl) [MapLibre - Open Maps SDKs](https://maplibre.org/) [Customize map design to fit your project – MapTiler](https://www.maptiler.com/cloud/customize/)