Criar equipeAdicione sua APIDocumentos
Entrar
Inscrever-se

MapTiler Cloud API

GRATUITO
Por Wladimir Szczerban | Atualizado il y a 2 mois | Mapping
Popularidade

5.8 / 10

Latência

147ms

Nível de serviço

100%

Health Check

N/A

Voltar para todos os tutoriais (1)

How to use the JavaScript Maps API

This is the easiest and fastest way to use your MapTiler maps in JavaScript. Simply use the code below the map and replace the text YOUR_MAPTILER_API_KEY_HERE with your MapTiler API KEY.

  1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Display a map</title>
	<script src="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.js"></script>
	<link href="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.css" rel="stylesheet" />
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		#map {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	</style>
</head>
<body>
	<div id="map"></div>
	<script>
			const key = 'YOUR_MAPTILER_API_KEY_HERE';
			const map = new maplibregl.Map({
				container: 'map', // container id
				style: `https://api.maptiler.com/maps/streets/style.json?key=${key}`, // style URL
				center: [16.62662018, 49.2125578], // starting position [lng, lat]
				zoom: 14, // starting zoom
			});
			map.addControl(new maplibregl.NavigationControl(), 'top-right');
	</script>
</body>
</html>

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

More tutorials

Check out all the tutorials on how to use the API to create maps JavaScript Maps API Tutorials