JSON 101: Origo lathund

Vad är JSON?

JSON är ett textformat för data. Det består av objekt (nyckel/värde) och arrayer (listor). Det används ofta för konfigurationer i webbkartor. JSON står för JavaScript Object Notation och är lätt för både människor och maskiner att läsa. Origo använder JSON för att definiera kartans inställningar, lager och UI-komponenter.

Vanliga fel

Extra kommatecken (trailing comma) efter sista raden.
Felaktiga citattecken. JSON kräver dubbla "".
Fel teckenkodning eller “smarta” citattecken från Word/Teams.
Felaktig struktur: objekt inom objekt/array på fel nivå.

Objekt, arrayer och datatyper

Objekt: { "nyckel": "värde" }
Array: [ "ett", "två", "tre" ]
Datatyper: sträng, nummer, boolesk, null, objekt, array.

Snabbcheck Har du dubbelcitat överallt och inga trailing commas? Kontrollera att varje rad ligger i rätt objekt/array innan du testar i Origo.

Exempel: enkelt config-objekt

{
  "appTitle": "Origo Demo",
  "debug": true,
  "language": "sv"
}

Exempel: lista av lager

{
  "layers": [
    {
      "name": "Baslager",
      "type": "TODO: verifiera mot Origo-dokumentation",
      "source": "TODO: verifiera mot Origo-dokumentation"
    },
    {
      "name": "Byggnader",
      "type": "TODO: verifiera mot Origo-dokumentation",
      "source": "TODO: verifiera mot Origo-dokumentation"
    }
  ]
}

Exempel: nestade objekt

{
  "map": {
    "extent": "TODO: verifiera mot Origo-dokumentation",
    "projection": "TODO: verifiera mot Origo-dokumentation"
  },
  "ui": {
    "controls": [
      "zoom",
      "scale"
    ]
  }
}

Hur läser jag en Origo-konfig?

Origo-konfigurationer kan vara stora och komplexa. Här är några tips för att navigera och förstå dem:

Mini-checklista

Validera JSON med en validator (t.ex. VS Code built-in).
Säkerställ att allt är inom rätt objekt/array.
Testa att läsa filen i webbläsaren utan fel i konsolen.
Fokusera på en sektion i taget (t.ex. lager, controls).
Använd sök för att hitta nyckelord (t.ex. "WMS", "layer").

Öppna i Try it-lab

Validera och formatera JSON i Try it-lab.

Debug-tips

Leta efter första felraden i konsolen. Ofta där felet börjar.
Ta bort halva filen och testa igen (binary search).
Om JSON laddas via nätverk: kontrollera 404 och CORS.

Så läser du en riktig Origo‑konfig (exempel)

Använd en verklig konfig som referens, men jobba alltid med kopia och skriv exempel med generiska placeholders.

Börja i toppen. Hitta övergripande sektioner (app, map, layers).
Sök efter URL:er (https://) för att hitta tjänster (WMS/WFS).
Sök efter nyckelord som “layer”, “control”, “plugin”.

Mini‑utdrag (små bitar)

Plocka små bitar för att förstå strukturen:

{
  "controls": [
    { "name": "home" },
    { "name": "mapmenu" },
    { "name": "sharemap" },
    { "name": "help" },
    { "name": "about" },
    { "name": "print" },
    { "name": "legend" },
    { "name": "measure" }
  ]
}

{
  "projectionCode": "EPSG:3008",
  "extent": [100000, 6400000, 200000, 6500000],
  "resolutions": [1600, 800, 400, 200, 100]
}

{
  "sources": {
    "publik_wms": {
      "url": "https://srv-origo01.kommun.skovde.se/geoserver/ows/"
    },
    "publik_wfs": {
      "url": "https://srv-origo01.kommun.skovde.se/geoserver/ows/",
      "strategy": "all"
    },
    "publik_wmts": {
      "url": "https://srv-origo01.kommun.skovde.se/geoserver/gwc/service/wmts",
      "matrixSet": "EPSG:3008"
    }
  }
}

{
  "layers": [
    {
      "name": "publik:wms_publik_lm_topowebb_nedtonad",
      "source": "publik_wms",
      "group": "background",
      "type": "WMS",
      "format": "image/png",
      "style": "karta_gra",
      "queryable": "false"
    },
    {
      "name": "origo_search",
      "source": "publik_wfs",
      "group": "baskarta",
      "type": "WFS"
    },
    {
      "name": "publik:lm_wms_fastighetsgrans_l",
      "source": "publik_wmts",
      "group": "fastighetsindelning",
      "type": "WMTS",
      "format": "image/png"
    }
  ]
}

{
  "styles": {
    "example_style": [
      [
        { "icon": { "src": "https://localhost/icons/example.svg", "scale": 0.85 } }
      ]
    ]
  }
}

Arbeta baklänges

Utgå från problemet i kartan och hitta relevant del i configen.

Ingen karta → leta efter baslager och projection.
Fel lager → leta upp layernamn och service-URL.
UI saknas → leta efter controls/plugins.

Mini-övning

Hitta en tjänst-URL (t.ex. publik_wms eller publik_wfs).
Hitta ett lagernamn som använder source och kontrollera om typen är WMS/WFS/WMTS.
Hitta en control (t.ex. sharemap eller print).