Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions. To explore the full range of available built-in styles and their variants, please refer to the list of built-in styles
This tutorial provides an overview of the built-in styles available and their implementation in map customization. To illustrate this, we have developed a selector tool that allows effortless modification of the map’s style.
By utilizing the pre-existing styles available in our SDK (maptilersdk.MapStyle), you can benefit from numerous advantages:
Updates to styles: With our built-in styles, any updates made to a particular style will not require you to modify your existing codebase. This ensures that you always have access to the latest version of styles without any hassle.
Simplified usage: Our built-in styles are designed to be easily memorable, eliminating the need for manually typing style URLs. Additionally, you no longer have to include the API key in every URL, streamlining the process even further.
Enhanced code completion: By utilizing the built-in styles, you can leverage code completion features that significantly reduce typos and other common mistakes. This ensures a smoother and more efficient mapping experience.
Each of our built-in styles is specifically tailored for a particular purpose, such as street navigation, outdoor adventure, minimalist dashboards, etc. Furthermore, each style offers a variety of variants* that maintain the same level of information and purpose but differ in terms of color schemes. This allows you to choose the variant that best suits your needs, whether it be a dark or light color scheme, among others.
NPM module setup
Install the npm package.
npm install --save @maptiler/sdk
Include the CSS file.
If you have a bundler that can handle CSS, you can import the CSS
import "@maptiler/sdk/dist/maptiler-sdk.css";
or include it with a <link /> in the head of the document via the CDN
Include the following code in your JavaScript file (Example: app.js).
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 to render the map
style: maptilersdk.MapStyle.STREETS,
center: [2.33174, 48.86245], // starting position [lng, lat]
zoom: 15, // starting zoom
});
The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
Change the map style to a hybrid satellite images.
map.setStyle(maptilersdk.MapStyle.HYBRID);
Create a selector to change the map style. In this example we will use some of the build-in styles. See the full list of styles. Copy the following code into your HTML file.
The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
Change the map style to a hybrid satellite images.
map.setStyle(maptilersdk.MapStyle.HYBRID);
Create a selector to change the map style. In this example we will use some of the build-in styles. See the full list of styles. Copy the following code into your HTML file.
