Mapes de Mapbox

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Mapbox tenen un servei molt professional de tiles. Es necessita una clau, però aquesta pot ser pública. Aquest és el tipus de mapes que s'utilitzen, per exemple, en el joc:


He provat amb diferents styles:

style: 'mapbox://styles/mapbox/streets-v11'
//style: 'mapbox://styles/mapbox/satellite-v9'
//style: 'mapbox://styles/mapbox/outdoors-v11'
//style: 'mapbox://styles/mapbox/dark-v10'
//style: 'mapbox://styles/mapbox/light-v10'

Pintar el mapa

El codi per pintar el mapa l'he extret de:

script index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapa</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-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>
	mapboxgl.accessToken = 'pk.eyJ1Ijoiam9hbmlsbG8iLCJhIjoiY2tmeTN0cW9kMDNxYzJybWxka2U4c204cCJ9.zYoqym1JO6aMJpzERxYrdQ';
	var map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/mapbox/streets-v11'
		//style: 'mapbox://styles/mapbox/satellite-v9'
		//style: 'mapbox://styles/mapbox/outdoors-v11'
		//style: 'mapbox://styles/mapbox/dark-v10'
		//style: 'mapbox://styles/mapbox/light-v10'
	});
 
	map.on('load', function () {
		map.loadImage(
			'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
			function (error, image) {
				if (error) throw error;
				map.addImage('cat', image);
				map.addSource('point', {
					'type': 'geojson',
					'data': {
						'type': 'FeatureCollection',
						'features': [
							{
								'type': 'Feature',
								'geometry': {
									'type': 'Point',
									'coordinates': [0, 0]
								}
							}
						]
					}
				});
			}
		);
	});
</script>
 
</body>
</html>

creat per Joan Quintana Compte, octubre 2020