# Bruk av GeoJSON-data i mapbox GL JS og i Mapbox Studio
---
## Oppretting av egne vector tiles i Mapbox Studio
- [Mapbox studio](https://www.mapbox.com/studio/)
- [Tilesets](https://www.mapbox.com/studio/tilesets/)
Tilesets kan opprettes fra flere ulike filformater, deriblant GeoJSON. Se [Read more ..](https://www.mapbox.com/help/define-tileset/). Tilesets kan også opprettes fra [Mapbox Datasets](https://www.mapbox.com/studio/datasets/). Datasettene er redigerbare, men det er begrensing på hvor store filer som kan lastes opp som dataset. (Oblig 3 - oppgavetekst sier at dere skal laste opp som dataset først. Det er ikke nødvendig).
## Oppretting av egen Style i Mapbox Studio
- [Styles](https://www.mapbox.com/studio/)
For å lage en helt ny Style, velg Pick a Template, Start Blank.
## Bruk av egen style
Referansen til egen style hentes fra aktuell style i Mapbox Studio.
```javascript
```
- [Grunnkretser i Oppland](docs/grunnkretser_style)
## Bruk av eget tileset - styling med javascript
```javascript
```
- [Grunnkretser i Oppland - fra vector tiles](docs/grunnkretser_tileset)
## Teknisk endring: Bruk av både addsource og addlayer
Legg merke til at det brukes _url:_ i _addSource_.
```javascript
```
- [Grunnkretser i Oppland - fra vector tiles - bruk av addSource](docs/grunnkretser_addsource)
## Bruk av GeoJSON-fil på egen webserver
Sjekk hvor lite endringer det er fra eksemplet over:
- _data:_ brukes i _addSource_
- _source_layer:_ er borte fra _addSource_
```javascript
```
- [Grunnkretser i Oppland - fra GeoJSON-file](docs/grunnkretser_geojson_file)
## Styling av GeoJSON-polygoner
```javascript
map.addLayer({
"id": "grunnkretser",
"type": "fill",
"source": "grunnkrets-geojson",
"layout": {},
"paint": {
'fill-color': {
'property': 'objid',
'stops': [
[0, '#F2F12D'],
[100, '#EED322'],
[1000, '#E6B71E'],
[5000, '#DA9C20'],
[10000, '#CA8323'],
[50000, '#B86B25'],
[100000, '#A25626'],
[500000, '#8B4225'],
[1000000, '#723122']
]
},
"fill-outline-color": "#000",
"fill-opacity": 0.5,
}
});
```
- [Grunnkretser i Oppland - koroplett-kart](docs/grunnkretser_stops)
## Referanser til eksempler hos Mapbox
Eksempler på å legge til GeoJSON-data i kartet. I eksemplene er GeoJSON-data skrevet inn i javascript-koden, men det som står ut for _data:_ kan erstattes med et filnavn. Se eksemplene ovenfor og sammenlign med dem.
- [Add a GeoJSON polygon](https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/)
- [Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)
- [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
Ulike metoder for å få vist informasjon fra GeoJSON-fil, se under _Controls and overlays_ på denne siden:
[https://www.mapbox.com/mapbox-gl-js/example/popup/](https://www.mapbox.com/mapbox-gl-js/example/popup/) (se menyen i venstre marg)
- Display a popup
- Display popup on click
- Display popup on hover
- Display popup on hover
Styling av GeoJSON-data med javascript:
- [Update a choropleth layer by zoom level (litt komplisert eksempel)](https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/)
Mapbox Style Specification har detaljer om hvordan man skal style ulike elementer
- [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-js/style-spec)
Se f.eks. under _Layers_ i venstremargen:
- fill (for polygoner)
- line
- circle (kan brukes for punkter)