Mapes de Mapbox
La revisió el 23:47, 17 oct 2020 per Joan (discussió | contribucions) (Es crea la pàgina amb «__TOC__ =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...».)
Contingut
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
