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, Webpack, Rollup, Turbopack, or any other bundler, you have plenty of options to choose from.

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

  2. Include the following code in your TypeScript app.ts file.

  3. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

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

Check out the tutorial How to create a map with TypeScript and Parcel.

Related examples

An extension of MapLibre GL JS