Maps SDK with TypeScript
Create a map with the TypeScript-based SDK. Take advantage of code completion, type safety, accurately documented, and backward compatibility. Get your project done faster with fewer typos and mistakes, no more worrying about API endpoint changes and their impact on your code.
You can pick from a large selection of bundlers and always find the best solution for your project. Whether you prefer Parcel, Webpack, Rollup, Turbopack or anything else
-
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. -
Include the following code in your TypeScript
app.tsfile. -
Replace
YOUR_MAPTILER_API_KEY_HEREwith your actual MapTiler API key. -
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.
-
Install bundler and build tools. This tutorial will use Parcel because it supports TypeScript out of the box without any additional configuration.
-
Create the TypeScript config file.
-
Update the package.json scripts. Create the
devandbuildscripts. -
Create a
srcfolder and inside this forder create 3 files:index.html,app.ts, andstyle.css. -
Copy the following code, paste it into
index.htmlfile. The<div id="map">will be the container where the map will be loaded. -
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. -
Include the following code in your
app.tsfile. -
Replace
YOUR_MAPTILER_API_KEY_HEREwith your actual MapTiler API key. -
Running the dev server. To see the map run the local server. Open a terminal and write.
- 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 and centered on the actual visitor location using the IP geolocation API provided by MapTiler Cloud.
