App config parameters

To configure hslayers-ng based map project, various configuration options can be used. They have to be specified either in the main application file (usually app.component.ts's constructor) using this.hsConfig.update(...) method.

You can find the TS typings in the HsConfigObject type.

Example:

constructor(private hsConfig: HsConfig) {
this.hsConfig.update({
    default_layers: [
        ...

Or in the hslayersNgConfig(ol) function in case of the "simple" application.

Example:

function hslayersNgConfig(ol) {
  return {
    default_layers: [
        ...

The following page describes all the configuration options grouped by theme.

Datasources

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed in	Example
allowAddExternalDatasets	Boolean	false	true	Setting which allows adding of user provided WMS... vector file or other data to map. It is used to control display of OWS panel in addLayers module. Previously, this used to be set using Core.singleDatasources property which is now deprecated. ( Version added: 1.14.0)	yes	6.1.0
connectTypes	Array<String>	false	show ['wms', 'wmts', 'wfs', 'kml', 'gpx', 'geojson', 'arcgis']	Array of possible dataset url types in dataset/url panel.
datasources	Array<Object>	false		Datasource catalogues which are used in Datasource browser panel.			Example
dsPaging	Number	false		Use datasource endpoints paging.itemsPerPage property... How many items to display in dataset list.	yes, since 1.15.2.	2.5.0
dss_disallow_add	Boolean	false		Specify if datasets must not be allowed to be added to map.	yes	yes
uploadTypes	Array<String>	false	show ['kml', 'gpx', 'geojson', 'shp']	Possible dataset file types in dataset/file panel.

Datasources example:

[
     {
        title: "Layman",
        url: `${window.location.protocol}//${window.location.hostname}/layman/client`,
        user: 'browser',
        type: "layman",
        liferayProtocol: 'http'
    },
    {
        title: "Services",
        url: "http://cat.ccss.cz/csw/",
        language: 'eng',
        type: "micka",
        code_list_url: 'http://www.whatstheplan.eu/php/metadata/util/codelists.php? 
       _dc=1440156028103&language=eng&page=1&start=0&limit=25&filter=%5B%7B%22property%22%3A%22label%22%7D%5D'
    },
    {
        title: "Hub layers",
        url: "http://opentnet.eu/php/metadata/csw/",
        language: 'eng',
        type: "micka",
        code_list_url: 'http://opentnet.eu/php/metadata/util/codelists.php? 
        _dc=1440156028103&language=eng&page=1&start=0&limit=25&filter=%5B%7B%22property%22%3A%22label%22%7D%5D'
    }
]

Feature table

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
layersInFeatureTable	Array<VectorLayer<VectorSource>>	false		Layers used in... the feature table panel (undefined by default).

Map

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
box_layers	Array<ol.Group>	false		An array of ol.layer.Group objects... used to group layers into topics. Each box layer must contain layers property which is an array of ol.layer.Layer objects similar to default_layers config property. Name of the group is contained in "title" property and path to icon image can be provided in "img" property.
default_view	ol.View	true		OpenLayers view which specifies default map center, projection, zoom etc.			Example
default_layers	Array<Layer<Source>>	true		Array of layers which... are OpenLayers layers and are not part of a layer group or "box" layer. They can contain extra parameters not specified in OL API such as "path", "show_in_manager", "base", "position", etc.			Example
defaultComposition	string	false		Layers which should be added to the map on init			https://compo.url/rest/workspaces/user/maps/map
base_layers	Base layers	false		Set composition as a source for baselayers			Example
mapInteractionsEnabled	Boolean	false	true	Enable map interactions, such as, double click zoom, keyboard zoom, pinch rotate, and more
saveMapStateOnReload	Boolean	false	true	When set to true... , the list of current map layers is saved into the browser's localStorage once the application is closed so they can be restored after the reload.
zoomWithModifierKeyOnly	Boolean	false	false	Description... - true: map will zoom on scroll event only if platform modifier key is also pressed. This key is CTRL on Windows or Linux and META key on macOS, respectively. Useful for page-wide maps incorporated in a singe-page design. - false: default. No additional key is required. Map zooms on sole mouse-scroll event.( Version added: 1.14.0)

Default view example:

new ol.View({
    center: ol.proj.transform([17.474129, 52.574000], 'EPSG:4326', 'EPSG:3857'), //Latitude longitude    to Spherical Mercator
    zoom: 4,
    units: "m"
})

Default layers example:

new ol.layer.Tile({
    title: "Ilida plastics kg/ha per year",
    source: new ol.source.TileWMS({
        url: 'http://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/ilida/ilida.map',
        params: {
            LAYERS: 'ilida_cultivation_plastics',
            INFO_FORMAT: undefined,
            FORMAT: "image/png",
            ABSTRACT: "Plastic waste in Ilida municipality"
        },
        crossOrigin: "anonymous"
    }),
    path: 'Ilida Thematic Data',
    base: false,
    visible: true,
    opacity: 0.8
})

Base layers type:

baseLayers: {
    url: string; //Composition url
    default: string; //Layer name of visible basemap
}

Base layers example:

baseLayers: {
    url: 'https://hub.lesprojekt.cz/rest/workspaces/leitnerfilip/maps/corine_layerorder/file', 
    default: 'CORINE Land Cover 2006', 
}

Map Swipe

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
mapSwipeOptions	Options	false		Map swipe config object.			Example
orientation	String	false	'vertical'	Initial map swipe slider orientation.

Map swipe options:

MapSwipeOptions = {
  orientation?: 'vertical' | 'horizontal';
};

Map swipe options example:

mapSwipeOptions: {
        orientation: 'vertical',
      },

Layer Manager

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
clusteringDistance	Number	false	40	Minimum distance in pixels between clusters.
layerTooltipDelay	Number	false	0	Sets a delay for tooltip closing.
open_lm_after_comp_loaded	Boolean	false		Set to true to open layer manager when map composition is loaded.
pathExclusivity	Boolean	false	true	Determines behavior of exclusive layers... (layer.exclusive = true) visibility. If set to true, only layers with same path are affected by exclusivity.
reverseLayerList	Boolean	false	true since 8.0	Display layer manager layers in reverse order.
timeDisplayFormat	String	false		Specifies time display format for layer manager time-aware WMS layers.

Share Service and Compositions Catalogue

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
advancedForm	Boolean	false	false	Specifies if advanced save map form should be created.
comp_keywords	Boolean	false		Show drop-down for filtering of compositions based on keywords.	yes	yes
compositions_catalogue_url	String	false		URL of compositions catalogue... Example: https://atlas.kraj-lbc.cz/php/metadata/csw/index.php. Use datasources param instead.	yes	yes
hostname	Object	false		Used to build GUI... where the user can change the source for compositions catalogue or add his own.
hostname.default	Object	false		Default endpoint of the application... if multiple endpoints are available (for compositions catalogue, etc.).
hostname.default.url	String	true		Fully qualified domain name part of the URL used as the remote endpoint.
hostname.compositions_catalogue	String	false		URL of compositions catalogue... Example: https://atlas.kraj-lbc.cz/php/metadata/csw/index.php. Use datasources param instead.	yes	yes
hostname.status_manager	Object	false		Replaced by hostname.shareService	yes	12.0
hostname.status_manager.url	String	true		URL or path of status manager... Usually it is on the same server and then '/wwwlibs/statusmanager2/index.php' or similar can be used. Replaced by hostname.shareService.url	yes	12.0
hostname.shareService	Object	false
hostname.shareService.url	String	true		URL or path to share service... Usually it is on the same server and then '/wwwlibs/statusmanager2/index.php' or similar can be used.
hostname.user.url	String	false
hostname.user.type	String	false		The type of the hostname... (denoting for which purposes it should be used) – e.g. compositions_catalogue (for compositions catalogue), status_manager (for status manages), default (fallback for the previous two), user (overriding the defaults).	yes	yes
hostname.user.editable	Boolean	false		Should be able to delete... or change this hostname object from the list of hostnames.	yes	yes
project_name	String	false		Variable of project name... which is used as a project GET parameter queries to status manager when loading compositions list and making updates and deletes.
status_manager_url	String	false		URL or path of status manager... Usually it is on the same server and then '/wwwlibs/statusmanager2/index.php' or similar can be used. Replaced by shareServiceUrl	yes	12.0
shareServiceUrl	String	false		URL or path to share service... Usually it is on the same server and then '/wwwlibs/statusmanager2/index.php' or similar can be used.

GUI

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed in	Example
assetsPath	String	true		Configures assets location.			Example
componentsEnabled	Object	false		Allows to display/hide individual GUI components. Also possible to control order of tools in toolbar. (Version added: 1.15.0)			Example
createExtraMenu	Function	false		Manipulated sidebar items and created extra menu items by using AngularJS $compile function.		3.0
design	String	false		Value 'md' used to switch to Material Design instead of Bootstrap.		3.0
draggable_windows	Boolean	false		Specify if panels can be dragged out of side-panel.		yes
importCss	Boolean	false	true	Specify if import css files... (openlayers.css, bootstrap.min.css, icon fonts). Set this to false for webpack usage where css is imported/required specifically outside HSL.	yes	yes
locationButtonVisible	Boolean	false		Use componentsEnabled.geolocationButton parameter instead.	yes	3.0
panelWidths	Object	false	Default	Dictionary for overriding of side-panel widths for each of the main components. See more details about panelWidths of custom panels here			Example
panelsEnabled	Object	false	Default	Dictionary for overriding panel visibility.
pureMap	Boolean	false	false	Hide all GUI elements... leaving only the map itself. This is a shorthand for componentsEnabled.guiOverlay: false and mapInteractionsEnabled: false.
sizeMode	String	false	fullscreen	Possible values: 'fullscreen', 'container'.	yes	yes
sidebarPosition	String	false	right	One of 'left', 'right' or 'bottom'.
sidebarToggleable	Boolean	false	true	Enable sidebar function... to open/close sidebar (if false sidebar panel cannot be opened/closed through GUI)
sidebarClosed	Boolean	false	window.innerWidth < 767	Specify whether sidebar should be opened or closed on startup. (Version added: 1.12.0)
useIsolatedBootstrap	Boolean	false	right	Load bootstrap CSS from... node_modules/bootstrap/dist/css/bootstrap.isolated.css , which can be generated using npm explore hslayers-ng -- npm run isolate-bootstrap if hslayers-ng is dependency of your app or npm run isolate-bootstrap if you have cloned hslayers-ng repo directly. See Bootstrap isolation.	yes	yes
theme	String	true		Set the application style theme. (Version added: 1.13.0)	yes, replaced by SASS variables... See Styles.		Example
mobileBreakpoint	Number	false	767	Pixel value of CSS breakpoint activating GUI changes for mobile view. Deactivated when 'sidebarPosition' is set to 'bottom'.			mobileBreakpoint: 767

panelsEnabled default:

{
    compositions: true,
    query: true, // info panel showing query layer results
    info: true, // REMOVED in 14.0, renamed to 'query'
    toolbar: false, // REMOVED in 14.0, moved to componentsEnabled
    draw: false,
    addData: true,
    layerManager: true,
    legend: true,
    print: true,
    saveMap: true,
    language: true,
    share: true,
    feature_crossfilter: true,
    featureTable: true,
    tracking: false,
    tripPlanner: false,
    mapSwipe: false, //A component for splitting a map into two parts with a slider, allowing the user to display the contents of different layers in 
                     //parallel on top of each other.
    sensors: false,
}

panelWidths default

{
      default: 425,
      ows: 700,
      composition_browser: 550,
      addData: 700,
    }

assetsPath example:

For simple apps use assetsPath: 'https://unpkg.com/[email protected]/assets/' or alike (replace 3.1.0 with the actual version of HSL you are using)

In discontinued HSLayers-NG versions 1 and 2 this was set via: window.HSL_PATH + 'assets',

componentsEnabled example:

Since version 15.0 you can use componentsEnabled to control the order of tools in the toolbar -- it is the same as the order of "xToolbar" keywords (if set to true) in the componentsEnabled object.

{
    guiOverlay: true, //all GUI components at once
    sidebar: true, //REMOVED in 3.0. REPLACED BY sidebarPosition: 'invisible' //sidebar with UI panels. Visible panels can be set with panelsEnabled 
                   //object,
    info: true, //composition status / loading info
    toolbar: true, //all toolbars at once: draw, search and measure
    drawToolbar: true, //toolbar to draw/edit features
    searchToolbar: true, //toolbar with search field
    measureToolbar: true, //toolbar to measure distances/areas
    geolocationButton: true, //button which allows to geolocate the user and optionally follow his/her position
    defaultViewButton: true, //button to zoom and pan to an initial extent
    mapControls: true, //buttons to zoom in/out and the scale
    basemapGallery: false, //Move basemaps list into separate GUI component located in the map
    mapSwipe: false, //Enables map-swipe right after app starts
    queryPopup: true, //Enables queryPopup functionality
}

panelWidths example:

{
    compositions: 500
}

Query

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
customQueryPopupWidgets	Array<WidgetItem>	false		Allows the user to add custom widgets to query popup.
openQueryPanelOnDrawEnd	Boolean	false		Specifies if query panel should be opened when finished drawing.
popUpDisplay	'none' , 'click' , 'hover'	false	none	When the feature pop-ups should be displayed. (Version added: 1.23.0)			Example
queryPoint	'notWithin'	'hidden'	false		How to display point clicked on the map... 'notWithin' - Hides clicked point feature in case it would overlap with other features 'hidden' - Hides clicked point feature at all times
query	Object	false		Object for setting query options.
query.multi	Boolean	false	false	Allow selecting and displaying info about multiple vector layer features.
queryPopupWidgets	Show Array<QueryPopupWidgetsType> | Array<string>	false	Show ['layer-name', 'feature-info', 'clear-layer']	Configures query popup widgets... , the order in which they are generated, and visibility.

popUpDisplay example:

• 'hover' - whenever mouse hovers the feature
• 'click' - when user clicks on the feature
• 'none' - no pop-ups ever.

Custom popup widget

HsConfig.update({
      queryPopupWidgets: ['layer-name', 'wb-feature-info'],
      customQueryPopupWidgets: [
        {name: 'wb-feature-info', component: WbFeatureInfoComponent},
      ]
..
})

..

@Component({
  selector: 'wb-feature-info',
  templateUrl: './feature-info.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WbFeatureInfoComponent
  extends HsQueryPopupWidgetBaseComponent
  implements OnInit
{
  layerDescriptor: any;
  attributesForHover: any[] = [];
  name = 'feature-info';
  @Input() data: {
    layerDescriptor: any;
    attributesForHover: any[];
    app: string;
    service: HsQueryPopupServiceModel;
  };
..
}

External text feature actions

It is possible to zoom to features, display hover pop-up over them or do custom actions when user hovers, clicks or triggers any other event on external HTML elements such as links in text outside HSLayers-NG. To configure such behaviour set:

 domFeatureLink: [
      {
          domSelector: string; 
          feature: string | Feature | Function(layer, domElement); 
          event: string;
          actions: ['zoomToExtent' | 'panToCenter' | 'showPopup', 'hidePopup' | Function(feature, domElement, event)];  
      }
  ]

• domSelector - a string containing CSS selector such as #link1 or .links
• feature - Must be an ID property of feature, feature instance or a function, which will return one feature given a layer and an HTML element upon which the event was triggered on.
• event - any HTML event name on HTML element which can be handled by addEventListener
• actions - an array of predefined actions or a function to be executed on the found feature.

Search

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
geonamesUser	String	true		Geonames API username.
searchProvider	String | Function | Object	false	['geonames']	For adding additional geo-data search providers.
search_provider	String	false		Specify which search provider should be used. Can contain values: 'sdi4apps_openapi', 'geonames'.

Senslog

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
senslog	Object	false		Object containing senslog configuration.			Example

senslog example:

{
    url: 'http://foodie.lesprojekt.cz:8080',
    user_id: 6, //Needed for senslogOT
    group: 'test', //Needed for MapLogOT
    user: 'test' //Needed for MapLogOT
}

Sharing

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
permalinkLocation	Object	false		Specifies parameters for generation of shareable link of the map.
permalinkLocation.origin	String	false		Domain name of URL where parmalink points to.
permalinkLocation.pathname	String	false		Path name of application on the server which permalink points to.
shortenUrl	Function	false		By default tinyurl is used, but user provided function in config.shortenUrl can be used.			Example
social_hashtag	String	false		Hashtag or any other text to append to title generated for sharing in social networks.

shortenUrl example:

function(url) {
    return new Promise(function(resolve, reject){
        $http.get("http://tinyurl.com/api-create.php?url=" + url, {
            longUrl: url
        }).then(function(response) {
            resolve(response.data);
        }, function(err) {
            reject()
        })
    })
}

Other

Property	Type	Mandatory	Default Value	Description	Deprecated	Removed	Example
crossfilterable_layers	Array<Object>	false		Layers to be crossfilterable... Each element is an object which contains layer indexes and feature property to group/count the features.	yes	yes	Example
defaultDrawLayerPath	String	false	User generated	Default layer path (container) for newly added drawing layers. (Version added: 1.14.0)
enabledLanguages	String	false	cs, lv	Used for setting available languages for the application... , that can later be switched to inside the "Change language" panel. (Version added: 3.1.0)			Example
language	String	false	en	Used for setting application language on load. (Version added: 2.5.0)			Example
additionalLanguages	[key: string]: string	false		Allows adding natively not supported languages. (Version added: 2.5.0)			Example
preserveLastSketchPoint	Boolean	false	false	Determines whether the last point of drawn (sketch) feature... should be preserved or not. If yes, minimum of 3 saved vertices are necessary to finish drawing of polygon (2 otherwise). (Version added: 2.4.0)
proxyPrefix	String	false	/cgi-bin/hsproxy.cgi?	Url to use for proxy in which case url=... parameter is added to the get request. If other proxy service is used non-encoded url will be added directly to the proxyPrefix specified e.g. "/proxy/https://www.google.com" in case of "/proxy/".
useProxy	Boolean	false	true	Whether to use proxy or not. Might be useful in Cordova apps, where proxying is not needed.
translationOverrides	Object	false		(Version added: 2.5.0)			Example
errorToastDuration	Number	false	1000	Duration of toast error message visibility [ms]

translationOverrides example:

translationOverrides: {
    "lv": {
      "open": "atvērt",
      "SENSORS": {
        "Humidity": "Mitrums",
        "Radiation": "Radiāciju",

crossfilterable_layers example:

[{
    layer_ix: 1,
    attributes: ["http://gis.zcu.cz/poi#category_osm"]
}]

enabledLanguages example:

enabledLanguages: "lv, cs",

additionalLanguages example:

 //Use together with `enabledLanguages` and `translationOverrides`.
  "language": "esp",
  "enabledLanguages": "esp,en,lv",
  "additionalLanguages": {
   "esp": "Espanol"
   }

language example:

language: "en",