--- title: "How to use the MapTiler SDK JS | JavaScript maps SDK" description: "This tutorial shows how to create a map and display it on a web page using 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. # How to use the MapTiler SDK JS Learn how to generate and showcase an interactive map on a web page using MapTiler with this comprehensive tutorial. The step-by-step guide will walk you through the entire process. By following these steps, you will be able to harness the power of MapTiler SDK JS to effortlessly develop web mapping applications. Experiment with different map styles, customizations, and functionalities to create an exceptional mapping experience for your web application users. ## NPM module setup 1. Install the npm package. ```bash npm install --save @maptiler/sdk ``` 2. Create the map style. Add the map style to your stylesheet. The div must have non-zero height. ```css body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } ``` 3. Create a `
` element with a certain id where you want your map to be. Add `
` tag into your page. This div will be the container where the map will be loaded. ```html
``` 4. Include the CSS file. If you have a bundler that can handle CSS, you can `import` the CSS ```js import "@maptiler/sdk/dist/maptiler-sdk.css"; ``` or include it with a `` in the head of the document via the CDN ```html ``` 5. Finally, load the map with the style. Include the following code in your JavaScript. ```js import { Map, MapStyle, config } from '@maptiler/sdk'; config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE'; const map = new Map({ container: 'map', // container's id or the HTML element in which SDK will render the map style: MapStyle.STREETS, center: [16.62662018, 49.2125578], // starting position [lng, lat] zoom: 14 // starting zoom }); ``` 6. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it. ### Complete source code ```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", // container's id or the HTML element in which the SDK will render the map style: MapStyle.STREETS, center: [16.62662018, 49.2125578], // starting position [lng, lat] zoom: 14, // starting zoom }); ``` #### index.html ```html How to use the MapTiler SDK JS | NPM example
``` #### style.css ```css body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } ``` ## Basic JavaScript setup 1. Create a basic HTML file. ```html Display a map ``` 2. Include the MapTiler SDK JS JavaScript and CSS files in the `` of your HTML file. ```html Display a map
``` ## Related examples ### [Display marker](https://docs.maptiler.com/sdk-js/examples/default-marker/) Tutorials Learn how to add a default marker to your map. ### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/) Tutorials Create and display 3D terrain maps on web pages. ### [Switch from Mapbox](https://docs.maptiler.com/sdk-js/examples/switch-from-mapbox/) Tutorials Guide for migrating from Mapbox GL JS to MapTiler SDK. ### [Switch from MapLibre](https://docs.maptiler.com/sdk-js/examples/switch-from-maplibre/) Tutorials Steps to switch from MapLibre GL JS to MapTiler SDK.