---
title: "Maps SDK with TypeScript | JavaScript maps SDK"
description: "Create maps using TypeScript for type safety and completion."
---

# Maps SDK with TypeScript

Create a map using the SDK based on TypeScript. Benefit from features like code completion, type safety, accurate documentation, and backward compatibility. Save time on your project by reducing typos and mistakes. No need to worry about changes to API endpoints and how they may affect your code.

Choose from a wide range of bundlers to find the best solution for your project. Whether you prefer [Parcel](https://parceljs.org/), [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Turbopack](https://turbo.build/pack), or any other bundler, you have plenty of options to choose from.

1.  Install the npm package.
    
    ```bash
    npm install --save @maptiler/sdk
    ```
    
2.  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.
    
    ```html
    <div id="map"></div>
    ```
    
3.  Include the following code in your TypeScript `main.ts` file.
    
    ```js
    import { config, Map, MapOptions } from '@maptiler/sdk';
    
     import "@maptiler/sdk/dist/maptiler-sdk.css";
    
     config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    
     const options: MapOptions = {
       container: document.getElementById("map") as HTMLElement, // container's id or the HTML element in which SDK will render the map
     }
    
     // Instanciating a map
     const map: Map = new Map(options);
    ```
    
4.  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/credentials/api-key/#secure-key) before you publish it.
    
5.  Create the map containter style. Add the map containter style to you stylesheet `style.css`. The div must have non-zero height. In this case we are going to make a fullscreen map.
    
    ```css
    body { margin: 0; padding: 0; }
    
     #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    ```
    

Check out the tutorial [How to create a map with TypeScript and Parcel](#).

1.  Install bundler and build tools. This tutorial will use Parcel because it supports TypeScript out of the box without any additional configuration.
    
    ```bash
    npm i -D parcel-bundler typescript
    ```
    
2.  Create the TypeScript config file.
    
    ```bash
    npx tsc --init
    ```
    
3.  Update the package.json scripts. Create the `dev` and `build` scripts.
    
    ```json
    "scripts": {
          "dev": "parcel src/index.html",
          "build": "parcel build src/index.html"
        },
    ```
    
4.  Create a `src` folder and inside this forder create 3 files: `index.html`, `main.ts`, and `style.css`.
5.  Copy the following code, paste it into `index.html` file. The `<div id="map">` will be the container where the map will be loaded.
    
    ```html
    <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MapTiler SDK JS with TS</title>
          <link rel="stylesheet" href="./style.css">
          <script src="./main.ts" defer></script>
        </head>
        <body>
          <div id="map"></div>
        </body>
        </html>
    ```
    
6.  Create the map container style. Add the map container style to you stylesheet `style.css`. The div must have non-zero height. In this case we are going to make a fullscreen map.
    
    ```css
    body { margin: 0; padding: 0; }
    
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    ```
    
7.  Include the following code in your `main.ts` file.
    
    ```js
    import { config, Map, MapOptions } from '@maptiler/sdk';
    
        import "@maptiler/sdk/dist/maptiler-sdk.css";
    
        config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    
        const options: MapOptions = {
          container: document.getElementById("map") as HTMLElement, // container's id or the HTML element in which SDK will render the map
        }
    
        // Instanciating a map
        const map: Map = new Map(options);
    ```
    
8.  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/credentials/api-key/#secure-key) before you publish it.
    
9.  Running the dev server. To see the map run the local server. Open a terminal and write.
    
    ```bash
    npm run dev
    ```
    
10.  Now you can see your application opening `http://localhost:1234` in your browser. By default, the map will be initialized with the style [maptilersdk.MapStyle.STREETS](https://www.maptiler.com/maps/#style=streets-v4) and centered on the actual visitor location using the [IP geolocation](https://github.com/maptiler/maptiler-sdk-js#%EF%B8%8F%EF%B8%8F-geolocation) API provided by [MapTiler](https://docs.maptiler.com/cloud/api/geolocation/).

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