# Introduksjon til Mapbox
---
## Enkelt webkart
### Import av javascript-bibliotek og css
```html
```
script-taggen sørger for å gjøre Mapbox-biblioteket tilgjengelig, mens link-taggen importerer CSS-kode som brukes av Mapbox. Begge disse taggene skal stå i *head*-delen av html-filen.
### accessToken
Når du har registrert deg hos Mapbox, kan du hente ut et *acessToken* fra denne siden:
- [Access Tokens](https://account.mapbox.com/access-tokens/)
Dette settes inn i starten av script-taggen.
```html
```
Script-taggen skal stå i *body*-delen av html-dokumentet.
### Map
Les beskrivelsen for Map-objektet her:
- [Map](https://docs.mapbox.com/mapbox-gl-js/api/#map)
Legg merke til setningen *Extends Evented*. Dette betyr at Map-objektet er en utvidelse av objektet *Evented*. Se mer om dette nedenfor.
Map-objektet knyttes til en variabel, her *map*, men dette navnet kan bestemmes helt fritt. Videre, så initieres Map-objektet med noen opsjoner. Av disse må *container* og *style* alltid være med. Det er svært vanlig å ha med opsjonene *center* og *zoom* i tillegg.
Eksempel tatt fra denne siden:
- [Mapbox GL JS overview](https://docs.mapbox.com/mapbox-gl-js/overview/)
```html
```
## Events
Evented-objektet har som en "Instance Member" funksjonen *on*. Denne funksjonen gjør følgenede:
> Adds a listener to a specified event type (se [on](https://docs.mapbox.com/mapbox-gl-js/api/#evented#on)).
on-funksjonen har to parametre:
- _type_, som angir hvilken type event den skal følge med på.
- _listener_, som angir en funksjon som skal kalles når eventet oppstår.
Map-objektet har en lang rekke mulige event-typer som kan brukes til å initiere en aktivitet (et funksjonskall). Et av disse mulige eventene er *[load](https://docs.mapbox.com/mapbox-gl-js/api/#map.event:load)*. Load er beskrevet slik:
> Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.
### Hvordan skrive kode som kjøres når et *event* inntreffer?
Vi kan f.eks. bruke funksjonen *on* og eventtypen *load* og skrive en melding til konsollet i nettleseren slik:
```javascript
map.on('load', function (){
console.log("Eventet 'load' ble *avfyrt*.")
})
```
For å se denne meldingen trykker du *F12* og velger *console*-fanen.
### Oppgave
1. Hent inn et komplett eksempel i nettleseren og kopier koden til en fil som du lagrer lokalt på egen PC:
- [mapbox-mini.html](mapbox-mini.html)
(bruk Ctrl + U for å se koden for siden i nettleseren)
2. Bytt ut eventtypen *load* med en annen type event, og se om det blir skrevet ut noe når eventet inntreffer. Mulige eventtyper finner du under dokumentasjonen for Map-objektet i API-dokumentasjonen.
3. Se kode-eksempel i forelesningsnotat fra tirsdag denne uken, og skriv ut avgrensingen av kartet i nord, sør, øst og vest.
4. Ut fra det du nå har sett, og ved hjelp av API-dokumentasjonen: skriv ut zoom-nivået kartet er på når du er ferdig med å zoome.
5. Test ut funksjonen både med å scrolle og ved å dobbeltklikke i kartet. Er det noen forskjell på disse to?
##
*NTNU 08.01.2021 Sverre Stikbakke*