How to use the MapTiler SDK JS

This tutorial shows how to create a map and display it on a web page using MapTiler Cloud.

  1. Create a basic HTML file.

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

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

  4. 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%;
 }

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

  6. Install the npm package.

  7. 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%;
 }

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

  9. Include the CSS file.

    If you have a bundler that can handle CSS, you can import the CSS from @maptiler/sdk/dist/maptiler-sdk.css.

    Including it with a <link> in the head of the document via the CDN is the simplest and easiest way to provide the CSS.

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

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

  11. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

An extension of MapLibre GL JS