Bruk av GeoJSON-data i mapbox GL JS og i Mapbox Studio

• Mapbox studio
• Tilesets

Tilesets kan opprettes fra flere ulike filformater, deriblant GeoJSON. Se Read more ... Tilesets kan også opprettes fra Mapbox 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).

• Styles

For å lage en helt ny Style, velg Pick a Template, Start Blank.

Referansen til egen style hentes fra aktuell style i Mapbox Studio.

    <div id="map"></div>

    <script>
      mapboxgl.accessToken = 'pk.eyJ1Ijoic3ZlcnJlc3QiLCJhIjoiY2l1Y2VqcmRzMDAxMTJ0cGl6c3ZteGozMyJ9.ieY0kEubUisIWVVwjZiuBg';

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/sverrest/cjo7hfm7x040b2sp32tw2fc44',
        center: [10.6805314, 60.7894493],
        zoom: 8
      });
    </script>

• Grunnkretser i Oppland

    <div id="map"></div>

    <script>
      mapboxgl.accessToken = 'pk.eyJ1Ijoic3ZlcnJlc3QiLCJhIjoiY2l1Y2VqcmRzMDAxMTJ0cGl6c3ZteGozMyJ9.ieY0kEubUisIWVVwjZiuBg';

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [10.6805314, 60.7894493],
        zoom: 10
      });

      map.on('load', function () {

        map.addLayer({
          "id": "terrain-data",
          "type": "fill",
          "source": {
            type: 'vector',
            url: 'mapbox://sverrest.9y165etn'
          },
          "source-layer": "grunnkretser_oppland_4326_pol-3niage",
          "layout": {},
          "paint": {
            'fill-color': '#088',
            "fill-outline-color": "#000",
            'fill-opacity': 0.5,
          }
        });
      });

    </script>

• Grunnkretser i Oppland - fra vector tiles

Legg merke til at det brukes url: i addSource.

    <div id="map"></div>

    <script>
      mapboxgl.accessToken = "pk.eyJ1Ijoic3ZlcnJlc3QiLCJhIjoiY2l1Y2VqcmRzMDAxMTJ0cGl6c3ZteGozMyJ9.ieY0kEubUisIWVVwjZiuBg";

      var map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v10",
        center: [10.6805314, 60.7894493],
        zoom: 10
      });

      map.on('load', function () {

        map.addSource("grunnkrets-tiles", {
          "type": "vector",
          "url": "mapbox://sverrest.9y165etn"
        });

        map.addLayer({
          "id": "grunnkretser",
          "type": "fill",
          "source": "grunnkrets-tiles",
          "source-layer": "grunnkretser_oppland_4326_pol-3niage",
          "layout": {},
          "paint": {
            "fill-color": "#088",
            "fill-outline-color": "#000",
            "fill-opacity": 0.5,
          }
        });
      });

    </script>

• Grunnkretser i Oppland - fra vector tiles - bruk av addSource

Sjekk hvor lite endringer det er fra eksemplet over:

• data: brukes i addSource
• source_layer: er borte fra addSource

    <div id="map"></div>

    <script>
      mapboxgl.accessToken = "pk.eyJ1Ijoic3ZlcnJlc3QiLCJhIjoiY2l1Y2VqcmRzMDAxMTJ0cGl6c3ZteGozMyJ9.ieY0kEubUisIWVVwjZiuBg";

      var map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v10",
        center: [10.6805314, 60.7894493],
        zoom: 10
      });

      map.on("load", function () {

        map.addSource("grunnkrets-file", {
          "type": "geojson",
          "data": "grunnkretser_oppland_4326_polygon.geojson"
        });

        map.addLayer({
          "id": "grunnkretser",
          "type": "fill",
          "source": "grunnkrets-file",
          "layout": {},
          "paint": {
            "fill-color": "#088",
            "fill-outline-color": "#000",
            "fill-opacity": 0.5,
          }
        });
      });

    </script>

• Grunnkretser i Oppland - fra GeoJSON-file

        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

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
• Add a GeoJSON line
• Draw GeoJSON points

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/ (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)

Mapbox Style Specification har detaljer om hvordan man skal style ulike elementer

• Mapbox Style Specification

Se f.eks. under Layers i venstremargen:

• fill (for polygoner)
• line
• circle (kan brukes for punkter)