Tutoriales gratuitos de la API de MapTiler Cloud API wladimirszczerban )

MapTiler Cloud API

GRATIS

Por Wladimir Szczerban | Actualizada 2 месяца назад | Mapping

Popularidad

5.8 / 10

Latencia

147ms

Nivel de servicio

100%

Health Check

N/A

Volver a todos los tutoriales (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.

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>

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

How to use the JavaScript Maps API

More tutorials