Get started with Vite and MapTiler SDK JS
In this tutorial, you’ll learn how to add a map using MapTiler SDK JS to your TypeScript app. Together we will make a simple fullscreen map application as an example of how to use MapTiler maps together with Vite for your own app.
By the end of this tutorial, you will be able to create a full-screen map.
Getting started
Minimal requirements for completing this tutorial.
-
Basic Vite knowledge. You don’t need a lot of experience using Vite for this tutorial, but you should be familiar with basic concepts and workflow.
-
MapTiler API key. Your MapTiler account access key is on your MapTiler Cloud account page or Get API key for FREE.
-
MapTiler SDK JS. JavaScript library for building web maps. In this tutorial, you will learn how to install it.
-
Node.js and npm. Necessary to run your Vite app locally. Node.js
Create an app
In this step, we are going to learn how to create a Vite app.
To create a new Vite project, run in your command-line:
npm create vite@latest my-vite-map -- --template vanilla-ts
Navigate to the newly created project folder my-vite-map
cd my-vite-map
Inside the newly created project folder, run npm install to install the dependencies.
To start your local environment, run npm run dev. You will find your app running on address http://localhost:5173/.
Now you should see the app in your browser.
Installation and setting up
To install MapTiler SDK JS library, navigate to your project folder and run the command:
npm i @maptiler/sdk
Change the moduleResolution from bundler to node in the tsconfig.json file.
Navigate to the src folder and replace all the contents of the style.css file with the following lines:
html,
body {
margin: 0;
}
#app {
width: 100vw;
height: 100vh;
}
Replace all the contents of the main.ts file with the following lines:
import '@maptiler/sdk/dist/maptiler-sdk.css';
import './style.css';
import { config, Map } from '@maptiler/sdk';
function init() {
const container = document.getElementById('app');
if (!container) throw new Error('There is no div with the id: "map" ');
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({ container });
console.log('The map instance', map);
}
init();
Here you will need to replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
With everything done up until now, you should be able see your beautiful map in your browser.
Once the application is finished, you can export the project for production.
npm run build
Conclusion
Congratulations! You have finished your simple fullscreen map app using Vite + TypeScript. You can explore more about MapTiler SDK JS for your map in the MapTiler SDK JS API reference.
Useful links
Learn more
Check the more than 100 examples that we have prepared so that you can see the possibilities that the SDK offers. It offers easy terrain, built-in styles, language switching, geocoding, TypeScript power, optional IP geolocation, etc.