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]
}

{
  "source": {
    "wms_example": {
      "url": "https://localhost/geoserver/example_workspace/wms",
      "version": "1.1.1"
    },
    "wfs_example": {
      "url": "https://localhost/geoserver/example_workspace/ows",
      "strategy": "all"
    }
  }
}

{
  "layers": [
    { "name": "example_layer_wms", "type": "WMS", "source": "wms_example" },
    { "name": "example_layer_wfs", "type": "WFS", "source": "wfs_example" },
    { "name": "example_group", "type": "GROUP", "layers": ["example_layer_wfs"] }
  ]
}

{
  "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. wms_example eller wfs_example).
Hitta ett lagernamn som använder source.
Hitta en control (t.ex. sharemap eller print).