MapTiler Cloud API Tutorial gratuiti per API ( wladimirszczerban )

MapTiler Cloud API

GRATIS

Da Wladimir Szczerban | Aggiornamento 2 months ago | Mapping

Popolarità

5.8 / 10

Latenza

147ms

Livello di servizio

100%

Health Check

N/A

Torna a tutti i tutorial (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