# Tekst på kartet i Mapbox
## Legger til ekstra symbol-kartlag basert på geojson-fil
```javascript
map.addLayer({
'id': 'Grunnkretsnavn',
'type': 'symbol',
'source': 'grunnkrets-geojson',
'layout': {
'text-field': '{grunnkretsnavn}, {grunnkretsnummer}',
'text-font': ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
'text-size': { "stops": [[4, 9], [6, 12]] },
},
'paint': {
'text-color': "#000000",
}
});
```
## Popup-vindu: Rat Rod
```javascript
map.on('load', function () {
map.addSource('gps_points', {
"type": "geojson",
"data": 'https://dl.dropboxusercontent.com/s/al4zuvbh3qhhuu1/ratrod-20181105.geojson'
});
map.addLayer({
"id": "ratrod",
"type": "circle",
"source": "gps_points",
"paint": {
"circle-radius": 8,
"circle-color": "#008000"
}
});
// When a click event occurs on a feature in the ratrod layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'ratrod', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.date + " " + e.features[0].properties.time;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the ratrod layer.
map.on('mouseenter', 'ratrod', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'ratrod', function () {
map.getCanvas().style.cursor = '';
});
});
```
## Popup-vindu med html-kode for tabell.
Oppdatert 16.11 - nå med bruk av _match_ for å gi farge til ikke-numeriske egenskapsverdier (I eksemplet brukes rigtignok tallverdier, men de står i anførselstegn, så dette er likevel et tektsfelt).
```javascript
```
- Se fungerende løsning: [grunnkretser-popup.html](docs/grunnkretser-popup.html)
## Ressurser
- Se under _Lookup_ og _Decision_ i [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-js/style-spec)
- Eksemplel på bruk av _match_: [Style circles with a data-driven property](https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/)
¯\_(ツ)_/¯