Origo-map

This is the documentation for the Origo map framework. For more information about Origo and how to download please visit us on GitHub. If you are a new user of Origo it is recommended to take a look at the basic examples that are included on GitHub.

An origo map can be created once its JavaScript and CSS file is included on a page. How the map is created is explained in Creating the map. All available settings and options are described and examplified in this documentation.

Creating the map

The map is typically initialized with a json configuration as in the example to the right. As an alternative the json object can be included directly instead of a path to a json file. A third alternative is to initialize a map with an url to another origo map. The url is created with the share control. This is for example useful when you want to embed a map. If the map-parameter is set in the url (eg http://origoMapUrl/#map=anotherconfig ), then the map configuration will be ignored and anotherconfig.json will be loaded.

The configuration file must strictly follow the JSON standard (https://www.json.org/) with the addition of javascript style one line comments and block comments.

The code for initiating Origo should always be inserted somewhere within the <body> tag and not within the <head> tag.

Property Description
map configuration json path, json or an origo url with the map configuration
options optional configuration that is set before the map configuration is read.
Option Description
crossDomain option to allow cross origin request of map configuration. Default is true.
target element id of the container for the map. Default is '#app-wrapper'.
baseUrl baseUrl for the root url that is used to request map resouces with relative paths. If not provided the baseUrl is set when the map is initialized.
authorizationUrl an url that triggers authorization. It can for example be used to send a wms request that will trigger authorization before the map is loaded.
svgSpritePath path for svg sprites. Default is 'css/svg/'.
svgSprites list of svg sprites that should be requested.
breakPoints breakpoints determining what is shown at different screen sizes.
breakPointsPrefix prefix to use when styling with breakpoints. Defaults to o-media.
defaultControls to override loading of default controls (scaleline, zoom, rotate, attribution and fullscreen).
mapState mapState-object to override settings in the json-config.
// 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>

Basic settings

Basic settings for the application include map options such as projection and extent. Note that all OpenLayers map and view settings of string, number or boolean type (or arrays/objects thereof) can be set in the config file, on the first level. Please see the OpenLayers map or view documentation for more information about available settings.

Page settings

With the pageSettings object you can define a footer and control the visibility of the map grid.

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
  }
}
}
Name Type Description
img string URL or file path to an image.
text string Text to be displayed.
url string Sets the URL for a link.

mapGrid

Name Type Description
visible boolean Sets the visibility of the map grid. Default is false.

mapInteractions

Name Type Description
embedded boolean Sets if special map interactions for embedded maps should be used or not. Default is true.

Map projection

The map projection is defined with the mandatory property projectionCode. If the projection is EPSG:3857 (Web mercator) or EPSG:4326 (WGS84) then the proj4Defs is optional, otherwise it is mandatory. An optional projection extent can also be set. Projections are handled with the proj4js library. The Proj4js definitions can be found on epsg.io.

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

proj4Defs

Name Type Description
proj4Defs array The proj4 definitions for projections used in the map. Several projections can be definied but the projection set as projectionCode will be the map projection. Each projection is defined as an object. Visit epsg.io to find proj4 definitions. EPSG:3857 (Web mercator) and EPSG:4326 (WGS84) doesn't need to be defined.
Name Type Description
code string The EPSG-name.
alias string An optional EPSG alias.
projection string The Proj4js definition for the projection.

projectionCode

Name Type Description
projectionCode string The EPSG-name for the projection that will be used when the map is created. Visit epsg.io to find the EPSG-code.

projectionExtent

Name Type Description
projectionExtent array Extent that will be set for the projection.

extent

Name Type Description
extent array Constraining extent for map layers.

center

Name Type Description
center array The intial center coordinates for the map.

zoom

Name Type Description
zoom number Initial zoom level for the map.

resolutions

Name Type Description
resolutions array The resolutions used to define available zoom levels for the map. The resolutions should be valid for the base maps.

groups

Name Type Description
groups array Define groups to organise layers. The group names are used in the legend control. Each group is defined as an object. A group can contain subgroups, defined as groups within a group.
Name Type Description
name string Name of the group that identifies the group. Each name must be unique.
title string A title for the group. The title is visible for the user in the legend control.
abstract short description of the group. Adds a show info button to the layer in legend. Optional.
expanded boolean Whether the group should be expanded not. Used by the legend control. Default is false.
autoExpand boolean For subgroups. Whether the subgroup should be expanded/collapsed when toggling the subgroups checkbox. Used by the legend control. Default is true.
groups array Array of group objects defining subgroups. Optional.
exclusive boolean Setting to true will prevent activating more than one layer in the group. Defaults to false.
toggleAll boolean For subgroups. Set to false to disable the option to show/hide all layers in the subgroup at once. Will have no effect if exclusive is set to true. Default is true.
draggable boolean Set to true to be able to rearrange layers in the group and affect the drawing order. Default is false.

Example groups

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

featureinfoOptions

Property Type Description
clusterFeatureinfoLevel number Zoom level where cluster layers will be identifiable. Default is 1.
pinning boolean Option to enable/disable pinning. If enabled a pin will be placed where clicked in places with no identifiable features. Default is true.
hitTolerance number Option to set the hit tolerance in pixels. Features within this tolerance from a click will be considered. This makes it easier to click features on touch devices. Default is 0.
infowindow string Option to show featureinfo in overlay, sidebar or infowindow. Default is overlay.
infowindowOptions object Options for infowindow. Currently only useful when using infowindow as infowindow. See options below. Optional.
selectionStyles object Option to set custom selection style. Optional.
multiSelectionStyles object Option to set custom selection style for selected features, features inActiveLayer and highlighted features when using infowindow as infowindow. Optional.
toggleSelectOnClick boolean Option to enable/disable selection toggling. Used with the multiselection plugin and defaults to false.
changePointerOnHover boolean When set to true, the mouse pointer changes when hovering over a clickable object. Optional. Defaults to false.
imageFeatureInfoMode string Option to set the map level featureinfo mode for image type (WMS, AGS_MAP/TILE etc) layers. The default is pixel which will produce feature info if the pixel targeted of a feature of a visible layer isn't totally transparent. Alternatives are visible which works on wholly transparent styles too and always which will produce feature info even for layers that are not visible. This option is available at the layer level as well and where present there will override the map level option. Optional.
autoplay number Option to let a carousel attribute images to rotate, set a number in milliseconds. Optional. Defaults to false.

infowindowOptions

Name Type Description
title string Infowindow header text. Default is "Träffar".
listLayout boolean Option to show layers as a list. Default is false.
export object Defines settings for the export. Two different export options are possible, server side and client side. Server side export requires a server endpoint and can be configured either as a simple export or layer specific export. Currently only attributes can be sent with server side export.
groupAggregations array of groupAggregation objects If specified an aggregation of features in each layer is displayed for a selection. E.g. sum of all area. Multiple aggregations can be configured.

export properties

Name Type Description
toasterMessages object Status message to the user. Defines messages for "success" and "fail". Default message is "Success!" and "Sorry, something went wrong, please contact your administrator." Currently only fail message is shown.
layerSpecificExport array Sends defined attributes from selected objects per layer to a server endpoint. Defines attributes, file name and service url for the export. Each layer is defined as an object. If specified for a layer, only layerSpecificExport is used for that layer.
simpleExport object Sends all attributes from selected objects per layer to a server endpoint. Defines layers and service url for the export.
clientExport object Configuration for exporting layers without the need of a server. Only applies if no layerSpecificExport or simpleExport is configured.

layerSpecificExport properties

Name Type Description
layer string Defines a layer that can export selected objects.
attributesToSendToExport array Attributes to send to the export service.
exportUrls array Defines settings for the export. A layer can have multiple exports. Each export is defined as an object.

exportUrls properties

Name Type Description
url string Url to a service. Required.
exportedFileName string File name and file extension for the export. The file extension must match the file extension from the service. Required.
button object Configuration for using a text button or a round button. Required.

simpleExport properties

Name Type Description
url string Url to a service. Exports all attributes from the layer source. Can be used with excel creator in Origo server. Required.
layers array of string List of layer names that are allowed to export selected objects. Required. If layerSpecificExport is configured for the same layer, layerSpecificExport takes precedence over the simpleExport.
button object Configuration for using a text button or a round button. Required.

clientExport properties

Name Type Description
layers array of string List of layer names that are allowed to export selected objects. Optional, if omitted export is allowed for all layers.
format string Fileformat to export to. Can be one of 'geojson' | 'gpx' | 'kml' Required.
button object Configuration for using a text button or a round button. Required.

button properties

Name Type Description
roundButton boolean If true, a round export button is displayed instead of a textbutton. Default is false.
roundButtonIcon string Icon for the round button. Path to an image or an icon from a library that are available as SVG sprites in Origo. Required if roundButton is true.
roundButtonTooltipText string Tooltip text for the round button. Required if roundButton is true.
buttonText string Text to display on export button. Optional. Default is 'Export'.

groupAggregation object

Name Type Required
layer string No
function string Yes
scalefactor Number No
decimals integer No
attribute string Yes
label string No
unit string No
useHectare boolean No

groupAggregation attribute functions groupAggregation attribute functions are functions that are applied to each feature and the result is aggregated.

Name Description
@length Calculates the length of the feature. The result is automatically scaled to meters or kilometers unless unit is specified in which case result is in meters before scalefactor is applied.
@area Calculates the area of the feature. The result is automatically scaled to m^2^, ha or km^2^ unless unit is specified in which case result is in square meters before scalefactor is applied. If useHectare is false result is not displayed as ha.

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

attributeAlias

Key-value pairs to swap an attribute name for an alias. Used with the default featureinfo template.

Example attributeAlias

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

clusterOptions

Can also be set on layer or source level.

Property Type Description
clusterDistance number The distance in pixels within which features will be clustered. Default is 60.
clusterMaxZoom number The zoom level where the features no longer will be clustered. Default is the last zoom level.

Example clusterOptions

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

tileGridOptions

Property Type Description
alignBottomLeft boolean Whether to align grid to top or bottom left corner. Default is true.
extent array Extent for the tilegrid. Used to calculate the tiles position. If omitted maps extent is used.
minZoom number Minimum zoom level. Defaults to 0.
resolutions array Resolutions for the tilegrid. If omitted maps resolutions are used.
tileSize number or array Size of tiles in the tileGrid. Default is [ 256,256 ]
origin array If origin is set it is used instead of top/bottom left coordinate of the extent. Optional

Example tileGridOptions

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

layerParams

Set of parameters to add to a layer configuration. If a setting is present in both layerParam and the layer itself, the layer setting will win.

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

Controls

A control is an optional module with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only. The controls to be included in the maps are set in the map configuration. The order of the controls matter. For instance, adding legend before mapmenu will make it render below when overlapping. Similarily the order of the controls in the mapmenu is set by the order in the config.

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

About control

Adds an about map control. A button is added to the mapmenu. On button click, a splash popup will show general info about the map. NOTE - requires mapmenu control.

Property Description
name the name of the control (about)
options options for the control
Option Description
buttontext the button text shown in the menu
title popup header text
content popup content text
hideWhenEmbedded if set to true, the control is not displayed when the map is embedded. Defaults to false

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

Bookmarks control

Adds a bookmarks control. Clicking the button opens a panel with a list of bookmarks. Clicking a bookmark will pan and zoom to the coordinates and zoomLevel specified in the config file. The bookmarks panel is movable.

Property Description
name the name of the control (bookmarks)
options options for the control
Option Description
title the title shown in the bookmarks panel, also sets the tooltip text. Defaults to Bokmärken .
isActive sets whether the control should be active (open) on map load. Defaults to false .
maxZoom sets the general zoom level. This zoom level is used if no zoom level is set on the bookmark. Defaults to 15 (or highest available zoom level).
duration sets the duration of the pan and zoom animation in milliseconds. Defaults to 300 .
items list of bookmarks. Configured as an array of objects.
hideWhenEmbedded if set to true, the control is not displayed when the map is embedded. Defaults to false .
Items options Description
title title of the bookmark.
coordinates array of point coordinates.
zoomLevel target zoom level for the specific bookmark. Optional.

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

Drag-and-drop control

Adds the ability to drag-and-drop GeoJSON, GPX, IGC, KML and TopoJSON files to the map. Note that the layers are only temporarily available, once the map is closed the layers are lost. It is possible to drag-and-drop multiple files at once.

Property Description
name the name of the control (draganddrop)
options options for the control
Option Description
featureStyles custom styling for the layer.
groupName the name of the group containing the added layers. Defaults to "egna-lager".
groupTitle the title of the group containing the added layers. Used if group doesn't exist. Defaults to "Egna lager".
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
showLegendButton show an add-button in the legend. Requires the drag-and-drop control to be added after the legend. Defaults to false.
styleByAttribute style features in the layer based on their style -attribute. Defaults to false.
zoomToExtent add zoom to extent option for layer menu. Defaults to true.
zoomToExtentOnLoad zoom to the layer extent when loaded. Defaults to true.

Example drag-and-drop control

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

Draw control

Adds a draw control. Drawlayers can be exported or stored with the mapstate functionality. It is also possible to import GeoJSON-layers.

Property Description
name the name of the control (draw)
options options for the control
Option Description
buttonText title for link in mapMenu. Default is 'Rita'
drawTools what extra tools to add. See example for valid values. Object, default is {}
exportable layer setting. Boolean, default is true
groupName the group will be created if it doesn't exist. Default is 'none'
groupTitle title for the group, groupName must also be set. Default is 'Ritlager'
draggable make the group draggable (if created by this control). Boolean, default is true
isActive activate the control at start. Boolean, default is false
layerTitle name of layer. Default is 'Ritlager'
multipleLayers if the user should be able to add multiple draw layers. Boolean, default is false
placement placement of the activate button. Can be screen or menu. Array, default is [ 'menu' ]
queryable layer setting. Boolean, default is false
removable layer setting. Boolean, default is true
showAttributeButton if true the user can add a popuptext to the feature. Boolean, default is false
showDownloadButton add downloadbutton in the toolbar. Boolean, default is false
showSaveButton only useful when using the draw control along with a service. Boolean, default is false
zoomToExtent add button to layer menu. Boolean, default is 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"
}

Editor control

Enables layer editing.

Property Description
name the name of the control (editor)
options options for the control
Option Description
editableLayers Layers that will we handled as editable layers. The name of the layer is used as identifier to get the settings for the layer as defined in layers. Can also be configured on a per layer basis. This will be deprecated in future releases of Origo. Editable can be set as a layer property.
defaultLayer Editable layer that should be chosen as default editable layer.
autoForm If set to true, the attribute form will be displayed automatically after a feature has been drawn. Default is false.
isActive option to set if the editor toolbar should be opened and activated by default. Default is true.
autoSave if edits should be autosaved or not. Defaults to true.
snap option to enable/disable snapping. Default is true.
snapLayers List of layers that should have snapping enabled. Default is editableLayers.
drawTools Extra draw tools besides the standard tools for Point, MultiPoint, Line, MultiLine, Polygon and MultiPolygon. The tools are set for each geometry type as key in an object with the tools in an array. Note that the correct geometry type for a line is LineString but in drawTools it is configured as Line .
attributes definition of attributes and how they should be presented and validated in editor form. If not provided all available attributes will be shown with a standard template.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
validateOnDraw If set to true, the editor prevents drawing invalid geometries (self-intersect). Defaults to false.
featureList If set to true you'll get a list when selecting multiple features. Defaults to true.
featureListAttributes Array of attributes to be showed in the featureList. Default is to just show the feature ID.

Draw tools can be set for each geometry type on editor control level in wich case it adds the configured tools to each layer of that kind in addition to the default tool. Draw tools can also be set on each layer in which case the default tool is not added unless specified.

drawTool Description
Polygon Draws a polygon (default for polygon layers)
MultiPolygon Draws a polygon (default for MultiPolygon layers)
Line Draws a line (default for line layers)
MultiLine Draws a line (default for MultiLine layers)
Point Draws a point (default for point layers)
MultiPoint Draws a point (default for MultiPoint layers)
box Draws a rectangle
object Specifies a draw tool that needs more configuration

CopyTool

Copies a geometry from one vector layer to the currently edited layer.

Property Description
toolName Name of the tool. Copy tool has name 'Copy' Required
groups Array of group names from which geometries can be copied. Mainly useful for layers which names are not known beforehand.
layers Array of layer names that are possible to copy from

If neither groups nor layers are specified all vector layers can be copied from.

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

External url control

Adds a button that will send the center coordinates in an url template and opens the url in a new browser tab. When configuring more than one link, the button expands and displays a button for each url.

Property Description
name the name of the control (externalurl)
options options for the control
Option Description
tooltipText the tooltip text for the button
links Options for the links. Configured as a list. Available options are listed below.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
Links option Description
name the name of the link. Optional.
tooltipText the tooltip text for the button. Optional.
method the method/format that the coordinates will be send in. Valid values are “LatLon” or “XY”. Required.
projection the projection of the external web map services. The projection must be defined in proj4Defs, except EPSG:4326, EPSG:4269, EPSG:3857, EPSG:3785, EPSG:900913, EPSG:102113 or GOOGLE, which are included by default. Default is EPSG:3857.
url url to the external endpoint. Coordinates can be defined within curly brackets. If method is set as “LatLon” then {{LAT}} and {{LON}} must be available in the url. If method is set as “XY” then {{X}} and {{Y}} must be available. Required.
buttonImage path to the button image. If not specified, a default image is displayed. Optional.

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

Fullscreen control

Adds a button that will open an embedded map in fullscreen mode in a new tab/window. This is a default control.

Property Description
name the name of the control (fullscreen)
options options for the control
Option Description
target String. Id of the target container element. Default is the main navigation toolbox (top left).
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example fullscreen control

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

Geoposition control

Adds a button that when clicked centers and zooms the map to the current position. Clicking the button a second time will activate the tracking mode (if enableTracking has been set to true).

Property Description
name the name of the control (geoposition)
options options for the control
Option Description
active Boolean. Whether the control should be activated on map load or not. Defaults to false.
panTo Boolean. Whether to pan to users position or not. Defaults to true.
zoomLevel Integer. Specifies the zoom level that will be used when a position has been aquired. If it is not specified, the map will be zoomed to the fourth closest resolution. This option has no effect if panTo is set to false.
enableTracking Boolean. Option to enable tracking mode. When enabled and activated, the map will continuously center on the user's position. Defaults to false.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example geoposition control

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

Home control

Sets the map extent to the one specified in the options for the control.

Property Description
name the name of the control (home)
options options for the control
Option Description
extent The extent to zoom to. If no extent is provided the initial extent of the map will be used.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example home control

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

Legend control

Adds a legend control. Legend is added to menu and as a map legend to the map.

Property Description
name the name of the control (legend)
options options for the control
Option Description
cls option to add css class references to the legend element.
style option to add inline HTML style properties to the legend element.
expanded true or false if the legend should be expanded or collapsed on load. Default is true.
contentCls option to add css class references to the legend content element.
contentStyle option to add inline HTML style properties to the legend content element.
labelOpacitySlider option to use custom label for the opacity slider. Default is 'Opacity'.
name option to set the legend UI component name. Default is 'legend'.
turnOffLayersControl true or false for whether the turn off layers button should be present in the legend or not. Default is false.
turnOnLayersControl true or false for whether the turn on all layers button should be present in the legend or not. Default is false.
autoHide option to set if the legend should close automatically on map click. Accepted values are 'always' (legend is always closed on map click), 'mobile' (legend is closed on map click if map size is 'm' or smaller (see breakpoints in origo.js)) and 'never' (legend is never closed on map click, this is the default setting).
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
searchLayersControl option to add search function for layers in the legend. Defaults to false.
searchLayersMinLength specifies the minimum length of how many characters should be entered before search, default is 2.
searchLayersLimit specifies how many matches should be shown, default is 10.
searchLayersParameters specifies the parameters which should be used in the search. Defaults to [ 'name', 'title' ] .
searchLayersPlaceholderText specifies the text that should be displayed as placeholder text in search input field. Defaults to 'Sök lager'.
visibleLayersControl true or false for whether the visible layers button should be present in the legend or not. Default is false.
visibleLayersViewActive true or false if the view with visible layers should be active or not from start. Default is false.

Example legend control

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

Adds a button to the mapmenu that when clicked opens a new browser tab with the specified url. NOTE - requires mapmenu control.

Property Description
name the name of the control (link)
options options for the control
Option Description
title Sets the link title of the control.
url Sets the address for the link.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
{
  "name": "link",
  "options": {
      "title": "Origo",
      "url": "https://github.com/origo-map/origo"
  }
}

Mapmenu control

Creates a menu on the top right for controls.

Property Description
name the name of the control (mapmenu)
options options for the control
Option Description
isActive option to set if the mapmenu should be open on load. Default is false.
breakPointSize sets the breakpoint below which the mapmenu will be closed on load by default. Accepted values are 'xs', 's', 'm', and 'l', corresponding to the breakpoints set in origo.js. Default is 'l' (768px).
autoHide option to set if the mapmenu should close automatically on map click. Accepted values are 'always' (mapmenu is always closed on map click), 'mobile' (mapmenu is closed on map click if map size is 'm' or smaller (see breakpoints in origo.js)) and 'never' (mapmenu is never closed on map click, this is the default setting).
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example mapmenu control

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

Measure control

Adds a measure control. Measure length, area, buffer or elevation (requires access to external elevation data web service) in the map.

Property Description
name the name of the control (measure)
options options for the control
Option Description
measureTools Array of tools to use. Valid are 'length', 'area', 'elevation' and 'buffer'. Default is [ "length", "area" ] .
default What tool to use as default. Default is 'length'.
elevationServiceURL URL to elevation data web service, with variable parameters enclosed in curly braces. Applicable variables are {easting} and {northing} . Required if using elevation tool.
elevationTargetProjection Projection code for coordinates to be sent to an elevation web service, if other than the current map projection.
elevationAttribute "Path" to the elevation data attribute in the web service response. Required if using elevation tool.
showSegmentLengths True or false if individual segment lengths should be shown. Default is false.
showSegmentLabelButtonActive True or false if the label for segment lengths should be active or not from start. Default is true.
snap Enables snapping. Defaults to false.
snapIsActive Sets the initial state of the snap.
snapLayers Array of layers that snap is enabled for. If undefined, snap will be enabled for all layers.
snapRadius Distance from point where snap is triggered.
useHectare True or false if hectare should be used for area between 10 000 and 1 000 000 square meters. Default is true and hectare is used, false and square meters is used.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example measure control

{
  "name": "measure",
  "options": {
    "measureTools": ["length", "area"],
    "default": "length"
  }
}

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

Position

Control to show coordinates of the mouse cursor or map center and navigate to coordinate. The control supports multiple coordinate systems that can be toggled by clicking the coordinate system label. By clicking the hair cross the functionality toggles between displaying mouse position or map center. In map center mode it is possible to navigate to a coordinate by entering a new value in the coordinate display box.

Property Description
name The name of the control. Required. For position contol name is "position".
options A positionControlOptions object

positionControlOptions

Option Description
title alias name of the current map projection to be displayed. Optional. If specified it is the first in the toggle loop.
projections Array of positionControlProjectionConfiguration objects that defines which projections are possible to toggle between. The projection must be defined in proj4Defs, except EPSG:4326 and EPS:3857 which are included by default. Alternatively projections can be an object with projection codes as properties and display name as value.
noPositionText when empty last mouse position is rendered else text of choise renders. If this option is not defined, no coordinates when no mouse position.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

positionControlProjectionConfiguration

Option Description
projectionCode String with the EPSG code e.g. "EPSG:4326". Required.
projectionLabel String with text to display in the control for this projection. Required.
dms Bool. If true coordinates are displayed in Degree minute second format. Optional, defaults to false.
precision Number of decimals in the coordinate. If dms is true, it sets the number of decimals of seconds . Optional, defaults to 0 for all coordinate systems except EPSG:4326, for which it defaults to 5 if not using dms .

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": ""
  }
}

Print

Adds a print control to the mapmenu. NOTE - requires mapmenu control.

Property Description
name the name of the control (print)
options options for the control
Option Description
placement option where the button is displayed. Optional, defaults to [ "menu" ] . [ "screen" ] or both are possible.
leftFooterText a small left-aligned text on the bottom left. Optional.
showCreated shows the current date as a small right-aligned text on the bottom right. Optional. Default is false.
createdPrefix text displayed before the current date on the bottom right. Requires showCreated: true . Optional.
logo a object for configure placing the logo on the printed map. Optional.
cls a css class for styling e.g. the placing of the image. Optional, defaults to "padding-bottom-small".
src the path to logo image relative to the maps base url. Optional, defaults to "css/png/logo_print.png".
style a style object for setting e.g. the height of the image. Optional, defaults to "{"height": "3rem"}".
northArrow a object for configure the north arrow on the printed map. Optional.
cls a css class for styling e.g. the placing of the image. Optional, defaults to "padding-right-small printmap-north-arrow".
src the path to logo image relative to the maps base url. Optional, defaults to "css/png/north_arrow_print.png".
visible option to set if the north arrow should be visible on load. Default is true.
style a style object for setting e.g. the height of the image. Optional, defaults to "{"height": "5rem"}".
showScale option to set if the scale should be visible on load. Optional, default is true.
scales Array of scales to use. Optional, if not specified the scales are calculated from the map resolutions.
supressResolutionsRecalculation option to set if the resolutions array should not be recalculated when entering the print preview (and restored when exited). Recalculating alleviates a problem with large scales and 300DPI. The option defaults to false.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
suppressNewDPIMethod option to set if the new DPI calculation when changing resolution in the print preview should not be used. The option defaults to false.
mapInteractionsActive option to set whether map interactions should be enabled by default (true) or not. Default is false.

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

Progressbar control

Adds a control to show the load progress of all the layers in the map. The progressbar is located at the bottom of the application above the footer.

Property Description
name the name of the control (progressbar)
options options for the control
Option Description
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example progressbar control

{
  "name": "progressbar"
}

Search control

Adds a search control. The search control requires a search end point to function.

The search control uses autocomplete. Autocomplete suggestions may optionally be grouped with headings, e g with one group of suggestions per layer.

There are several ways to configure how selected search result should be handled. All options require that url and searchAttribute are provided.

  • Option 1. Feature info is requested from a map service, which is used to get the geometry and attributes. The layer is defined as an ordinary layer in the layer config section.
    Additional search options required: geometryAttribute, idAttribute and layerNameAttribute
  • Option 2. Same as option 1 but for single layer search. layerName is defined as an option and is not included in the search response.
    Additional search options required: geometryAttribute and layerName
  • Option 3. Complete feature info is included in the search result.
    Additional search options required: geometryAttribute, titleAttribute and contentAttribute
  • Option 4. This is a single table search. No layer is defined.
    Additional search options required: geometryAttribute and title
  • Option 5. Feature info is shown without selection in the map. This is a simple single table search.
    Additional search options required: title, northing and easting
Property Description
name the name of the control (search)
options options for the control
Option Description
url url to the search endpoint. Always required.
queryParameterName name of the parameter in the search request containing the query. Default is 'q'.
searchAttribute the attribute that will be queried. Always required.
northing the attribute for northing coordinates. Only if geometryAttribute is not provided.
easting the attribute for easting coordinates. Only if geometryAttribute is not provided.
title title for the popup presenting the search result
hintText placeholder text for the search input. Default is Sök.
limit the max number of suggestions to be displayed. Default is 9.
minLength minimum number of characters to trigger search. Default is 4.
groupSuggestions whether to group autocomplete suggestions or not. Depending on the configuration option used (see above), titles are set using the title properties of defined map layers (options 1 and 2), values from the attribute in the result defined by titleAttribute (3) or the title search control configuration option (4 and 5). Defaults to false.
geometryAttribute geometry attribute is required if northing and easting are not used.
maxZoomLevel maximum zoom level after selection. Default is 2.
idAttribute attribute in the response storing the feature id.
layerNameAttribute attribute in the response storing the layer name. The layer must be defined in the map.
layerName layer defined in map if not included in the search response.
titleAttribute attribute in response storing the featureinfo title.
contentAttribute attribute in response storing the featureinfo content.
includeSearchableLayers whether to include searchable layers in query string or not. Defaults to false.
searchableDefault default value for searchable. 'always', true (searchable when visible) or false. Defaults to false.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

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..."
  }
}

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..."
  }
}

Sharemap control

Creates a shareable link to the map. Current extent and zoom, visible layers and the map pin (if applicable) will be shared. If a feature in the map is selected, the id of the feature will be in the link making the map zoom to it on load. This goes for WFS, Geojson, Topojson and AGS Feature layers. The sharemap control also comes with the option to save map state on the server (requires Origo Server). A saved map state is retrieved with an ID instead of an URL. Adds a button to the mapmenu. NOTE - requires mapmenu control.

Property Description
name the name of the control (sharemap)
options options for the control
Option Description
storeMethod Should be set to saveStateToServer in order to utilize the save-to-server feature.
serviceEndpoint URL to the Origo Server service endpoint, for example https://www.mydomain.com/mapstate .
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.
icon icon for the menuitem in the menu. Defaults to "#ic_screen_share_outline_24px".
title title for the menuitem in the menu. Defaults to "Dela karta".

Example sharemap control

{
  "name": "sharemap"
}

Splash control

Adds a splash control. It will show a modal window when the map is loaded. The content can defined in the content option or as a html file.

Property Description
name the name of the control (splash)
options options for the control
Option Description
title modal title text
url url to a html file
content content text of the modal
hideButton adds button to stop the current splash from displaying on subsequent visits to the map. If the content is updated, the splash will be displayed again. Options available are 'visible' (the only option required), 'hideText' and 'confirmText'.
style adds the css style to the splash window.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example splash control

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

Scale control

Adds a scale control that will show an approximation of the current scale in text.

Property Description
name the name of the control (scale)
options options for the control
Option Description
scaleText text to show before the scale value.
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example scale control

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

Scalepicker control

Adds a scalepicker control that allows the user to change the map scale using a dropdown list of predefined scales. The available scales are determined by the resolutions specified in index.json.

Property Description
name the name of the control (scalepicker)
options options for the control
Option Description
buttonPrefix text to show before the scale value on the control button
listItemPrefix text to show before the scale value in the dropdown list
hideWhenEmbedded if set to true, the control is not added when the map is embedded. Defaults to false.

Example scalepicker control

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

Layers

A layer included in the map can be either vector or raster. It can be a file such as geojson or a service such as WFS.

GEOJSON

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For GeoJSON source the type is GEOJSON.
source url to the layer.
projection set projection (e g to "EPSG:4326") to request features in another reference system and Origo will handle the transformation. The proj4Defs has to be configured in index.json unless it's EPSG:4326 or 3857.
style the name of the referenced style to be used for the layer.
styleByAttribute style features in the layer based on their style -attribute. Defaults to false.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
layerType option to set how the vector layer should be rendered. The options are cluster, image or vector. Default is vector.
clusterStyle the style to be used for clustered features. Is required if layerType cluster is used.
clusterOptions options for clustering. See the settings page for details.
stylePicker Adds a dropup with alternative styles in the layer info. An array of styles defined with title, style and clusterStyle. See stylePicker . Optional.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
featureinfoTitle attribute to be used instead of the title property as the title for the popup/sidebar. Optional.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
exportable Adds a Export layer option to the layer info menu if set to true. Optional.
exportFormat String or array of formats for file export if exportable is true. Can be set to geojson, gpx or kml. Defaults to geojson.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
headers Used for setting headers that should be included in the request of the GeoJSON. Formatted as a object with key/value pairs for the headers. Can be used for setting which type to accept or add a apikey.
attachments An attachment object containing configuration for editing and displaying attachments

Basic example GeoJSON

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

GPX

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For GPX source the type is GPX.
source url to the layer.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is true.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
layerType option to set how the vector layer should be rendered. The options are cluster, image or vector. Default is vector.
clusterStyle the style to be used for clustered features. Is required if layerType cluster is used.
clusterOptions options for clustering. See the settings page for details.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
featureinfoTitle attribute to be used instead of the title property as the title for the popup/sidebar. Optional.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
exportable Adds a Export layer option to the layer info menu if set to true. Optional.
exportFormat String or array of formats for file export if exportable is true. Can be set to geojson, gpx or kml. Defaults to geojson.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
headers Used for setting headers that should be included in the request of the GPX. Formatted as a object with key/value pairs for the headers. Can be used for setting which type to accept or add a apikey.
attachments An attachment object containing configuration for editing and displaying attachments

Basic example GPX

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

TopoJSON

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For TopoJSON source the type is TopoJSON.
source url to the layer.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
layerType option to set how the vector layer should be rendered. The options are cluster, image or vector. Default is vector.
clusterStyle the style to be used for clustered features. Is required if layerType cluster is used.
clusterOptions options for clustering. See the settings page for details.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
featureinfoTitle attribute to be used instead of the title property as the title for the popup/sidebar. Optional.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
attachments An attachment object containing configuration for editing and displaying attachments

Basic example TopoJSON

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

WFS

Property Description
name the unique name of the layer used internally and the name of the layer in the wfs service. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
id the id or ids used to identify the layers in the map server. White spaces and special characters should be avoided.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For WFS source the type is WFS.
source named source of the layer. The source must be defined.
projection set projection (e g to "EPSG:4326") to request features in another reference system and Origo will handle the transformation. The proj4Defs has to be configured in index.json unless it's EPSG:4326 or 3857.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
editable if the layer should be editable or not. Requires the editor control. Defaults to false. Optional.
allowedEditOperations List of available edit tools. Possible values are: updateAttributes , updateGeometry , create , delete . Only applies if layer is editable. Defaults to all. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
layerType option to set how the vector layer should be rendered. The options are cluster, image or vector. Default is vector.
clusterStyle the style to be used for clustered features. Is required if layerType cluster is used.
clusterOptions options for clustering. See the settings page for details.
stylePicker Adds a dropup with alternative styles in the layer info. An array of styles defined with title, style and clusterStyle. See stylePicker . Optional.
geometryName geometry attribute name. Default is geom.
geometryType geometry type for the layer.
filter filter provided as cql . Optional.
strategy the ol.loadingstrategy for the layer. Can also be set on source. The options are tile, bbox or all. Default is bbox.
requestMethod request method for this layer. Can be set to 'post', otherwise it will be 'get'. Default is 'get'.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
featureinfoTitle attribute to be used instead of the title property as the title for the popup/sidebar. Optional.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
exportable Adds a Export layer option to the layer info menu if set to true. To ensure all features in a layer is exported, strategy should be set to all . Optional.
exportFormat String or array of formats for file export if exportable is true. Can be set to geojson, gpx or kml. Defaults to geojson.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
attachments An attachment object containing configuration for editing and displaying attachments
isTable Bool that indicates if the geometry should be ignored. Implies visible . Only useful when layer is a child in related layers. Optional. defaults to false
relatedLayers Array of relatedLayers objects defining child layers. Optional
Source options Description
url url to the wfs endpoint
strategy the ol.loadingstrategy for the layer. Can also be set on layer. The options are tile, bbox or all. Default is bbox.
requestMethod request method for this source. Can be set to 'post', otherwise it will be 'get'. If set on layer level this option will be omitted. Default is 'get'.
clusterOptions options for clustering. See the settings page for details.

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

AGS_FEATURE

A vector layer created with an ArcGIS Server feature service.

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
id the id of the layer in ArcGIS Server.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For ArcGIS Server feature service the type is AGS_FEATURE.
source named source of the layer. The source must be defined.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
editable if the layer should be editable or not. Requires the editor control. Defaults to false. Optional.
allowedEditOperations List of available edit tools. Possible values are: updateAttributes , updateGeometry , create , delete . Only applies if layer is editable. Defaults to all. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
layerType option to set how the vector layer should be rendered. The options are cluster, image or vector. Default is vector.
clusterStyle the style to be used for clustered features. Is required if layerType cluster is used.
clusterOptions options for clustering. See the settings page for details.
geometryName geometry attribute name. Default is geom.
filter filter are used with query filter where . Optional.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
featureinfoTitle attribute to be used instead of the title property as the title for the popup/sidebar. Optional.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
attachments An attachment object containing configuration for editing and displaying attachments
Source options Description
url url to the ArcGIS Server endpoint
clusterOptions options for clustering. See the settings page for details.

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'"
}

VECTORTILE

A vector tile layer.

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For vector tiles service the type is VECTORTILE.
source named source of the layer. The source must be defined.
layerURL url to the service added to the source url. Mandatory unless layerName and gridset is set. E.g. layerName@gridset@format/{z}/{x}/{-y}.format
layerName the layer name on the webserver, used to build the layerUrl. Mandatory unless layerUrl is set.
gridset the gridset defined on the webserver, used to build the layerUrl. Mandatory unless layerUrl is set.
format format fot the vector tiles. Valid are topojson, geojson and pbf. Mandatory.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
tileGrid custom tileGrid for the vector tile layer. extent, alignBottomLeft, resolutions and tileSize can be set.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
Source options Description
url url to the vector tiles endpoint. E.g. http://yourhost/geoserver/gwc/service/tms/1.0.0/
tileGrid custom tileGrid for the vector tile source. extent, alignBottomLeft, resolutions and tileSize can be set.

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

WMS

Property Description
name the unique name of the layer used internally and the name of the layer in the WMS service. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For WMS the type is WMS.
source named source of the layer. The source must be defined with the layers source options.
style the name of the referenced style to be used for the layer.
format the image format used for the layer. Default is 'image/png' unless format is set for the source.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
gutter gutter setting for the layer. Default is 0.
featureinfoLayer the named layer this layer should use for featureinfo requests. Optional.
stylePicker Adds a dropup with alternative styles in the layer info. Overrides style and hasThemeLegend and legendParams . See stylePicker . Optional.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
tileGrid custom tileGrid for the WMS layer. extent, alignBottomLeft, resolutions and tileSize can be set.
renderMode whether to render the layer tiled ('tile') or single tiled ('image'). Defaults to 'tile'.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
attachments An attachment object containing configuration for displaying attachments
infoFormat Origo's get feature info expects responses in 'application/json' but some WMS servers (f.e. ArcGIS) don't supply it, so it's possible here to request in format 'application/geo+json' or 'application/geojson' if the server response with that format. Optional.
hasThemeLegend Whether extendedLegend or not. See WMS autolegend . Optional, defaults to false. Has no effect if a style is also defined.
legendParams A getLegendGraphic parameters object, see WMS autolegend . Optional, has no effect if a style is also defined.
imageFeatureInfoMode Sets the featureinfo mode for this image type layer. Alternatives are pixel which will produce feature info if the pixel queried of a feature of a visible layer isn't totally transparent and visible which works on transparent styles too. always will in addition produce feature info for layers that are not visible. Feature info is dependant upon queryable being true . If set will override the map level option with the same name. If not set the featureinfo behaviour will be decided at the map level. Optional.
requestMethod request method for this layer. Can be set to 'post', otherwise it will be 'get'. Default is 'get'.
sourceParams A object with any additional params that can be added to the source and sent to the WMS server. For example CQL_FILTER can be provided as cql and there by filter on which objects should be included on a Geoserver layer. For a QGIS Server the param FILTER can be used in a similar maner, the syntax should be in OGC filter format. Other server specific params can also be set as DPI, BGCOLOR oc OPACITIES. Optional.
Source options Description
format the image format used for the layer unless format is set on layer-level. Default is 'image/png'.
requestMethod request method for this source. Can be set to 'post', otherwise it will be 'get'. If set on layer level this option will be omitted. Default is 'get'.
url url to the wms endpoint
version the OGC WMS version. Default is 1.1.1.
tileGrid custom tileGrid for the WMS source. extent, alignBottomLeft, resolutions and tileSize can be set.

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

WMTS

Property Description
name the unique name of the layer used internally and the name of the layer in the WMTS service. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For WMTS the type is WMTS.
source named source of the layer. The source must be defined.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
format the image format to use. Default is image/png.
featureinfoLayer the named layer this layer should use for featureinfo requests. Optional.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
wmtsStyle WMTS layer style, if applicable.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
attachments An attachment object containing configuration for displaying attachments
Source options Description
url url to the wmts endpoint
matrixSet the named matrixSet if provided for the source. Default matrixSet is the matrixSet created for the map and depends on the map resolutions.
matrixIdsPrefix the named prefix for tileMatrix. Default matrixIdsPrefix is the maps projection code.
resolutions Array of resolutions. Defaults to map resolutions.
origin Origin of the gridset. Defaults to topleft corner of the projections extent.
tileSize Array of tileSizes. Defaults to [ 256,256 ] .

Basic example WMTS

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

XYZ

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For XYZ the type is XYZ.
layerURL path to the image tiles. Can be a absolute path or relative used along with the source url.
source named source of the layer. Can be a absolute path or relative used along with the layerURL. Optional if layerURL is set.
style the name of the referenced style to be used for styling the legend. Must be an image and if omitted a generic background map image will be used.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default if tileGrid is not set.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
tileGrid If layers tilegrid differs from the map. Optional.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
Source options Description
url url to the xyz endpoint. Used with or instead of layerURL. Optional if layerURL is set.
tileGrid custom tileGrid for the XYZ source. extent, alignBottomLeft, resolutions and tileSize can be set.

Basic example XYZ

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

AGS_MAP

A tiled layer created with an ArcGIS Server map service.

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided. To be able to reuse layers add after the layer name a double underscore plus a suffix to tell them apart.
id the id of the layer in ArcGIS Server.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For ArcGIS Server map service the type is AGS_TILE.
source named source of the layer. The source must be defined.
style the name of the referenced style to be used for the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
queryable if featureinfo should be enabled for the layer. Default is true.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
renderMode can be either image or tile. Default is tile.
legend if the layer should be included in the map legend. Default is false.
attribution attribution for the layer. Optional.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
minScale the minmum scale the layer is visible. Optional.
maxScale the maximum scale the layer is visible. Optional.
attributes definition of attributes and how they should be presented in featureinfo. If not provided all available attributes will be shown with a standard template.
searchable used with includeSearchableLayers in search control. Can be set to 'always', true (when visible) or false.
tileGrid custom tileGrid for the AGS tile layer. extent, alignBottomLeft, resolutions and tileSize can be set.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.
attachments An attachment object containing configuration for displaying attachments
imageFeatureInfoMode Sets the featureinfo mode for this image type layer. Alternatives are pixel which will produce feature info if the pixel queried of a feature of a visible layer isn't totally transparent and visible which works on transparent styles too. always will in addition produce feature info for layers that are not visible. Feature info is dependant upon queryable being true . If set will override the map level option with the same name. If not set the featureinfo behaviour will be decided at the map level. Optional.
Source options Description
url url to the ArcGIS Server endpoint
tileGrid custom tileGrid for the AGS tile source. extent, alignBottomLeft, resolutions and tileSize can be set.

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

OSM

A tiled layer from the OpenStreetMap tile server. Source is OpenLayers default and not configurable.

Property Description
name the unique name of the layer used internally. White spaces and special characters should be avoided.
title title for the layer visible to the user.
abstract short description of the layer shown in the layer info. Optional.
type type of source for the layer. For OpenStreetMap layer the type is OSM.
style the name of the referenced style to be used for the layer. Only visible in the legend, not for styling the layer.
group group the layer belong to. If group is not provided it will not be included in legend. Optional.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.

Basic example OSM

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

Group

A group layer is a simulated layer that contains several layers. For a user, a group layer looks just like a normal layer in the legend.

Property Description
name the unique name (a dummy name) of the layer. White spaces and special characters should be avoided.
title title for the layer visible to the user.
abstract short description of the layer. Adds a text in the legend. Optional.
type type of source for the layer. For group layers the type is GROUP.
style the name of the referenced style to be used for the layer. Only visible in the legend, not for styling the layer.
group group the layer belong to. If group is not provided it will not be included in legend.
opacity opacity of the layer. Value between 0 and 1. Default is 1.
visible if the layer should be visible. Default is false.
extent extent of the layer. Map extent is default.
removable Adds a Remove layer option to the layer info menu if set to true. Optional.
zoomToExtent Adds a Zoom To option to the layer info menu if set to true. Optional.
layers the included layers. Defined as normal layers.
opacityControl Adds an opacity slider in the legends extended layer info. Optional, defaults to true.
css Used for adding CSS properties to layer canvas element. Formatted as key/value pairs.

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"
    },
    {
        "name": "mywfs",
        "title": "My wfs",
        "source": "local_wfs",
        "style": "mask",
        "type": "WFS"
    }
    ]
}

Source

Sources defined for the map are named under source. Each source is available for a layer by referencing its name.

Example defining sources

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

Attributes

By default all available attributes for a queryable layer are listed in a featureinfo popup. The content can be customized in several ways, for example to make url:s or embed images. There are two basic approaches to do this. The first is to use a named handlebars template. This is what is used by default but requires a precompiled template. The second approach is to define how each attribute should be presented in the layer configuration. Each attribute is defined within curly brackets with options according the table below.

Information window

Attribute options Description
name the name of the attribute. The value of the attribute will be shown. Optional.
title static label for the attribute. Optional.
url absolute url ('//example.com/nonsense.html') or attribute containing an url. Creates a link automatically and can be combined with name as value. Optional.
urlPrefix a general prefix to be used together with url or img. Optional.
urlSuffix a general suffix to be used together with url or img. Optional.
target default behaviour is to open url in new window (_blank). It's possible to specify other targets as _top, _self and _parent or to open link in an iframe in a modal window which should than be set to modal for normal size or modal-full. Optional.
targetTitle used along with target to define title in modal titlebar and link tooltip. Can be set to "static text" or "{{attribute value}}". Default is url.
img attribute containing url to an image. The image will be embedded. Optional.
carousel attribute containing url to several images combined with splitter option. Set autoplay in featureinfoOptions to have the carousel rotate the images. Optional.
splitter set a splitter for example , or ; which is used to split the attribute if it is made up of delimited list of compounded attributes of the same type. To be used together with url , img , carousel and linktext . Optional.
cls css class name for custom styling. Optional.
html Custom html. Attributes can be referenced by placing the attribute name within double curly brackets. It also possible in a similar way to apply a function by prepending the function name with @ . See table below for supported functions. The html option can't be combined with any of the other options, except for cls . Optional.
linktext Name of attribute that holds the text that should be used on links when using url in combination with splitter . Optional.
prefix adds the text entered in front of the attribute value. Optional.
suffix adds the text entered after the attribute value. Optional.
formatDatetime makes it possible to format an attribute that contains a datetime value that follows ISO 8601 or Unix TimeStamp. FormatDatetime value should be a object specifying which locale to be used for the formatting and an options object with choosen formats, for example {"locale": "sv-SE", "options": { "dateStyle": "full", "timeStyle": "long" }} if you want swedish formatting with ful date and long time reprsentation or {"locale": "en-US", "options": { "weekday": "long", "year": "numeric", "month": "long", "day": "numeric" }} if you want american english, weekday and month as word and year and day as numbers. More formatting options can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat The default value is {"locale": "default", "options": { dateStyle: 'full', timeStyle: 'long' }} . Optional.

Html Attribute Functions

An html attribute function is either used with no arguments (all defaults) or all arguments specifed enclosed by parenthesis and separated by comma. Arguments are specified as constant values without any form of quotation marks.

Function name Description Arguments Example
@center Prints out the center coordinate of the geometry coordinatesystem: string (defaults to map coordsys), axis rotation: default | | reverse (defaults to default ) {{@center(EPSG:4326,reverse)}}
@area Prints out the area of the geometry. Area is automatically scaled to a suitable unit (m2, ha, km2) decimals: integer (defaults to 2) {{@area}} {{@area(1)}}
@length Prints out the length of the geometry. Length is automatically scaled to a suitable unit (m,km) decimals: integer (defaults to 2) {{@length(1)}}

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

Editor attributes

When editing a layer, additional attributes are supported to control the behaviour of the edit attributes tool.

Attribute option Description
type The attribute type. Determines which edit control is used. See Editor attribute types (required)
allowBatchEdit bool true if allowed to update a selection of features with the same value (optional)
config object Additional configuration. The config object depends on the type .
constraint string \<event > :\<attribute name > :\<value > or \<event > :\<attribute name > : [ \<value1 > ,\<value2 > , ... ] , where \<event > is the event that the \<attribute name > input emits, most likely change . Attribute is only editable when \<attribute name > has value \<value > (optional)
list array of strings or array of list object . List of possible values for searchList. (optional)
maxLength int Maximum number of characters (optional)
options array of strings List of allowed values. Required for type dropdown (optional)
readonly bool True if attribute should be displayed but not allowed to edit (optional)
required bool True if the attribut must have a value (optional)
defaultValue string or object . When type is string that string is used as default value on feature creation. When it is an object a defaultValue object defines behaviour (optional)

Editor attribute types

type format required readonly maxLength constraint Description
text string supported supported supported Text input
textarea string supported supported supported Text input with resizable box
dropdown string supported supported Dropdown based on options values
checkbox boolean or configured values supported Checkbox, defaults to not checked.
image base64 supported Uploads image
color hexadecimal supported Activates a color-picker
time hh:mm:ss supported supported Defaults to current time. Use defaultTime:false to not.
date YYYY-MM-DD supported supported Defaults to current date. Use defaultDate:false to not.
datetime YYYY-MM-DD hh:mm:ss supported supported Defaults to current date. Use defaultDatetime:false to not.
email string supported supported Email address
url string supported supported Homepage address
integer integer supported supported Whole number
decimal decimal supported supported Decimal number
searchList string supported supported. Defaults to 50 Dropdown based on options values with search capabilities.
hidden string Not visible to the user.

searchList List object

Defines the possible values in a searchList

Property Description Required Default value
value string text to display. If useBackingValue is set it is used as the value while label is used for display When location is not specified
src url to an image that will be displayed next to value . Url is relative to app or absolute No
location url to a HTML page that contains links to images. All a-tags hrefs that matches extension will be used as list items. Filename will appear as text and the image itself as a thumbnail next to the text. If location is specified it must be only item in list No
extension Filename extension without dot to filter links when using location When location is specified
label Text to display and search instead of value when useBackingValue is set When useBackingValue is true

searchList Config object An object that defines additional configuration for searchList. The searchList can be configured to get its list from static configuration or a remote server. If using a remote server it can either get all available options in one request or query the server for each keypress. It can also be configured to use value and label similar to an HTML select drop down. In that case value is stored in the database but label is displayed in the searchList.

Requirerments on the backend server If the url option is used an additional HTTP server endpoint is needed, not included in the origo project. The server must respond with a list of searchList list objects as described above with the exception that location is not supported. There is no support for authentication other than what the browser automatically provides, e.g. sending cookies or authentication headers if server is located on same site as application.

If the dynamic option is used the server must accept a GET parameter named "input" or the configured queryParameter name. The parameter gets the value of the searchList text box and the server should return a list of matching search items. The exact algorithm is up to the server, but origo will assume the list is filtered and sorted so the list will be displayed as is as suggestions, but will be truncated to maxItems. If the server's algorithm is not based on substrings of the value, the highlighting may not work as expected.

If the useBackingValue is specified in combination with dynamic the server must besides return both value and label for each list item also support reverse looking up in order to display correct label for the current value when opening the attribute editor. The reverse lookup is performed by sending the current value as GET parameter "value". The surver must then respond with a list with exactly one searchList list objects with both value and label that corresponds to the current value.

Property Description Required Default value
url Url (GET) that responds with a JSON array of List object ( location not supported) or array of string . If specified, list property is ignored. No
dynamic true if the server specified in url should be queried for each keypress. No false
queryParameter Name of query parameter to use to send user input to url when dynamic is true No "input"
allowOnlyFromList true if the user only can input values from the list, which makes it work like a searchable drop down. No false
disallowDropDown true to allow the user to click the down arrow (or enter) when input is empty and get all possible suggestions even if minChar has not been reached. No false
minChars Number of character that must be written before suggestions are displayed. No 2
maxItems Number of suggestion items to display No 10
typeMoreText The text to show to the user if the input has less then minChar characters. No "Skriv fler tecken"
noHitsText The text to show to the user if there are no suggestions to show. No "Inga träffar"
useBackingValue If set to true the list items must have both value and label . value is stored in the database and label is displayed in the searchList. If used in combination with dynamic=true , the server must also support reverse lookup as described in the requirements on the backend server. No false ,
valueQueryParameter When using useBackingValue in combination with dynamic the GET parameter name that is used for reverse lookup can be set using this parameter No "value"

defaultValue object The defaultValue object controls how an attribute's default value is handled. Default values are always set when creating new features, and can optionally be set when updating attributes. Default values can be overridden in the attribute editor unless attribute is configured as readonly or hidden.

Property Description Required Default value
type Source of default value. One of sessionStorage , localStorage , timestamp . If timestamp is specified it overrules default values for input types time , date and datetime Yes
key key in sessionStorage or localStorgage When type is localStorage or sessionStorage
updateOnEdit true if default value should be applied when editing as well as creating a new feature. No false
timeStampFormat One of time = "HH:mm:ss", date = "yyyy-MM-dd", datetime = "yyyy-MM-dd HH:mm:ss", timestamp = "yyyy-MM-ddTHH:mm:ss No timestamp
useUTC true if time should be in UTC, otherwise local time No false

checkbox Config object An object that defines additional configuration for checkbox. The entire object is optional and all properties are set to default if omitted.

Property Description Required Default value
uncheckedValue Value that corresponds to the unchecked state No 0 (false)
checkedValue Value that corresponds to the checked state No 1 (true)

Example editor attributes

{
  "name": "art",
  "title": "Art: ",
  "type": "text",
  "maxLength": 64,
  "readonly": true,
}
{
  "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
          }
        }
 ]

Attachments

While attributes are taken from each feature itself in a layer, an attachment is a file that is stored somewhere else but can be treated as an attribute. An attachment is typically an image or document that relates to a special feature and for practical reasons can not be stored in an attribute. Attachments can be viewed, added and removed by the user in the editor form and viewed in featureInfo as links or emedded as images.

Attachments are configured on each layer. It can be configured for both raster and vector layers, but can only be edited on vector layers. In order to use attachments, an attachment server is needed. The attachment server must implement the arcgis server rest api for attachments.

Optionally the server can extend the AGS interface by adding the concept of attachment groups in order to group attachments in different groups. Groups can be used to have different rules and display them differently. AGS server can be used out-of-the-box for AGS layers, but the extented format must be implemented as a server side component.

The extensions to the AGS format are:

  • The response from attachments infos must include a "group" property for each attachmentInfo object
  • The request to addAttachment must include a "group" parameter

A reference implementation of the extended format is available here: https://github.com/ornskoldsvikskommun/attachmentServer-reference It should not be used for production environments as it lacks security, performance and flexibilty.

Attachment configuration

Attachments are configured on each layer using the "attachments" property containing an object with the following properties.

Property Description Required Default value
url The base adress for the attachment server. Yes
formTitle Title of section in editor form No 'Bilagor'
format The format to use. 'origo' or 'arcgis'. 'origo' extenteds the AGS format by using groups No 'origo'
foreignKey Name of the attribute in the parent feature that contains the private key. No Uses id of feature
stripLayerNameFromId Removes layer name from featureid when foreignKey is not specified. Useful when using geoserver wfs services to get only database FID as private key. No true
layerId The layer id in the attachment server. No Layer name
groups Array of group objects defining an attachment group. A group has its own title and each group is treated as a separate attribute. At least one group has to be specified. If format is "arcgis" exactly one group must be specified Yes

Group object

Property Description Required Default value
name Name of the group on the attachment server. Ignored for format 'arcgis' Yes
title Title displayed in the editor. Ignored for format 'arcgis' No name
linkAttribute Name of an attribute to create on a feature containing all links as a semicolon separated list. Can be used to create links in featureInfo using the img or url property. No
fileNameAttribute Name of an attribute to create on a feature containing all filename as a semicolon separated list. Order is same as linkAttribute list. Can be used in combination with linkAttribute to set link text using the linktext property No
allowedFiles Comma separated list of valid file extensions and mime types that are allowed to upload. Format is accordning to the accept attribute of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file No *

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": ";"
     }
]

A related layer is a layer that is a child in a 1-to-many relationship. Origo supports related layers for WFS layers by defining a private-foreign key relation between layers. The layers do not have to be in the same database or be servered from the same WFS server. The relation is only stored in the child object, which makes it suitable for adding attributes to a table that is considered read only. A layer can have several child layers and a child layer can have child layers of its own.

Entries in the child layer can be added, deleted and edited through the parent's edit form and does not have a geometry of its own. Child objects may have a geometry, but there is not support to edit or add new geometries other that edit the child layer directly.

Attributes from child layers can be aggregated and displayed in the featureInfo window of the parent.

All configuration regarding the relation is performed on the parent layer. The child layer must be configured as an ordinary wfs layer and most likely configured with 'isTable': true. The child layer can use 'strategy': 'bbox' even if it is a table. In that case related objects are fetched when the parent is edited or featureInfo is displayed

Relations are configured on the parent layer using the "relatedLayers" property containing an array of objects with the following properties.

Property Description Required Default value
layerName Name of the child layer as already configured as a layer Yes
PK Name of the field that holds the private key in the parent object. No featureid (omit for featureid as that can not be explicitly set)
stripPK If PK is featureid, remove layer name part from featureid when joining. Useful to keep only the fid part as FK in the database. No true
FK Name of field in child that holds the foreign key. When a new entry is created this field will be updated with the value of PK of the parent. Yes
FKIsString Has to be true if the FK field datatype in database is string. No false
childTitle The title (string) that will be displayed above all child elements in the parent's attributes editor No Child layer's title
featureTitle Name of the attribute that holds the text that will be displayed in the parent's attribute form for each feature No featureid
maxChildren Number of children that can be added. No Unlimited
cascadingDelete How to handle if parent is deleted. Can be one of 'cascade' : delete recursively, both in database and in local layer. 'db' : Assume database has cascading delete and only recursively delete locally. 'none' : Do nothing. Child remains both locally and in db, orphaned No 'none'
disableAdd true if the add button in the parent's edit form should be disabled for this layer No false
disableDelete true if the delete button in the parent's edit form should be disabled for this layer No false
disableEdit true if the edit button in the parent's edit form should be disabled for this layer No false
promoteAttribs An array of promoteAttrib objects that defines how attributes are aggregated and available to the parent in featureInfo No None

promoteAttrib object

Each entry creates an attribute on the parent by first extract an expression from each child and then aggregate the result from all children. Currently the only supported aggregation function is string.join()

Property Description Required Default value
parentName Name of the attribute to create in the parent Yes
html Template string that extracts values from each child object. Attribute names enclosed in {{}} are replaced with its value. Does not have to be html, but can contain html tags Yes
separator String to use as separator when aggregating extracted strings No Empty string

Basic example to set up a parent which has a related child layer. The parent itself is not editable, but the child layer has two attributes that can be edited. Also the attributes from the child layer is aggregated and displayed in the featureInfo window of the parent.

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

Automatic default (legend) style for WMS layers

A WMS layer can have a style property defined for its legend graphic or for an alternate layer style defined on the WMS server. If a style property is not defined then Origo will attempt to create one for the legend graphic using getLegendGraphic and optionally two additional layer properties can then be defined, legendParams and hasThemeLegend.

hasThemeLegend is used to manually indicate if the layer has theme symbology and that the legend should be behind a theme style icon (extendedLegend).

Example legendParams object with Geoserver vendor parameter

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

stylePicker

The stylePicker is available for vector layers and WMS layers. It is defined in one way for vector layers and a slightly different way for WMS layers due to the different nature of styles of image type layers like WMS layers compared to the client side styles of vector layers.

A stylePicker refers to defined styles and allows a style title to be set. (It usually makes sens for the style property of the layer to refer to one of the styles in the stylePicker.)

if a stylePicker is defined for a WMS layer then it refers to styles available to the layer on the WMS server.

A style layer property is overriden and any hasThemeLegend and legendParams are incorporated in the stylePicker on a per layer basis (rather than as properties of the layer).

There can only be one defaultWMSServerStyle as well as initialStyle where the later specifies which style the map should load with. If there's no initialStyle specified then the first style in the array will be it.

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

Style basics

Styles are primarily used to style vector features in Origo but are also used to create layer legends. This means that all layers in Origo should have a style.

Styles are created using OpenLayers styles. In OpenLayers styles are created as JavaScript functions but in Origo the creation is simplified and only json syntax is used. All styles must have a name which is used to reference the style from a layer. A simple GeoJson layer example can be seen to the right.

Styles can be compared to building blocks. The smallest building block is a style which can be a fill, stroke, circle, icon or text. These styling blocks can be put together for example to style a polygon layer with a fill, stroke and text style. By combining these blocks more complex styling can be made. Two levels of styling are available where each level is delimited by brackets. The outer level is used to separate styles with filters, see the example thematic styling. The inner level is used to add layers of various styles, see the example combining styles. The two levels of brackets must always be provided even if only one fill style is used.

For more advanced styling it is possible to use a custom style function. This function has to be included in the /src/style/stylefunctions.js. You will still need an usual style/icon for display in the legend. Example

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

A fill style can be defined with the OpenLayers options for a Fill.

Fill example

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

Stroke

A stroke style can be defined with the OpenLayers options for a Stroke.

Stroke example

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

Circle

A circle style can be defined with the OpenLayers options for a Circle.

Circle example

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

Icon

An icon style can be defined with the OpenLayers options for an Icon. Size and src are required.

Icon rotation can be set with "rotation", either by using a fixed value or by specifying an attribute holding rotation values. In the latter case, the attribute name should be enclosed in double curly braces. Rotation values should always be in degrees.

Icon example

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

Text

A text style can be defined with the OpenLayers options for a Text. The fill option sets the font color and the stroke option is used to create halo effects.

Arbitrary text can be provided as text value. For cluster layers the reserved word "size" can be used to show number of features of the cluster.

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

The image style is not used to style features. It is only used for legend purposes, for example to symbolize a raster layer in the legend. Only the src property is set.

Image

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

Legend graphics

Map server legend graphics (WMS only) can be used in the legend. Please note that this will not change the layer style.

Legend graphics

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

Label

The label shown for the style in the layermanager/legend when clicking the layer name. If omitted, none is shown.

Label

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

Alternative WMS style

Option to pick an alternative layer style for WMS layers. Requires alternative style to be published on map server.

Alternative WMS style

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

Filter

Filter features by attributes, used for instance for thematic styling.

Filter

{
  "icon": {
    "src": "..."
  },
  "filter": "[attributename] == 'Value to show'",
  "label": "Value to show"
}

minScale and maxScale

To use different styles at different zoom levels.

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

The icon shown in the legend. If true, this symbol will overwrite the default list icon used when having a thematic style. Default is false.

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

Makes a style hidden in the legend. Default is false. In this example the "Style for small scale" will not be displayed in the layers legend.

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

Style examples

To get started some common use cases are provided.

Opacity

Colors are defined with rgba values. Opacity is set with the alpha channel, the a part of rgba. In this example the fill is semi-transparent.

Opacity

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

Combining styles

Different styles can be combined to create complex styles. In this example the features will be styled with two circle styles, one inner circle and one outer circle. The inner circle has the radius 4 and the outer circle the radius 16. Styles are combined by adding styles within the same brackets and are seperated by curly brackets.

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

By applying filters thematic styling can be made. In this example features with the attribute type equal to vegetation will be green and features with the attribute type equal to water will be blue. The style settings for each type are grouped by brackets. You are also able to add a label to each filter.

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

Geometry calculations can be used to style features. In this example the center point within a polygon is styled with an icon. This is done by adding a geometry property with the value "centerPoint" for the icon style.

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

When creating a style for a cluster layer it is usually desired to show the number of features in each cluster. This can be done be by using the reserved word "size" in which case the number of features will be used as text value. Other text properties are provided as usual.

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

Custom style function

For more advanced styling you can use a custom style function and for instance style features depending on multiple attribute values or use more complex filters and styling techniques.

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

Using Origo API

Origo API is a mix of using exposed methods in Origo and objects from OpenLayers.

For more information on all the options with OpenLayers see OpenLayers API documentation

The examples below should most of them be runnable on Origo demo map that is distributed from the Github repository, but some uses controls or layers that isn't specified in configuration.

Example code

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

// Accessing the OpenLayers API
Origo.ol

Change Zoom

Set the zoom level by enter an integer. The number of zoom level is depending on the configuration and setting a higher number than max zoom will only result in max zoom.

Example code for changing zoom

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

Move the map

To move the map give the coordinates of the center in the map. If the coordinates is in another projection a function to convert the coordinates to the maps projection can be called.

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'));

Change visibilty of controls

To hide or show a control search the control by name and then apply the hide and unhide method on the control.

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

Place a marker on map

A marker can be placed with coordinates to location and also set a title and text for a popup.

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');

Limit features for layer

A filter can be applied to a layer to only show a selection of the features in the layer.

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'");

To get a link of the map with applied layers and settings

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

Get drawn features

To access the features drawn in the drawplugin lookup the layer called drawplugin and get the features from that layers source.

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);
  }
});

Add new tile layer

To add a new tile layer a source must be given and also a title and name.

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'}));

Add new vector layer

To add a new vector layer from GeoJSON object.

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));

Add export to click event

To do a export on a click event.

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'}));
    } 
  })
});

Add fetch from API to event

To do a fetch on a moveend event.

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');
  });
});

Refresh data on a layer

If data for a layer changes constantly as for example when fetching temperatures from IoT sensors it can be useful to let the data be refreshed on a regular interval.

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);
Show examples in:
Origo documentation