@norconsult-digital-public/isy-map-web-components 0.0.1

package/README.md

@@ -0,0 +1,1401 @@
+# About The Project - IsyMap 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
+
+```