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

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.1.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_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
 });

Replace YOUR_MAPTILER_API_KEY_HERE 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_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

<!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.1.0/maptiler-sdk.umd.min.js"></script>
 <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.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_HERE';
 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_HERE 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.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.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_HERE';
    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>