Arkiv juni 2018

Mapbox 2

Dette indlæg handler om at få integreret det første kort.

Produktet af mine anstrengelser kan ses på dette link.

Sådan gør du

Når du har lavet dit eget kort (hvilket jeg ikke går ind i her), så sætter du bare de samme informationer ind i dit indlæg, som vi så på i Mapbox 1.

Du tilpasser størrelse hvis du vil, og ændrer linjen med “style:” Style-koden som du skal indsætte, finder du i menuen til højre for dit udgivne kort, nederst Style-URL.

mapbox://styles/peterleth/cjiihhh4j1o7f2spc1c5pzwi3

Embed mit kort

 

Sådan ser embedkoden ud til kortet herover:

<div id=”map” style=”width: 600px; height: 500px;”></div>
<script>
mapboxgl.accessToken = ‘pk.eyJ1IjoicGV0ZXJsZXRoIiwiYSI6IlNxTXAxUDQifQ.UM1geS2_ruBR4ujHVUGL3g’;
var map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://styles/peterleth/cjiihhh4j1o7f2spc1c5pzwi3’
});
</script>

Mapbox (1)

Jeg logger ind på Mapbox.com.

Mødes med “Kom godt i gang” – efter to klik står jeg ved følgende kode:

<script src=‘https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js’></script>
<link href=‘https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css’ rel=‘stylesheet’ />
Den har jeg nu kopieret – er gået ind på netop denne side og har indsat det i html-editoren. (og nu i blogindlægget, sådan at du kan følge min proces.

På trin to får jeg følgende kode, som skal sættes ind på blogindlægget.

<div id=‘map’ style=‘width: 400px; height: 300px;’></div>
<script>
mapboxgl.accessToken = ‘pk.eyJ1IjoicGV0ZXJsZXRoIiwiYSI6IlNxTXAxUDQifQ.UM1geS2_ruBR4ujHVUGL3g’;
var map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://styles/mapbox/streets-v10’
});
</script>
Så langt så godt.
Indlæg nr. 2 skal handle om at få lavet et kort.