@norconsult-digital-public/isy-map-web-components 0.0.2 → 1.0.1

package/README.md

@@ -1,1401 +1,3 @@
-# About The Project - IsyMap Web Components
+# isy-map-web-components
 
-IsyMap Web Components is a subset of IsyMap (a openlayers based web map client) build as Web Components (for more information about Web Component visit [webcomponents.org](https://www.webcomponents.org/introduction#how-do-i-use-a-web-component-)). This library enables the use of core IsyMap functionality and can be used with any JavaScript library or framework that works with HTML in modern web browsers. 
-
-The solution is based on calling a function with given parameters which then returns structured data such as JSON. Basic user interface is available; such as search, map menu and click information. 
-
-### Content
-- Getting Startet
-  - Prerequisites
-  - Enabeling use of UI from IsyMap
-- Usage
-  - Navigation
-  - Change map content
-  - Retriving data
-- Example
-
-## Getting Started
-
-### Prerequisites
-To use isy-map-web-components in your project install it via npm:
- ```sh
-  npm i @norconsult-digital/isy-map-web-components
-  ```
-
-### React
-
-Import modul
-```js
-import '@norconsult-digital/isy-map-web-components/isy-map-web-components.js'
-```
-Import style
-```js
-import '@norconsult-digital/isy-map-web-components/isy-map-web-components.css';
-```
-The library does not contain the configuration of the IsyMap project. Therfore you have to point the application to the desired configuration. 
-```js
-const [configUrl, setConfigUrl] = useState<string>('https://https://map.isy.no/?project=Plandialog&application=demo&apiKey=XXXXX'); 
-```
-
-#### Enabeling use of UI from IsyMap
-It's possible to include some UI-components from IsyMap. The availabe components are:
-```js
-<div className='isygis'>
-    <isygis-custom-isy-search-bar /> // Search bar
-    <isygis-custom-isy-side-nav /> // Side menu - layers turn on/off
-    <isygis-custom-isy-info-panel /> // Info panel - search results / point information
-    <isygis-custom-isy-map configurl={configUrl} giparams={JSON.stringify(giParam)} ref={mapOutputRef} /> // Map module
-</div>
-```
-The className must be set to *isygis* which is used to isolate the bootstrap styles in IsyMap. 
-
-### Angular
-
-In angular.json include styles and scripts: 
-
-```json
-"styles": [
- "src/styles.scss",
- "../node_modules/@norconsult-digital/isy-map-web-components/isy-map-web-components.css"
-],
-
-"scripts": [
-"../node_modules/@norconsult-digital/isy-map-web-components/isy-map-web-components.js"
-]
-```
-
-In app.modules.ts import: 
-```js
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-// Add CUSTOM_ELEMENTS_SCHEMA to @NgModule
-schemas: [CUSTOM_ELEMENTS_SCHEMA]
-```
-
-The library does not contain the configuration of the IsyMap project. Therfore you have to point the application to the desired configuration. 
-```js
-configUrl = 'https://map.isy.no/?project=Plandialog&application=demo&apiKey=XXXXX'; 
-```
-
-#### Enabeling use of UI from IsyMap
-It's possible to include some UI-components from IsyMap. The availabe components are:
-```js
-<div class="isygis">
-  <isygis-custom-isy-search-bar hideMenuIcon='false'></isygis-custom-isy-search-bar> // Search bar with visible menu icon (for open side panel)
-  <isygis-custom-isy-side-nav></isygis-custom-isy-side-nav> // Side panel with layers and tools list
-  <isygis-custom-isy-info-panel></isygis-custom-isy-info-panel> // Info panel - search results / point information
-  <isygis-custom-isy-base-layers></isygis-custom-isy-base-layers> // Base layers switcher
-  <isygis-custom-isy-map configurl="{{configUrl}}" [giparams]="giParams" (mapoutput)="mapoutput($event)"></isygis-custom-isy-map> // Map module
-  <isygis-custom-isy-tool-draw [giparams]="giParamsDraw"></isygis-custom-isy-tool-draw> // Tool - draw
-</div>
-```
-The className must be set to *isygis* which is used to isolate the bootstrap styles in IsyMap. 
-
-## Table of Contents
-### Isygis-custom-isy-map
-- [SETTER PARAMETERS *isygis-custom-isy-map*](#setter-parameters-smallisygis-custom-isy-mapsmall)
-  - [Switches off the feature selector and drawing manager within the map service.](#switches-off-the-feature-selector-and-drawing-manager-within-the-map-service)
-  - [Makes all visible layers on the map invisible.](#makes-all-visible-layers-on-the-map-invisible)
-  - [Makes a specific layer invisible on the map, identified by its unique identifier (guid) or by its name.](#makes-a-specific-layer-invisible-on-the-map-identified-by-its-unique-identifier-guid-or-by-its-name)
-  - [Makes a specific layer invisible on the map, identified by its name (DEPRECATED)](#makes-a-specific-layer-invisible-on-the-map-identified-by-its-name-deprecated)
-  - [Makes a specific layer invisible on the map, identified by its unique identifiers (guids) or by its names.](#makes-a-specific-layer-invisible-on-the-map-identified-by-its-unique-identifiers-guids-or-by-its-names)
-  - [Hides a marker displayed on the map.](#hides-a-marker-displayed-on-the-map)
-  - [Hides the translation bar.](#hides-the-translation-bar)
-  - [Removes a drawing from the GeoJson data. (REMOVED)](#removes-a-drawing-from-the-geojson-data-removed)
-  - [Removes a specific layer.](#removes-a-specific-layer)
-  - [Removes multiple layers.](#removes-multiple-layers)
-  - [Changes the map size.](#changes-the-map-size)
-  - [Modifies the map's center.](#modifies-the-maps-center)
-  - [Sets the extent of the map.](#sets-the-extent-of-the-map)
-  - [Changes the language setting of the map interface.](#changes-the-language-setting-of-the-map-interface)
-  - [Provides a new JWT token for the map service.](#provides-a-new-jwt-token-for-the-map-service)
-  - [Enables or disables map animations.](#enables-or-disables-map-animations)
-  - [Reveals a layer by its unique identifier (guid) or by its name.](#reveals-a-layer-by-its-unique-identifier-guid-or-by-its-name)
-  - [Reveals a layer by its name (DEPRECATED)](#reveals-a-layer-by-its-name-deprecated)
-  - [Reveals multiple layers identified by their unique identifiers (guids) or by its names.](#reveals-multiple-layers-identified-by-their-unique-identifiers-guids-or-by-its-names)
-  - [Enables the functionality to display a marker on a click and hide the marker when it's inactive.](#enables-the-functionality-to-display-a-marker-on-a-click-and-hide-the-marker-when-its-inactive)
-  - [Activates the feature to show neighbors.](#activates-the-feature-to-show-neighbors)
-  - [Show a property on the map.](#show-a-property-on-the-map)
-  - [Show properties on the map](#show-properties-on-the-map)
-  - [Uploads GeoJson data for drawing. (REMOVED)](#uploads-geojson-data-for-drawing-removed)
-  - [Uploads GeoJson data.](#uploads-geojson-data)
-  - [Allows the map to zoom in or out.](#allows-the-map-to-zoom-in-or-out)
-  - [Switches off the map hover information.](#switches-off-the-map-hover-information)
-  - [Adjusts the click pixel tolerance on the map.](#adjusts-the-click-pixel-tolerance-on-the-map)
-  - [Sets the popover parameters.](#sets-the-popover-parameters)
-  - [Start / stop geolocation.](#start--stop-geolocation)
-  - [Set base layer](#set-base-layer)
-  - [Login (AzureAd)](#login-azuread)
-  - [Logout (AzureAd)](#logout-azuread)
-  - [Show / Hide scale line](#show--hide-scale-line)
-  - [Pause hover info](#pause-hover-info)
-
-- [GETTERS PARAMETERS <small>isygis-custom-isy-map</small>](#getters-parameters-smallisygis-custom-isy-mapsmall)
-  - [Retrieves the center of the map](#retrieves-the-center-of-the-map)
-  - [Activates or deactivates the capture of click coordinates on the map](#activates-or-deactivates-the-capture-of-click-coordinates-on-the-map)
-  - [Retrieves the extent of the map](#retrieves-the-extent-of-the-map)
-  - [Retrieves the overlay layers of the map](#retrieves-the-overlay-layers-of-the-map)
-  - [Get base layers](#get-base-layers)
-  - [Retrieves the geometry of an object](#retrieves-the-geometry-of-an-object)
-  - [Retrieves the project configuration](#retrieves-the-project-configuration)
-  - [Retrieves the property information of an object](#retrieves-the-property-information-of-an-object)
-  - [Retrieves information about a point](#retrieves-information-about-a-point)
-  - [Retrieves Saks information](#retrieves-saks-information)
-  - [Retrieves the chosen search result](#retrieves-the-chosen-search-result)
-  - [Retrieves the visible layers on the map](#retrieves-the-visible-layers-on-the-map)
-  - [Transforms coordinates from one spatial reference to another](#transforms-coordinates-from-one-spatial-reference-to-another)
-  - [Retrieves the start of a map move](#retrieves-the-start-of-a-map-move)
-  - [Retrieves the end of a map move](#retrieves-the-end-of-a-map-move)
-  - [Get neighbors for plan](#get-neighbors-for-plan)
-  - [Get map image](#get-map-image)
-
-### Isygis-custom-isy-tool-draw
-- [SETTER PARAMETERS <small>isygis-custom-isy-tool-draw</small>](#setter-parameters-smallisygis-custom-isy-tool-drawsmall)
-  - [Show draw tool UI](#show-draw-tool-ui)
-  - [Start/Modify/Remove Draw](#startmodifyremove-draw)
-    - [IStyle Interface](#istyle-interface)
-    - [IFill Interface](#ifill-interface)
-    - [IStroke Interface](#istroke-interface)
-    - [IImage Interface](#iimage-interface)
-    - [Modify Draw](#modify-draw)
-    - [Remove Selected Object](#remove-selected-object)
-    - [Remove All Drawings](#remove-all-drawings)
-  - [Stop draw](#stop-draw)
-  - [Upload drawing GeoJson](#upload-drawing-geojson)
-
-- [GETTER PARAMETERS <small>isygis-custom-isy-tool-draw</small>](#getter-parameters-smallisygis-custom-isy-tool-drawsmall)
-  - [Download drawing GeoJSON](#download-drawing-geojson)
-  - [Get modified feature](#get-modified-feature)
-  - [Get drawn features](#get-drawn-features)
-
-
-
-# SETTER PARAMETERS <small>isygis-custom-isy-map</small>
-```js
-<div class="isygis">
- <isygis-custom-isy-map configurl="{{configUrl}}" [giparams]="giparams" (mapoutput)="mapOutputData($event)"></isygis-custom-isy-map>
-</div>
-```
-
-#### Switches off the feature selector and drawing manager within the map service.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'deactivateShowNeighbors',
-});
-```
-
-#### Makes all visible layers on the map invisible.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideAllVisibleLayers',
-});
-```
-
-#### Makes a specific layer invisible on the map, identified by its unique identifier (guid) or by its name.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideLayer',
-  guid?: string,
-  name?: string,
-});
-```
-
-#### Makes a specific layer invisible on the map, identified by its name (DEPRECATED)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideLayerByName',
-  name: string,
-});
-```
-
-#### Makes a specific layer invisible on the map, identified by its unique identifiers (guids) or by its names.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideLayers',
-  guids?: string[],
-  names?: string[],
-});
-```
-
-#### Hides a marker displayed on the map.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideMarker',
-});
-```
-
-#### Hides the translation bar.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideTranslateBar',
-  hide: boolean,
-});
-```
-
-#### Removes a drawing from the GeoJson data. (REMOVED)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'removeDrawingGeoJson',
-});
-```
-
-#### Removes a specific layer.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'removeLayer',
-  guid?: string,
-  name?: string,
-});
-```
-
-#### Removes multiple layers.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'removeLayers',
-  guids?: string[],
-  names?: string[],
-});
-```
-
-#### Changes the map size.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'resizeMap',
-});
-```
-
-#### Modifies the map's center.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setCenter',
-  epsg: string,
-  lat: number,
-  lon: number,
-  scale?: number,
-  zoom: number,
-  showMarker: boolean,
-  markerColor?: string, 
-});
-```
-
-#### Sets the extent of the map.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setExtent',
-  epsg?: string,
-  extent: number[],
-});
-```
-
-#### Changes the language setting of the map interface.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setLanguage',
-  language: string, // ('en', 'no')
-});
-```
-
-#### Provides a new JWT token for the map service.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setJwt',
-  token: string,
-});
-```
-
-#### Enables or disables map animations.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setMapAnimation',
-  active: boolean,
-});
-```
-
-#### Reveals a layer by its unique identifier (guid) or by its name.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showLayer',
-  guid?: string,
-  name?: string
-});
-```
-
-#### Reveals a layer by its name (DEPRECATED)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showLayerByName',
-  name: string,
-});
-```
-
-#### Reveals multiple layers identified by their unique identifiers (guids) or by its names.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showLayers',
-  guids?: string[],
-  names?: string[],
-});
-```
-
-#### Enables the functionality to display a marker on a click and hide the marker when it's inactive.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showMarkerWhenClick',
-  active: boolean,
-  markerColor: string,
-});
-```
-
-#### Activates the feature to show neighbors.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showNeighbors',
-  bruksnummer: string,
-  festenummer: string,
-  gaardsnummer: string,
-  kommunenummer: string,
-  seksjonsnummer: string,
-});
-```
-
-#### Show a property on the map.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showProperty',
-  bruksnummer: string,
-  festenummer: string,
-  gaardsnummer: string,
-  kommunenummer: string,
-  seksjonsnummer: string,
-  showMarker?: boolean, // optional, default is true
-  selectFeature?: boolean, // optional for select property
-  clearHighlighted?: boolean, // optional, default is true
-  jsonStyle?: { // optional, when selectFeature is true and jsonStyle is not defined default color is apply
-        stroke: {
-          color: "rgba(234,148,158,1)",
-          width: 2
-        },
-        fill: {
-          color: "rgba(234,148,158,0.5)"
-        }
-      },
-  layerOrder?: number // optional, default is undefined
-});
-```
-
-#### Show properties on the map.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showProperties',
-  jsonStyle: {
-    stroke: {
-      color: "rgba(234,148,158,1)",
-      width: 2
-    },
-    fill: {
-      color: "rgba(234,148,158,0.5)"
-    }
-  },
-  clearHighlighted?: boolean, // optional, default is true  
-  properties: [
-    {   
-      bruksnummer: string,
-      festenummer: string,
-      gaardsnummer: string,
-      kommunenummer: string,
-      seksjonsnummer: string,          
-    },
-    ...
-  ],
-  layerOrder?: number // optional, default is undefined
-});
-```
-
-#### Uploads GeoJson data for drawing. (REMOVED)
-Function is moved to: "isygis-custom-isy-tool-draw"
-```javascript
-const data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [10.424242651312149, 63.43525321967451],
-          },
-          properties: {
-            style: {
-              fill: { color: 'rgba(0,0,0,0.75)' },
-              stroke: { color: 'rgba(0,0,0,1)', width: 2 },
-              image: { radius: 7, fill: { color: 'rgba(0,0,0,1)' } },
-              text: '',
-              textSize: 16,
-            },
-          },
-          id: '3d34a05a-6e26-6943-10e7-ba8a3e48ba34',
-        },        
-      ],
-    };
-
-this.giparams = JSON.stringify({
-  giParamId: 'uploadDrawingGeoJson',
-  data: JSON.stringify(data)
-});
-```
-
-#### Uploads GeoJson data.
-```javascript
-const clusterStyleTest = {
-  fill: {
-    color: 'rgba(0,0,0,0.75)',
-  },
-  stroke: {
-    color: 'rgba(0,0,0,1)',
-    width: 2,
-  },
-  image: {
-    radius: 15,
-    fill: {
-      color: 'rgba(145,180,73,1)',
-    },
-    stroke: {
-    color: 'rgba(0,0,0,1)',
-    width: 2,
-  },
-  },
-};
-
-this.giparams = JSON.stringify({
-  giParamId: 'uploadGeoJson',
-  layerName: string,
-  features: string,
-  jsonStyle?: string,
-  featureInfoElements?: string,
-  featureInfoTitle?: string,
-  version?: string,
-  typeName?: string,
-  cluster?: boolean,
-  clustercount?: boolean,
-  clusterdistance?: number,
-  clusterstyleurl?: string,
-  clusterstyle?: JSON.stringify(clusterStyleTest),
-  layerOrder?: number,
-});
-```
-#### Uploads GeoTiff data.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'uploadGeoTiff',
-  geoTiffData: 'data:image/tiff;base64,SUkqAAgAAAARA...',
-  fitExtent?: true,
-  layerName?: string,
-  layerOrder?: number,
-  removePreviousGeoTiff?: boolean
-});
-```
-#### Switches off the map baselayers
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'hideBaseLayers',
-});
-```
-#### Switches on the map baselayers
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showBaseLayers',
-});
-```
-#### Cache required configuration
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'cacheConfig',
-  offline: boolean,
-});
-```
-#### Allows the map to zoom in or out.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'zoomIn',
-});
-
-this.giparams = JSON.stringify({
-  giParamId: 'zoomOut',
-});
-```
-
-#### Switches off the map hover information.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'deactivateHoverInfo',
-  hide: boolean,
-});
-```
-
-#### Adjusts the click pixel tolerance on the map.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setClickPixelTolerance',
-  clickPixelTolerance: number,
-});
-```
-
-#### Sets the popover parameters.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setPopoverParams',
-  layerName: string,
-  template: string,
-  popoverColor: string,
-});
-```
-
-#### Start / stop geolocation.
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'geolocation',
-  active: boolean,
-  accuracyCircleFillColor?: string,
-  geolocationImageSrc?: string,
-  geolocationImageScale?: number,
-});
-```
-
-#### Set base layer
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'setBaseLayer',
-  guid: string,
-});
-```
-
-#### Login (AzureAd)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'login'  
-});
-```
-
-#### Logout (AzureAd)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'logout'  
-});
-```
-
-#### Show / Hide scale line
-Default is false (scale line is hidden)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showScaleLine',
-  show: boolean
-});
-```
-
-#### Show / Hide north arrow
-Default is false (north arrow is hidden)
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'showNorthArrow',
-  show: boolean // default: false
-  northArrowUrl: string // './assets/img/northArrow1.png'
-});
-```
-
-#### Pause hover info
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'pauseHoverInfo',
-  active: boolean,
-});
-```
-
-# GETTERS PARAMETERS <small>isygis-custom-isy-map</small>
-```js
-<div class="isygis">
- <isygis-custom-isy-map configurl="{{configUrl}}" [giparams]="giparams" (mapoutput)="mapOutputData($event)"></isygis-custom-isy-map>
-</div>
-```
-
-#### Retrieves the center of the map
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getCenter',
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapCenter": {
-        "epsg": "EPSG:25832",
-        "lon": 584472,
-        "lat": 7001764,
-        "zoom": 5,
-        "scale": 2560000
-    },
-    "mapOutputId": "mapCenter"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapCenter') {
-    // ...
-  }
-}
-```
-
-#### Activates or deactivates the capture of click coordinates on the map
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getClickCoordinates',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapClickedCoordinates": {
-        "coordinate": [
-            587748.5742187499,
-            6942447.1640625
-        ],
-        "pixel": [
-            782.33984375,
-            487.6171875
-        ],
-        "client": [
-            890.30859375,
-            592.6171875
-        ],
-        "epsg": "EPSG:25832",
-        "zoom": 5
-    },
-    "mapOutputId": "mapClickedCoordinates"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapClickedCoordinates') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the extent of the map
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getExtent',
-  epsg?: string,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapExtent": {
-        "epsg": "EPSG:25832",
-        "extent": [
-            58104.5,
-            6730964,
-            1110839.5,
-            7272564
-        ]
-    },
-    "mapOutputId": "mapExtent"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapExtent') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the overlay layers of the map
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getMapLayers',
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapLayers": [
-       { ... },
-    ],
-    "mapOutputId": "mapLayers"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapLayers') {
-    // ...
-  }
-}
-```
-
-#### Get base layers
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getBaseLayers',
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "baseLayers": [
-        ...
-    ],
-    "mapOutputId": "baseLayers"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'baseLayers') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the geometry of an object
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getObjectGeometry',
-  active: boolean,
-  notAllowSameCoordsZoom?: boolean, // default is false
-  threshold?: number, // default is 1 m
-  disableClusterZoom?: boolean // default is false
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "objectGeometry": { ... },
-    "mapOutputId": "objectGeometry"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'objectGeometry') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the project configuration
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getProjectConfig',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "projectConfig": { ... },
-    "mapOutputId": "projectConfig"
-}
-
-mapOutputData(data: any): void {
-
-
-  if (data['mapOutputId'] === 'projectConfig') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the property information of an object
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getPropertyInfo',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "propertyInfo": { ... },
-    "mapOutputId": "propertyInfo"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'propertyInfo') {
-    // ...
-  }
-}
-```
-
-#### Retrieves information about a point
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getPointInfo',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "pointInfo": { ... },
-    "mapOutputId": "pointInfo"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'pointInfo') {
-    // ...
-  }
-}
-```
-
-#### Retrieves Saks information
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getSaksInfo',
-  knr: string,
-  planid: string,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "saksInfo": { ... },
-    "mapOutputId": "saksInfo"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'saksInfo') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the chosen search result
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getChosenSearchResult',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "chosenSearchResult": { ... },
-    "mapOutputId": "chosenSearchResult"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'chosenSearchResult') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the visible layers on the map
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getVisibleLayers',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "visibleLayers": [
-      { ... },
-    ],
-    "mapOutputId": "visibleLayers"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'visibleLayers') {
-    // ...
-  }
-}
-```
-
-#### Transforms coordinates from one spatial reference to another
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getTransformCoordinates',
-  fromEpsg: string,
-  toEpsg: string,
-  coordinates: number[],
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "coordinates": [
-        10.109541122770539,
-        59.80633928908478
-    ],
-    "mapOutputId": "transformCoordinates"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'transformCoordinates') {
-    // ...
-  }
-}
-```
-
-#### Retrieves the start of a map move
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getMapMoveStart',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapOutputId": "mapMoveStart"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapMoveStart') {
-    //
-
- ...
-  }
-}
-```
-
-#### Retrieves the end of a map move
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getMapMoveEnd',
-  active: boolean,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapOutputId": "mapMoveEnd",
-    "extent": [
-        10.38607418832841,
-        63.41947665736146,
-        10.477919652427957,
-        63.43754761711075
-    ],
-    "center": {
-        "epsg": "EPSG:32632",
-        "lon": 571463.8558368683,
-        "lat": 7034133.836538312,
-        "zoom": 13,
-        "scale": 10000
-    }
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapMoveEnd') {
-    // ...
-  }
-}
-```
-
-#### Get neighbors for plan
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getNeighborsForPlan',
-  planId: string,
-  kommunenummer: number,
-});
-```
-
-_Returned event data_
-```javascript
-data = {
-    "mapOutputId": "neighborListForPlan",
-    "Feil": null,
-    "Matrikkelenheter": [
-      {
-          "Id": number,
-          "Knr": number,
-          "Gnr": number,
-          "Bnr": number,
-          "Fnr": number,
-          "Snr": number,
-          "Bruksnavn": string,
-          "Owners": null,
-          "Addresser": [
-              {
-                  "Id": number,
-                  "Name": string,
-                  "ZipCode": number,
-                  "PostalCode": string
-              }
-          ],
-          "Teiger": [
-              {
-                  "Id": number,
-                  "Hovedteig": boolean
-              }
-          ],
-          "Utgatt": boolean
-      }
-    ]
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'neighborListForPlan') {
-    // ...
-  }
-}
-```
-
-#### Get map image
-```javascript
-this.giparams = JSON.stringify({
-  giParamId: 'getMapImage',
-  format: string; // 'image/png' | 'image/jpeg'
-  name?: string; // default: 'map'
-  download?: boolean; // default: false
-  showNorthArrow?: boolean; // default: false
-  northArrowUrl?: string; // './assets/img/northArrow1.png' 
-  showScaleLine?: boolean; // default: false
-});
-```
-
-_Returned event data_
-```javascript
-// When download is true, only the image is downloaded. When download is false, mapOutput is returned.
-data = {
-    "mapOutputId": "mapImage",
-    "mapImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAA....",    
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'mapImage') {
-    // ...
-  }
-}
-```
-
-# SETTER PARAMETERS <small>isygis-custom-isy-tool-draw</small>
-```js
-<div class="isygis">
- <isygis-custom-isy-tool-draw [giparams]="giparamsDraw"></isygis-custom-isy-map>
-</div>
-```
-#### Show draw tool UI
-```javascript
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'showDrawToolUi';
-  show: boolean;
-  minified?: boolean;
-  drawPanels?: string[]; // 'pointTab' | 'lineTab' | 'polygonTab'
-});
-```
-
-#### Start/Modify/Remove Draw
-```javascript
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'startDraw',
-  type?: string, // 'Point' | 'LineString' | 'Polygon';
-  style?: IStyle, 
-  snapGuides?: boolean
-});
-
-interface IStyle {
-    fill: IFill;
-    stroke: IStroke;
-    image: IIMage;
-}
-
-interface IFill {
-    color: string;
-}
-
-interface IStroke {
-    color: string;
-    lineDash: number[];
-    width: number;
-}
-
-interface IIMage {
-    fill: IFill;
-    radius: number;
-}
-
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'modifyDraw'
-});
-
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'removeSelectedObject'
-});
-
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'removeAllDrawings'
-});
-
-```
-
-#### Stop draw
-```javascript
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'stopDraw';
-});
-```
-
-#### Upload drawing GeoJson
-```javascript
-const data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [10.424242651312149, 63.43525321967451],
-          },
-          properties: {
-            style: {
-              fill: { color: 'rgba(0,0,0,0.75)' },
-              stroke: { color: 'rgba(0,0,0,1)', width: 2 },
-              image: { radius: 7, fill: { color: 'rgba(0,0,0,1)' } },
-              text: '',
-              textSize: 16,
-            },
-          },
-          id: '3d34a05a-6e26-6943-10e7-ba8a3e48ba34',
-        },        
-      ],
-    };
-
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'uploadDrawingGeoJson',
-  data: JSON.stringify(data)
-});
-```
-# GETTER PARAMETERS <small>isygis-custom-isy-tool-draw</small>
-
-```js
-<div class="isygis">
- <isygis-custom-isy-tool-draw [giparams]="giparamsDraw"></isygis-custom-isy-map>
-</div>
-```
-
-#### Download drawing GeoJSON
-```javascript
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'downloadDrawingGeoJson'
-});
-```
-
-_Returned_
-```javascript
-GeoJson file.
-```
-
-#### Get modified feature
-```javascript
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'getModifiedFeature',
-  active: boolean
-});
-```
-
-_Returned_
-```javascript
-data = {
-    "modifiedFeature": {
-        "type": "FeatureCollection",
-        "features": [
-            {
-                "type": "Feature",
-                "geometry": {
-                    "type": "LineString",
-                    "coordinates": [
-                        [
-                            10.412232651157716,
-                            63.43262811826044
-                        ],
-                        [
-                            10.411910653890358,
-                            63.43217732605416
-                        ],
-                        [
-                            10.410883819717013,
-                            63.43212704822067
-                        ],
-                        [
-                            10.410098602316635,
-                            63.43252723949083
-                        ]
-                    ]
-                },
-                "properties": {
-                    "measurement": "163.2 m",
-                    "style": {
-                        "fill": {
-                            "color": "rgba(0, 0, 160, 0.2)"
-                        },
-                        "stroke": {
-                            "color": "black",
-                            "lineDash": [
-                                0,
-                                0
-                            ],
-                            "width": 2
-                        },
-                        "image": {
-                            "fill": {
-                                "color": "rgba(0, 0, 0, 1)"
-                            },
-                            "radius": 5
-                        }
-                    }
-                },
-                "id": "ff08fa45-3a0d-cf36-3314-d2f396fa89f4"
-            }
-        ]
-    },
-    "mapOutputId": "modifiedFeature"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'modifiedFeature') {
-    // ...
-  }
-}
-```
-
-#### Get drawn features
-```javascript
-this.giparamsDraw = JSON.stringify({
-  giParamId: 'getDrawnFeatures'
-});
-```
-
-_Returned_
-```javascript
-data = {
-    "drawnFeatures": {
-        "type": "FeatureCollection",
-        "features": [
-            {
-                "type": "Feature",
-                "geometry": {
-                    "type": "Point",
-                    "coordinates": [
-                        10.412123247109973,
-                        63.432692693888605
-                    ]
-                },
-                "properties": {
-                    "style": {
-                        "fill": {
-                            "color": "rgba(0, 0, 160, 0.2)"
-                        },
-                        "stroke": {
-                            "color": "black",
-                            "lineDash": [
-                                0,
-                                0
-                            ],
-                            "width": 2
-                        },
-                        "image": {
-                            "fill": {
-                                "color": "rgba(0, 0, 0, 1)"
-                            },
-                            "radius": 5
-                        }
-                    }
-                },
-                "id": "80d4f955-9c65-551a-c5bc-748818b5ee11"
-            },
-            {
-                "type": "Feature",
-                "geometry": {
-                    "type": "Point",
-                    "coordinates": [
-                        10.412654541861299,
-                        63.43263287645137
-                    ]
-                },
-                "properties": {
-                    "style": {
-                        "fill": {
-                            "color": "rgba(0, 0, 160, 0.2)"
-                        },
-                        "stroke": {
-                            "color": "black",
-                            "lineDash": [
-                                0,
-                                0
-                            ],
-                            "width": 2
-                        },
-                        "image": {
-                            "fill": {
-                                "color": "rgba(0, 0, 0, 1)"
-                            },
-                            "radius": 5
-                        }
-                    }
-                },
-                "id": "68807574-6e77-87b9-7bee-958196d27673"
-            }
-        ]
-    },
-    "mapOutputId": "drawnFeatures"
-}
-
-mapOutputData(data: any): void {
-  if (data['mapOutputId'] === 'drawnFeatures') {
-    // ...
-  }
-}
-```
-
-## Example
-
-This is an example of using IsyMap Web Components with React
-```js
-const [configUrl, setConfigUrl] = useState<string>('https://map.isy.no/?project=Plandialog&application=demo&apiKey=XXXXX'); // 
-const [giParam, setGiParam] = useState<IParamId>({});
-const [mapOutput, setMapOutput] = useState<any>({});
-const mapOutputRef = useRef<any>(null);
-
-useEffect(() => {
-    if (Object.keys(giParam).length !== 0) {
-      const effect = async () => {
-        setGiParam({});
-      };
-      effect();
-    }
-  }, [giParam]);
-
-useEffect(() => {
-    const handleEvent = (e: any) => {
-      setMapOutput(e.detail)
-    };
-    mapOutputRef.current.addEventListener('mapoutput', handleEvent);
-    return () => {
-      mapOutputRef.current.removeEventListener('mapoutput', handleEvent);
-    };
-  }, [mapOutput]);
-
-<div className='isygis'>
-    <isygis-custom-isy-search-bar hideMenuIcon='false' /> // Search bar with visible menu icon (for open side panel)
-    <isygis-custom-isy-side-nav /> // Side menu - layers turn on/off
-    <isygis-custom-isy-info-panel /> // Info panel - search results / point information
-    <isygis-custom-isy-base-layers /> // Base layers switcher
-    <isygis-custom-isy-map configurl={configUrl} giparams={JSON.stringify(giParam)} ref={mapOutputRef} /> // Map module
-</div>
-configUrl - input for start project / change project (https://map.isy.no/?project=Plandialog&application=demo&apiKey=XXXXX)
-giparams - input params - (object with params)
-className='isygis' - isolation bootstrap styles
-mapOutputRef = ref for map events
-
-```
+Norconsult Digital's product. Subset of IsyMap (a openlayers based web map client) build as Web Components.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@norconsult-digital-public/isy-map-web-components",
     "name_": "@isygis/geo-innsyn-web-components",
-    "version": "0.0.2",
+    "version": "1.0.1",
     "publishConfig_": {
         "registry": "https://npm.pkg.github.com/"
     },