--- 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-beta-4y5.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # How to use the MapTiler SDK JS This example shows the minimal code needed to display a map with [MapTiler SDK JS](https://docs-beta-4y5.pages.dev/sdk-js/): loading the SDK, adding a map container to your page, and initializing the map with an API key. ## 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'; 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` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs-beta-4y5.pages.dev/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"; 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-beta-4y5.pages.dev/sdk-js/examples/default-marker/) Tutorials Learn how to add a default marker to your map. ### [3D terrain map](https://docs-beta-4y5.pages.dev/sdk-js/examples/3d-map/) Tutorials Create and display 3D terrain maps on web pages. ### [Switch from Mapbox](https://docs-beta-4y5.pages.dev/sdk-js/examples/switch-from-mapbox/) Tutorials Guide for migrating from Mapbox GL JS to MapTiler SDK. ### [Switch from MapLibre](https://docs-beta-4y5.pages.dev/sdk-js/examples/switch-from-maplibre/) Tutorials Steps to switch from MapLibre GL JS to MapTiler SDK.