// This is a comment to the end of this line.
{ name: 'scaleline' }, // It does not have to start at the beginning of a line
/* This is a comment until the end of comment marker.
   It can span several lines but not be nested */

Example map with json

<script type="text/javascript">
  var origo = Origo('index.json');
</script>

Example map with origo url

<script type="text/javascript">
  var origo = Origo('http://www.malardalskartan.se/app/#layers=topowebbkartan_nedtonad/v/1/s/0,vasteras/v/1/s/0,samhalls_projekt/v/1/s/0&center=172605,6596280&zoom=2&pin=348078,6686310&map=malardalskartan');
</script>

Example map with options

<script type="text/javascript">
  var origo = Origo('index.json', {
    target: '#the-map,
    breakPoints: {
      xs: [240, 320],
      s: [320, 320],
      m: [500, 500],
      l: [768, 500]
    },
    breakPointsPrefix: 'o-media',
    defaultControls: [
      { name: 'scaleline' },
      { name: 'zoom' },
      { name: 'rotate' },
      { name: 'attribution' },
      { name: 'fullscreen' }
    ],
    mapState: {
      "layers": [
        "osm/v/1/s/0/o/100",
        "origo-mask/v/1/s/0/o/25",
        "origo-cities/v/1/s/0/o/100"
      ],
      "center": "1810000,8390000",
      "zoom": "8.7",
      "legend": "expanded",
      "map": "index"
    }
  });
</script>

Example page settings definition

{
"pageSettings": {
  "footer": {
    "img": "img/png/logo.png",
    "url" : "https://github.com/origo-map/origo",
    "text": "Origo"
  },
  "mapGrid": {
    "visible": true
  },
  "mapInteractions": {
    "embedded": false
  }
}
}

Example projection definition

{
"projectionCode": "EPSG:3010",
"proj4Defs": [
      {
          "code": "EPSG:3010",
          "alias": "urn:ogc:def:crs:EPSG::3010",
          "projection": "+proj=tmerc +lat_0=0 +lon_0=16.5 +k=1 +x_0=150000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
      }
],
"projectionExtent": [
  -1678505.1838360203,
  4665380,
  2431912.7361639794,
  8775797.92
]
}

Example groups

{
"groups": [
    {
      "name": "GROUP",
      "title": "GROUP",
      "abstract": "This is parents group",
      "groups": [
        {
          "name": "group",
          "title": "group",
          "abstract": "This is childrens group",
          "exclusive": true
        }
      ]
    }
]
}

Example featureinfoOptions with overlay as infowindow

{
  "featureinfoOptions": {
    "clusterFeatureinfoLevel": 3,
    "infowindow": "overlay",
    "pinning": false,
    "hitTolerance": 3,
    "selectionStyles": {
      "Point": [{
        "circle": {
          "radius": 5,
          "stroke": {
            "color": [0, 153, 255, 1],
            "width": 0
          },
          "fill": {
            "color": [0, 153, 255, 1]
          }
        }
      }],
      "LineString": [{
        "stroke": {
          "color": [255, 255, 255, 1],
          "width": 5
        }
      },
      {
        "stroke": {
          "color": [0, 153, 255, 1],
          "width": 3
        }
      }],
      "Polygon": [{
        "stroke": {
          "color": [255, 255, 255, 1],
            "width": 5
          }
        },
        {
          "stroke": {
            "color": [0, 153, 255, 1],
            "width": 3
          }
        }
      ]
    }
  }
}

Example featureinfoOptions with infowindow as infowindow

{
  "featureinfoOptions": {
    "clusterFeatureinfoLevel": 3,
    "pinning": false,
    "hitTolerance": 3,
    "infowindow": "infowindow",
    "infowindowOptions": {
      "title": "Testtitel",
      "export": {
        "toasterMessages": {
          "success": "OK!",
          "fail": "Sorry!"
        },
        "simpleExport": {
          "url": "url_to_service",
          "layers": ["layer_1","layer_2"],
          "button": {
            "roundButton": false,
            "buttonText": "Send to excel"
          }
        },
        "layerSpecificExport": [
      {
            "layer": "layer_3",
            "attributesToSendToExport": ["attribute_1","attribute_2"],
            "exportUrls":[
          {
                "url": "url_to_service",
                "exportedFileName": "filename_1.xlsx",
                "button": {
                  "roundButton": true,
                  "roundButtonIcon": "#fa-download",
                  "roundButtonTooltipText": "Send to excel"
                }
              },
              {
                "url": "url_to_service",
                "exportedFileName": "filename_2.docx",
                "button": {
                  "roundButton": true,
                  "roundButtonIcon": "img/png/image.png",
                  "roundButtonTooltipText": "Send to word"
                }
              }
        ]
      }
        ]
      }
    },
    "multiSelectionStyles": {
      "selected": [
        {
        "zIndex": 1,
        "fill": {
          "color": [128, 128, 128, 0.13]
        },
        "stroke": {
          "color": [0, 0, 0, 0.13],
          "width": 3
        },
        "circle": {
          "radius": 14,
          "stroke": {
          "color": [0, 0, 0, 0.13],
          "width": 3
          },
          "fill": {
          "color": [128, 128, 128, 0.13]
          }
        }
        }
      ],
      "inActiveLayer": [
        {
          "zIndex": 3,
          "fill": {
          "color": [128, 128, 192, 0.4]
          },
          "stroke": {
          "color": [255, 255, 255, 1],
          "width": 4
          },
          "circle": {
          "radius": 14,
          "stroke": {
            "color": [255, 255, 255, 1],
            "width": 3
          },
          "fill": {
            "color": [255, 255, 255, 0.01]
          }
          }
        },
        {
          "zIndex": 4,
          "stroke": {
          "color": [220, 24, 24, 1],
          "width": 2
          },
          "circle": {
          "radius": 14,
          "stroke": {
            "color": [220, 24, 24, 1],
            "width": 2
          },
          "fill": {
            "color": [128, 128, 192, 0.4]
          }
          }
        }
      ],
      "highlighted": [
        {
          "zIndex": 5,
          "fill": {
          "color": [255, 255, 255, 0.6]
          },
          "stroke": {
          "color": [255, 255, 255, 1],
          "width": 6
          },
          "circle": {
          "radius": 14,
          "stroke": {
            "color": [255, 255, 255, 1],
            "width": 6
          },
          "fill": {
            "color": [255, 255, 255, 0.01]
          }
          }
        },
        {
          "zIndex": 6,
          "stroke": {
          "color": [48, 48, 255, 1],
          "width": 3
          },
          "circle": {
          "radius": 14,
          "stroke": {
            "color": [48, 48, 255, 1],
            "width": 3
          },
          "fill": {
            "color": [255, 255, 255, 0.6]
          }
          }
        }
      ]
    }
  }
}

Example featureinfoOptions with aggregations

"featureinfoOptions": {
    "infowindow": "infowindow",   
    "infowindowOptions": {
      "groupAggregations": [
        {
          "layer": "linjelager", 
          "function": "sum", 
          "scalefactor": 0.01, 
          "decimals": 1, 
          "attribute": "@length",
          "label": "Total length", 
          "unit": "hektometer" 
        },
        {
          // No layer specified, apply to all (multi) polygon layers 
          "function": "sum",
          "attribute": "@area",
          "label": "<b>Total area:</b> ", 
        },
        {
          // No layer specified, applies to all layers that happens to have an attribute called "inten"
          "function": "sum",
          "attribute": "inten", // ordinary attribute
          "decimals": 0
        }
      ]
    }
  },

Example attributeAlias

"attributeAlias": {
  "name": "Namn",
  "strl": "Storlek"
}

Example clusterOptions

{
  "clusterOptions": {
    "clusterDistance" : 40,
    "clusterMaxZoom" : 2
  }
}

Example tileGridOptions

"tileGridOptions": {
  "alignBottomLeft": false,
  "tileSize": 512
}

Example layerParams

"layerParams": {
  "default": {
    "group": "root",
    "visible": true
  }
},
"layers": [
  {
    "name": "origo-cities",
    "title": "Origokommuner",
    "source": "data/origo-cities-3857.geojson",
    "style": "origo-logo",
    "type": "GEOJSON",
    "attributes": [
      {
        "name": "name"
      }
    ],
    "layerParam": "default"
  }

Example palette

"palette": ["rgb(0,0,0)", "rgb(255,255,255)", "rgb(0,255,255)", "rgb(255,0,255)", "rgb(166,206,227)", "rgb(31,120,180)", "rgb(178,223,138)", "rgb(51,160,44)", "rgb(251,154,153)", "rgb(227,26,28)", "rgb(253,191,111)"]

Example setting controls to be included

{
"controls": [
  {
    "name": "geoposition",
    "options": {
        "zoomLevel": 15
    }
  },
  {
    "name": "mapmenu"
  },
  {
    "name": "sharemap"
  },
  {
    "name": "print",
    "options": {
      "showCreated": true,
      "createdPrefix": "Skapad ",
      "logo": {
        "cls": "padding-bottom-small",
        "src": "css/png/logo_print.png",
        "style": {
            "height": "3rem"
          }
        },
        "northArrow": {
          "cls": "padding-right-small printmap-north-arrow",
          "src": "css/png/north_arrow_print.png",
          "visible": false,
          "style": {
            "height": "5rem"
          }
        }
    }
  },
  {
    "name": "legend",
    "options": {
        "expanded": false
    }
  },
  {
    "name": "search",
    "options": {
        "url": "http://localhost:3000/adressok",
        "searchAttribute": "NAMN",
        "northing": "N",
        "easting": "E",
        "title": "Adress"
    }
  }
],
}

Example about control

{
  "name": "about",
  "options": {
    "buttontext": "Om Origo",
    "title": "Om Origo",
    "content": "<p>Origo är ett ramverk för webbkartor. Ramverket bygger på JavaScript-biblioteket OpenLayers 3...</p>"
  }
}

Example Bookmarks control

{
  "name": "bookmarks",
  "options": {
    "title": "Bookmarks",
    "isActive": true,
    "duration": 1000,
    "items": [
      {
        "name": "Hudiksvall",
        "coordinates": [1904063, 8794995]
      },
      {
        "name": "Karlstad",
        "coordinates": [1503136, 8262205]
      },
      {
        "name": "Sigtuna",
        "coordinates": [1986473, 8315061],
        "zoomLevel": 10
      }
    ]
  }
}

Example drag-and-drop control

{
  "name": "draganddrop",
  "options": {
    "groupName": "drag-and-drop-layers",
    "groupTitle": "Drag-and-drop layers",
    "styleByAttribute": true
  }
}

Example draw control

{
"name": "draw",
"options" : {
  "buttonText": "Rita",
  "drawTools": {
     "Polygon": ["freehand", "box"],
     "LineString": ["freehand"]
  },
  "showAttributeButton": true,
  "showDownloadButton": true,
  "showSaveButton": true,
  "multipleLayers": true,
  "queryable": false,
  "removable": true,
  "exportable": true,
  "layerTitle": "Ritlager",
  "groupTitle": "Ritlåda",
  "groupName": "rit"
}

Example editor control

{
  "name": "editor",
  "options": {
    "isActive": true,
    "autoSave": false,
    "defaultLayer": "editor_polygon",
    "drawTools": {
      "Polygon": ["box"]
    }
  }
}

Example polygon and copy tool in layer configuration

{
"drawTools": [
        "Polygon",
        {
          "toolName": "Copy",
          "layers": [ "SketchPoly" ],
          "groups": [ "drag-and-drop-layers" ]
        }
      ]
}

Example external url control

{
  "name": "externalurl",
  "options": {
       "tooltipText": "Kartlänkar",
       "links": [
           {
            "tooltipText": "OpenStreetMap",
            "method": "LatLon",
            "projection": "EPSG:3857",
            "url": "https://www.openstreetmap.org/#map=17/{{LAT}}/{{LON}}",
            "buttonImage": "img/png/osm.png"
           },
           {
            "tooltipText": "Google street view",
            "method": "LatLon",
            "url": "https://www.google.com/maps/@?api=1&map_action=pano&viewpoint={{LAT}},{{LON}}&heading=-45&pitch=10&fov=80",
            "buttonImage": "img/png/google_street_view.png"
          }
         ]
    }
}

Example fullscreen control

{
  "name": "fullscreen",
  "options": {
      "hideWhenEmbedded": true
  }
}

Example geoposition control

{
  "name": "geoposition",
  "options": {
      "zoomLevel": 15
  }
}

Example home control

{
  "name": "home",
  "options": {
    "extent": [134966, 6593080, 176372, 6636922]
  }
}

Example legend control

{
  "name": "legend",
  "options": {
    "expanded": false,
    "turnOffLayersControl": true,
    "contentStyle": {
      "width": "300px"
    }
  }
}

Example link control

{
  "name": "link",
  "options": {
      "title": "Origo",
      "url": "https://github.com/origo-map/origo"
  }
}

Example mapmenu control

{
  "name": "mapmenu",
  "options": {
    "isActive": true
  }
}

Example measure control

{
  "name": "measure",
  "options": {
    "measureTools": ["length", "area"],
    "default": "length",
    "highlightColor": "rgba(133, 193, 233, 0.8)"
  }
}

Example measure control with elevation data tool

{
  "name": "measure",
  "options": {
    "measureTools": ["length", "area", "elevation"],
    "default": "length",
    "elevationServiceURL": "https://maps.googleapis.com/maps/api/elevation/json?locations={northing},{easting}&key=MY_API_KEY",
    "elevationProjection": "EPSG:4326",
    "elevationAttribute": "results[0].elevation"
  }
}

Example measure control with snap enabled

{
  "name": "measure",
  "options": {
    "snap": true,
    "snapIsActive": true,
    "snapLayers": [
      "origo-cities"
    ],
    "snapRadius": 15
  }
}

Example position control

{
      "name": "position",
      "options": {
        "projections": [
          {
            "projectionCode": "EPSG:4326",
            "projectionLabel": "Wgs84"
          },
          {
            "projectionCode": "EPSG:4326",
            "projectionLabel": "Wgs84 DMS",
            "dms": true,
            "precision": 2
          }
        ]
      }
    }

Example position control using simplified configuration format

{
  "name": "position",
  "options": {
    "title": "Sweref99 16.30",
    "projections": {
      "EPSG:4326": "WGS84",
      "EPSG:3006": "Sweref99 TM"
    },
    "noPositionText": ""
  }
}

Example Print control

{
  "name": "print",
  "options": {
      "placement": ["screen","menu"],     
      "leftFooterText": "OBS: Kartan är inte rättsligt gällande.",
      "showCreated": true,
      "createdPrefix": "Skapad ",
      "logo": {
        "cls": "padding-bottom-small",
        "src": "css/png/logo_print.png",
        "style": {
            "height": "3rem"
          }
        },
        "northArrow": {
          "cls": "padding-right-small printmap-north-arrow",
          "src": "css/png/north_arrow_print.png",
          "visible": true,
          "style": {
            "height": "5rem"
          }
        },
        "showScale": true,
        "scales": [
          "1:100000",
          "1:50000",
          "1:15000",
          "1:10000",
          "1:5000",
          "1:1000",
          "1:500"
        ]
  }
}

Example progressbar control

{
  "name": "progressbar"
}

Example search response

{
  "NAMN":"Drottninggatan 13",
  "N":6610524.99261475,
  "E":151466.20581054702
}

Example search control (option 1)

{
  "name": "search",
  "options": {
      "url": "http://localhost:3000/adressok",
      "searchAttribute": "NAMN",
      "layerNameAttribute": "TYPE",
      "idAttribute": "GID",
      "geometryAttribute": "GEOM",
      "hintText": "Sök adress eller platser...",
      "searchlistOptions":{
        "placement": "left"
      }
  }
}

Example search control (option 2)

{
  "name": "search",
  "options": {
      "url": "http://localhost:3000/adressok",
      "searchAttribute": "NAMN",
      "layerName": "TYPE",
      "geometryAttribute": "GEOM",
      "hintText": "Sök adress eller platser..."
  }
}

Example search control (option 3)

{
  "name": "search",
  "options": {
      "url": "http://localhost:3000/adressok",
      "searchAttribute": "NAMN",
      "titleAttribute": "TYPE",
      "contentAttribute": "NAMN",
      "geometryAttribute": "GEOM",
      "hintText": "Sök adress eller platser..."
  }
}

Example search control (option 4)

{
  "name": "search",
  "options": {
      "url": "http://localhost:3000/adressok",
      "searchAttribute": "NAMN",
      "geometryAttribute": "GEOM",
      "title": "Adress",
      "hintText": "Sök adress eller platser..."
  }
}

Example search control (option 5)

{
  "name": "search",
  "options": {
      "url": "http://localhost:3000/adressok",
      "searchAttribute": "NAMN",
      "northing": "N",
      "easting": "E",
      "title": "Adress",
      "hintText": "Sök adress eller platser..."
  }
}

Example sharemap control

{
  "name": "sharemap"
}

Example splash control

{
  "name": "splash",
  "options": {
    "url": "examples/splash-content.html",
    "hideButton": {
      "visible": true
    },
    "style": "width: 600px;"
  }
}

Example scale control

{
  "name": "scale",
  "options": {
    "scaleText": "1:"
  }
}

Example scalepicker control

{
  "name": "scalepicker",
  "options": {
    "buttonPrefix": "Scale: ",
    "listItemPrefix": "Scale: "
  }
}

Basic example GeoJSON

{
  "name": "mygeojson",
  "title": "My geojson",
  "source": "data/mygeojson.geojson",
  "style": "mask",
  "type": "GEOJSON"
}

Basic example GPX

{
  "name": "mygpx",
  "title": "My gpx",
  "source": "data/mygpx.gpx",
  "style": "line",
  "type": "GPX"
}

Basic example TopoJSON

{
  "name": "mytopojson",
  "title": "My topojson",
  "source": "data/mytopojson.json",
  "style": "mask",
  "type": "TOPOJSON"
}

Basic example WFS

{
  "name": "mywfs",
  "title": "My wfs",
  "group": "test",
  "source": "local_wfs",
  "style": "mask",
  "type": "WFS"
}

Filter example WFS

{
  "name": "mywfs",
  "title": "My wfs",
  "group": "test",
  "source": "local_wfs",
  "style": "mask",
  "type": "WFS",
  "filter": "type = 'urban'"
}

Multiple layers filter example WFS

[
  {
    "name": "my_custom_name__1",
    "id": "name_on_server",
    "title": "Urban",
    "group": "Urban group",
    "source": "mapserver_wfs",
    "style": "urbanStyle",
    "type": "WFS",
    "filter": "type = 'urban'"
  },
  {
    "name": "my_custom_name__2",
    "id": "name_on_server",
    "title": "Parklands",
    "group": "Parklands group",
    "source": "mapserver_wfs",
    "style": "parklandsStyle",
    "type": "WFS",
    "filter": "type = 'parklands'"
  }
]

Basic example AGS_FEATURE

{
  "name": "my_ags_feature",
  "id": "0",
  "source": "local_ags_feature",
  "title": "My ags feature",
  "type": "AGS_FEATURE",
  "style": "mask"
}

Filter example AGS_FEATURE

{
  "name": "my_ags_feature",
  "id": "0",
  "source": "local_ags_feature",
  "title": "My ags feature",
  "type": "AGS_FEATURE",
  "style": "mask",
  "filter": "type='urban'"
}

Basic example VECTORTILE

{
  "name": "my_vector_tiles",
  "source": "vector tiles source",
  "title": "My vector tiles",
  "type": "VECTORTILE",
  "style": "customstyle",
  "layerName": "my_vector_tiles",
  "gridset": "my_gridset",
  "format": "pbf"
}

Basic example WMS

{
  "name": "my_wms",
  "source": "local_wms",
  "title": "My WMS",
  "type": "WMS",
  "style": "mask"
}

Example with same layer name on different servers

[
  {
    "name": "school__prod",
    "title": "Elementary school",
    "format": "image/png",
    "queryable": false,
    "visible": false,
    "type": "WMS",
    "group": "Elementary",
    "source": "prod",
    "style": "school"
  },
  {
    "name": "school__test",
    "title": "Elementary school",
    "format": "image/png",
    "queryable": false,
    "visible": false,
    "type": "WMS",
    "group": "ElementaryNew",
    "source": "test",
    "style": "school"
  }
]

Examples with additional source params supplied for a Geoserver and QGIS Server

[
  {
    "name": "example_geoserver",
    "title": "Example Geoserver",
    "format": "image/png",
    "queryable": false,
    "visible": false,
    "type": "WMS",
    "group": "Elementary",
    "source": "geoserver",
    "sourceParams": {
      "CQL_FILTER": "owner = 'me'"
    }
  },
  {
    "name": "example_qgisserver",
    "title": "Example QGIS Server",
    "format": "image/png",
    "queryable": false,
    "visible": false,
    "type": "WMS",
    "group": "Elementary",
    "source": "qgisserver",
    "sourceParams": {
      "FILTER": "mylayer1:\"col1\";mylayer1,mylayer2:\"col2\" = 'blabla''",
      "DPI": "300",
      "BGCOLOR": "0x00FF00"
    }
  }
]

Basic example WMTS

{
  "name": "my_wmts",
  "source": "local_wmts",
  "title": "My WMTS",
  "type": "WMTS",
  "style": "mask"
}

Basic example XYZ

{
  "name": "my_xyz",
  "title": "My XYZ",
  "type": "XYZ",
  "layerURL": "./data/xyz/{z}/{x}/{y}.png",
  "style": "background-map",
  "maxScale": 50000
}

Basic example AGS_MAP

{
  "name": "my_ags_tile",
  "id": "0",
  "source": "local_ags_tile",
  "title": "My ags tile",
  "type": "AGS_MAP",
  "renderMode": "image",
  "style": "mask"
}

Basic example OSM

{
  "name": "my_osm_layer",
  "title": "OpenStreetMap",
  "group": "background",
  "type": "OSM",
  "style": "mask"
}

Basic example group

{
  "name": "dummy_name",
  "title": "My layer",
  "group": "test",
  "style": "mask",
  "type": "GROUP",
  "layers": [
    {
      "name": "mywfs",
      "title": "My wfs",
      "source": "local_wfs",
      "style": "mask",
      "type": "WFS",
      "visible": true
    },
    {
      "name": "mywfs",
      "title": "My wfs",
      "source": "local_wfs",
      "style": "mask",
      "type": "WFS",
      "visible": true
    }
  ]
}

Example defining sources

{
  "source": {
    "local_wms": {
      "url": "http://localhost/geoserver/origo/wms"
    },
    "local_wmts": {
      "url": "http://localhost/geowebcache/service/wmts"
    }
  }
}

Example defining layer attributes

{
  "name": "mygeojson",
  "title": "My geojson with custom attributes",
  "source": "data/mylayer.geojson",
  "style": "mask",
  "type": "GEOJSON",
  "attributes": [
    {
      "name":"NAME",
      "title": "Name: ",
      "url": "PAGEID",
      "urlPrefix":"http://my.link.com/",
      "urlSuffix":".html"
    },
    {
      "html": "<p>For more information contact {{CONTACT}} at {{PHONE}}</p>",
      "cls": "o-custom-class-name"
    }
  ]
}

Example editor attributes

{
  "name": "art",
  "title": "Art: ",
  "type": "text",
  "maxLength": 64,
  "readonly": true,
},
{
  "name": "isTrue",
  "title": "Is this true?: ",
  "type": "checkbox",
  "config": {
      "checkedValue": "true",
      "uncheckedValue": "false"
  }  
},
{
  "name": "category",
  "title": "category: ",
  "type": "dropdown",
  "options": [
      "category_1",
      "category_2",
      "category_3"
  ]
},
{
  "name": "subcategory",
  "title": "subcategory: ",
  "type": "dropdown",
  "constraint": "change:category:category_1",
  "options": [
      "subcategory_1",
      "subcategory_2",
      "subcategory_3"
  ]
},
{
  "name": "choice",
  "title": "choice: ",
  "type": "dropdown",
  "options": [
      "choice 1",
      "choice 2",
      "choice 3"
  ]
},
{
  "name": "subchoice",
  "title": "subchoice: ",
  "type": "dropdown",
  "constraint": "change:choice:[choice 1,choice 3]",
  "options": [
      "subchoice 1",
      "subchoice 2",
      "subchoice 3"
  ]
},
{
  "name": "sprak",
  "title": "Språk: ",
  "type": "searchList",
  "list": [
      {
        "value": "Java"
      },
      ...
  ],
  "config": {
    "minChars": 2,
    "maxItems": 15
  }
},
{
  "name": "icons",
  "title": "Ikoner: ",
  "type": "searchList",
  "list": [
    {
      "src": "img/kompass.svg",
      "value": "Riktning"
    },
    ...
  ],
  "config": {
    "minChars": 0,
    "maxItems": 5
  }
},
{
  "name": "icon-lib",
  "title": "Bibliotek: ",
  "type": "searchList",
  "list": [
    {
      "location": "img/png",
      "extension": "png"
    },
    ...
  ],
  "config": {
    "minChars": 0,
    "maxItems": 5
  }
}

Example Default Values. Readonly user, hidden timestamp.

"attributes": [
        {
          "name": "user",
          "title": "Edited by",
          "type": "text",
          "readonly": true,
          "defaultValue": {
            "type": "sessionStorage",
            "key": "loggedInUser",
            "updateOnEdit": true
          }
        },
        {
          "name": "lastUpdate",
          "type": "hidden",
          "defaultValue": {
            "type": "timestamp",
            "updateOnEdit": true,
            "useUTC":  true
          }
        }
 ]

Example attachment configuration

"attachments": {
        "formTitle" : "Attachments",
        "layerId": "entity_blob",
        "url": "http://gis.kommun.org/attachmentserver/",
        "groups": [
          {
            "name": "proto",
            "title": "Protocols",
            "allowedFiles": ".pdf"
          },
          {
            "name": "public",
            "title": "Public Image",
            "allowedFiles": ".jpg,.png",
            "linkAttribute": "pictureLinks",
            "fileNameAttribute": "pictureTexts"

          }
        ]
      }

Example display attachments in featureinfo configuration

"attributes": [
    {
        "title": "Images",
        "linktext": "pictureTexts",
        "url": "pictureLinks",
        "splitter": ";"
     }
]

Example related tables configuration

{
  "layers": [
    {
      // This is the child layer
      "name": "sf:person",
      "source": "local_wfs",
      "type": "WFS",
      "isTable": true,
      "attributes": [
        {
          "name": "name",
          "type": "text"
        },
        {
          "name": "org",
          "type": "text"
        }
      ]
    },
    {
      // This is the parent layer
      "name": "sf:property",
      "queryable": true,
      "group": "root",
      "source": "local_wfs",
      "type": "WFS",
      "geometryName": "the_geom",
      "geometryType": "Point",
      "visible": true,
      "editable": true,
      "allowedEditOperations": [
        "updateAttributes"
      ],
      "attributes": [
        {
          "name": "adress",
          "type": "text",
          "readonly": true
        },
        {
          // This is the temporary attribute created by related table configuration
          "name": "responsible",
        }
      ],
      "relatedLayers": [
        {
          "layerName": "person",
          "FK": "parent_fid",
          "featureTitle": "name",
          "promoteAttribs": [
            {
              "parentName": "responsible",
              "html": "<p><b>{{name}},</b>{{org}}</p>"
            }
          ]
        }
      ]
    }
  ]
}

      "legendParams" : {
        "scale" : 5000,
        "legend_options" : "dpi:300"
      }

vector layers

"stylePicker": [
  {"title": "Sommarstil", "style": "bokbuss_sommar"},
  {"title": "Sval ton", "style": "bokbuss_bla"}
]
///
"styles": {
  "bokbuss_sommar": [
    [
      {
        "stroke": {
          "color": "rgba(211,84,0,1.0)"
        },
        "fill": {
          "color": "rgba(241,196,15,0.9)"
        }
      }
    ]
  ]
}

WMS layers

      "stylePicker": [
        { "title": "Ljus", "style": "Bakgrund_bke_fk_lj_0484" },
        { "title": "Mörk", "style": "Bakgrund_bkm_fk_mo_0484",
          "initialStyle": true,
          "hasThemeLegend": true,
            "legendParams": {
              "legend_options": "dpi:600"
            }
        },
        { "title": "Standard", "defaultWMSServerStyle": true, 
          "legendParams": {
            "scale": 100
          } 
        }
      ]

Example defining a layer style

{
  "name": "mylayer",
  "title": "My layer",
  "source": "data/layer.geojson",
  "style": "mask",
  "type": "GEOJSON",
  "visible": true
}

{
  "styles": {
      "mask": [
        [
          {
            "stroke": {
              "color": "rgba(0,0,0,1.0)"
            },
            "fill": {
              "color": "rgba(0,0,0,0.5)"
            }
          }
        ]
      ]
  }
}

Fill example

{
  "fill": {
    "color": "rgba(0,0,0,0.5)"
  }
}

Stroke example

{
  "stroke": {
    "color": "rgba(0,0,0,1.0)",
    "width": 2
  }
}

Circle example

{
  "circle": {
    "radius": 16,
    "stroke": {
      "color": "rgba(0,0,0,1)",
      "width": 5
    },
    "fill": {
      "color": "rgba(255,255,255,0.9)"
    }
  }
}

Icon example

{
  "icon": {
    "size": [32,32],
    "src": "data/png/my_icon.png"
  }
}

Text example with static text

{
  "text": {
    "font": "Bold 12px Arial",
    "textAlign": "center",
    "offsetX": 10,
    "offsetY": -10,
    "text": "My label text",
    "fill": {
      "color": "rgba(0,0,0,1.0)"
    },
    "stroke": {
      "color": "rgba(255,255,255,0.7)",
      "width": 2
    }
  }
}

Example with text from attribute

{
  "text": {
    "font": "14px Arial",
    "textAlign": "center",
    "offsetX": 10,
    "offsetY": -10,
    "text": "{{name}}",
    "fill": {
      "color": "rgba(0,0,0,1.0)"
    },
    "stroke": {
      "color": "rgba(255,255,255,0.7)",
      "width": 2
    }
  }
}

Image

{
  "image": {
    "src": "img/png/gra.png"
  }
}

Legend graphics

{
  "icon": {
    "src": "URL for GetLegendGraphic request (or any other static image asset)"
   },
  "extendedLegend": true
}

Label

{
  "label": "Label for the layer"
  }
}

Alternative WMS style

{
  "icon": {
    "src": "..."
  },
  "wmsStyle": "Name of alternative WMS style"
}

Filter

"style_example": [
  [
    {
      "icon": {
      "src": "..."
      },
      "filter": "[attributename] == 'Value'", // basic string comparison
      "label": "Label shown in legend"
    }
  ],
  [
    {
      "icon": {
      "src": "..."
      },
      "filter": "[attributename] === '/^(?!.*stad$).*/'",  // using regular expression enclosed in slashes like this /regex/
      "label": "Label shown in legend"
    }
  ],
  [
    {
      "icon": {
      "src": "..."
      },
      "filter": "[attributename] > 'Value' AND [attributename] !== 'Other value'", // using relational and logical operator
      "label": "Label shown in legend"
    }
  ]
]

minScale and maxScale

"areas": [
  [
    {
      "maxScale": 12500,
      "minScale": 100000,
      "fill": {
        "color": "rgba(66,89,179,0.4)"
      },
      "stroke": {
        "color": "rgba(60,43,0,0.8)",
        "width": 1.5
      },
      "label": "Style for small scale"
    }
  ],
  [
    {
      "minScale": 12499,
      "fill": {
        "color": "rgba(66,89,179,0.2)"
      },
      "stroke": {
        "color": "rgba(60,43,0,0.8)",
        "width": 1.5
      },
      "label": "Style for big scale"
    }
  ]
]

header

"thematic": [
  [
    {
      "fill": {
        "color": "rgba(0,255,0,0.5)"
      },
        "stroke": {
        "color": "rgba(0,255,0,1)",
        "width": 2
        },
        "filter": "[type] == 'vegetation'",
        "label": "Vegetation",
        "header": true
    }
  ],
  [
    {
      "fill": {
        "color": "rgba(0,0,255,0.5)"
      },
      "stroke": {
        "color": "rgba(0,0,255,1)",
        "width": 2
      },
      "filter": "[type] == 'water'",
      "label": "Water"
    }
  ]
]

hidden

"areas": [
  [
    {
      "maxScale": 12500,
      "minScale": 100000,
      "fill": {
        "color": "rgba(66,89,179,0.4)"
      },
      "stroke": {
        "color": "rgba(60,43,0,0.8)",
        "width": 1.5
      },
      "label": "Style for small scale",
      "hidden": true
    }
  ],
  [
    {
      "minScale": 12499,
      "fill": {
        "color": "rgba(66,89,179,0.2)"
      },
      "stroke": {
        "color": "rgba(60,43,0,0.8)",
        "width": 1.5
      },
      "label": "Style for big scale"
    }
  ]
]

Opacity

{
  "styles": {
    "simple": [
      [
        {
          "stroke": {
            "color": "rgba(0,0,0,1.0)"
          },
          "fill": {
            "color": "rgba(0,0,0,0.5)"
          }
        }
      ]
    ]  
  }
}

Combining styles

{
  "styles": {
    "doubleCircle": [
      [
        {
          "circle": {
            "radius": 16,
            "stroke": {
              "color": "rgba(0,0,0,1)",
              "width": 5
            },
            "fill": {
              "color": "rgba(255,255,255,0.9)"
            }
          }
        },
        {
          "circle": {
            "radius": 4,
            "stroke": {
              "color": "rgba(0,0,0,0)",
              "width": 1
            },
            "fill": {
              "color": "rgba(37,129,196,1)"
            }
          }
        }
      ]
    ]  
  }
}

Thematic styling

{
  "styles": {
    "thematic": [
      [
        {
          "fill": {
            "color": "rgba(0,255,0,0.5)"
          },
          "stroke": {
            "color": "rgba(0,255,0,1)",
            "width": 2
          },
          "filter": "[type] == 'vegetation'",
          "label": "Vegetation"
        }
      ],
      [
        {
          "fill": {
            "color": "rgba(0,0,255,0.5)"
          },
          "stroke": {
            "color": "rgba(0,0,255,1)",
            "width": 2
          },
          "filter": "[type] == 'water'",
          "label": "Water"
        }
      ]    
    ]  
  }
}

Center point of polygon

{
  "styles": {
    "center": [
      [
         {
           "stroke": {
             "color": "rgba(103,60,31,1.0)",
             "width": 1
           },
           "fill": {
             "color": "rgba(103,60,31,0.1)"
           }
         },
         {
           "icon": {
             "size": [
               23,
               36
             ],
             "src": "img/png/droppe.png"
           },
           "geometry": "centerPoint"
         }
       ]   
    ]  
  }
}

Cluster style with size as text

{
  "styles": {
    "cluster": [
      [
        {
          "circle": {
            "radius": 16,
            "fill": {
              "color": "rgba(103,60,31,0.5)"
            },
            "stroke": {
              "color": "rgba(103,60,31,0.9)",
              "width": 4
            }
          }
        },
        {
          "text": {
            "font": "Bold 12px Arial",
            "textAlign": "center",
            "text": "size",
            "fill": {
              "color": "rgba(255,255,255,1.0)"
            },
            "stroke": {
              "color": "rgba(103,60,31,0.9",
              "width": 2
            }
          }
        }
      ]
    ]    
  }
}

Style function included in src/style/stylefunctions.js with a .png-icon for presentation in the legend.

{
  "styles": {
    "basemap": [
      [
        {
          "custom": "basemapStyle",
          "icon": {
            "src": "img/png/basemap.png",
            "size": [20,20]
          }
        }
      ]
    ]    
  }
}

Example code

// The base for calling the Origo API
origo.api();

// Accessing the OpenLayers API
Origo.ol;

Example code for making a layer visible

origo.api().getLayer("origo-cities").setVisible(true);
origo.api().getLayer("origo-cities").setVisible(false);

Example code for changing zoom

origo.api().getMap().getView().setZoom(8);

Example code for moving the map

// Set center with the native projection (in this example EPSG:3857) of the map
origo.api().getMap().getView().setCenter([1985429, 8315145]);

// Set center with transformation of the coordinates from WGS84 to Sweref 99 TM
origo
  .api()
  .getMap()
  .getView()
  .setCenter(origo.api().getMapUtils().transformCoordinate([13.5, 59.38], "EPSG:4326", "EPSG:3006"));

Example code for hide or show a control

// Hide the legend control
origo.api().getControlByName("legend").hide();

// Show the legend control
origo.api().getControlByName("legend").unhide();

Example code for getting features and write out their id and names

const allFeatures = origo.api().getLayer("origo-cities").getSource().getFeatures();
let out = "";
allFeatures.forEach((feature) => {
  out += `Id: ${feature.getId()} Namn: ${feature.get("name")} \n`;
});
window.alert(out);

Example code for zooming to a feature

origo.api().zoomToExtent(origo.api().getLayer("origo-cities").getSource().getFeatureById("1").getGeometry());

Example code for showing feature info

origo
  .api()
  .getFeatureinfo()
  .showFeatureInfo({
    feature: origo.api().getLayer("origo-cities").getSource().getFeatureById("2"),
    layerName: "origo-cities",
  });

Example code for adding a marker with popup on map

// Give coordinates, title for popup and text for popup (HTML allowed)
origo
  .api()
  .addMarker([1926764, 8953470], "Get here!", "<b>Sundsvalls kommun</b><br/>Norrmalmsgatan 4<br/>851 85 Sundsvall");

Example code for setting a filter on a layer

// Get the layer and then set a filter for it
origo.api().getLayer("Invasive_species").getSource().setFilter("[OrganismGroup] == 'Mamals'");

Example code for creating a sharemap link to the map

// Get the sharemap control and produce a URL and display it in a alert dialog.
origo
  .api()
  .getControlByName("sharemap")
  .getPermalink()
  .then((data) => alert(data));

Example code for getting drawn features

// Get all layers
const allLayers = origo.api().getMap().getAllLayers();

// Find the layer for draw control and get the source of that layer to get the features.
allLayers.forEach((layer) => {
  if (layer.values_.title === "Ritlager") {
    const drawSource = layer.getSource();
    const drawnFeatures = drawSource.getFeatures();
    console.log(drawnFeatures);
  }
});

Example code for adding new layer to map

// Add a StadiaMaps tile layer (requires OpenLayers to be version 8 or higher)
origo
  .api()
  .getMap()
  .addLayer(
    new Origo.ol.layer.Tile({
      source: new Origo.ol.source.StadiaMaps({ layer: "stamen_watercolor" }),
      title: "Stamen",
      name: "stamen",
    })
  );

Example code for adding new vector layer to map

// Define a GeoJSON object with a point at Stora Torget in Karlstad as coordinates
var geojsonObject = {
  type: "FeatureCollection",
  crs: {
    type: "name",
    properties: {
      name: "EPSG:3857",
    },
  },
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [1503198, 8263188],
      },
      properties: {
        typ: "En ny punkt!",
      },
    },
  ],
};

// Create a vector source from the GeoJSON object
var vectorSource = new Origo.ol.source.Vector({ features: new Origo.ol.format.GeoJSON().readFeatures(geojsonObject) });
// Create a vector layer
var vectorLayer = new Origo.ol.layer.Vector({
  source: vectorSource,
  name: "Vektorlager",
  title: "Vektorlager",
  queryable: true,
});
// Add the layer to the map
origo.api().getMap().addLayer(vectorLayer);

// Center the map to where geometry was added to the map
origo.api().getMap().getView().setCenter([1503198, 8263188]);

// Create a circle geometry with the radius 300 m
vectorSource.addFeature(new Origo.ol.Feature(new Origo.ol.geom.Circle([1503198, 8263188], 300)));

// Clear all features from the vector layer
origo.api().getLayer("Vektorlager").getSource().clear();

// Add the feature from
origo.api().getLayer("Vektorlager").getSource().addFeatures(new Origo.ol.format.GeoJSON().readFeatures(geojsonObject));

Example code for adding a click event export method.

// Adds on a click event a method that checks wheter a point feature is clicked on and then makes a GPX export.
origo
  .api()
  .getMap()
  .on("click", function (e) {
    this.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
      if (feature.getGeometry().getType() == "Point") {
        alert(
          new Origo.ol.format.GPX().writeFeatures([feature], {
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:3857",
          })
        );
      }
    });
  });

Example code for adding a moveend event fetch method.

// Adds on a moveend event a method that fetches height information on center coordinates.
origo
  .api()
  .getMap()
  .on("moveend", function (e) {
    var center = origo.api().getMap().getView().getCenter();
    fetch("https://karta.sundsvall.se/origoserver/lm/elevation/3857/" + center[0] + "/" + center[1])
      .then((response) => response.json())
      .then((data) => {
        alert("+" + data.geometry.coordinates[2] + " meter");
      });
  });

Example code for refreshing the data for a layer (in this example called 'temperature') on a regular interval.

// Refresh temperature data every 10 minutes
setInterval(() => {
  if (origo.api().getLayer('temperature').getVisible()) {
    origo.api().getLayer('temperature').getSource().refresh();
  }
}, 600000);