How to use the MapTiler SDK JS

This example shows the minimal code needed to display a map with MapTiler SDK JS: loading the SDK, adding a map container to your page, and initializing the map with an API key.

NPM module setup

Install the npm package.
```
 npm install --save @maptiler/sdk
```

Create the map style. Add the map style to your stylesheet. The div must have non-zero height.


 body { 
   margin: 0;
   padding: 0;
 }

 #map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
 }

Create a <div> element with a certain id where you want your map to be.

Add <div> tag into your page. This div will be the container where the map will be loaded.
```
 <div id="map"></div>
```

Include the CSS file.

If you have a bundler that can handle CSS, you can import the CSS


 import "@maptiler/sdk/dist/maptiler-sdk.css";

or include it with a <link /> in the head of the document via the CDN


 <link href='https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css' rel='stylesheet' />

Finally, load the map with the style. Include the following code in your JavaScript.


 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
 });

Replace YOUR_MAPTILER_API_KEY with your own API key. Make sure to secure the key before you publish it.

Complete source code


npm install --save @maptiler/sdk

main.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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>How to use the MapTiler SDK JS | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

Basic JavaScript setup

Create a basic HTML file.


 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Display a map</title>
   <style>
     body {
       margin: 0;
       padding: 0;
     }
   </style>
 </head>
 <body>

 </body>
 <script>
 </script>
 </html>

Include the MapTiler SDK JS JavaScript and CSS files in the <head> of your HTML file.


 <title>Display a map</title>
 <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
 <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
 <style>

Create a <div> element with a certain id where you want your map to be.

Add <div> tag into your page. This div will be the container where the map will be loaded.
```
 <body>
   <div id="map"></div>
 </body>
```
Create the map style. Add the map style to your stylesheet. The div must have non-zero height.
```
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
```

Finally, load the map with the style. Include the following code in your JavaScript.


 maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY';
 const map = new maptilersdk.Map({
   container: 'map', // container's id or the HTML element in which the SDK will render the map
   style: maptilersdk.MapStyle.STREETS,
   center: [16.62662018, 49.2125578], // starting position [lng, lat]
   zoom: 14 // starting zoom
 });

Replace YOUR_MAPTILER_API_KEY with your own API key. Make sure to secure the key before you publish it.

Complete source code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Display a map</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element in which the SDK will render the map
      style: maptilersdk.MapStyle.STREETS,
      center: [16.62662018, 49.2125578], // starting position [lng, lat]
      zoom: 14 // starting zoom
    });
  </script>
</body>

</html>