npm package: @isygis/geo-innsyn-web-components
Description: GeoInnsyn Web Components is a subset of GeoInnsyn (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-)). T
Latest version: 0.0.21-beta.6

# About The Project - GeoInnsyn Web Components

GeoInnsyn Web Components is a subset of GeoInnsyn (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 GeoInnsyn 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 GeoInnsyn
- Usage
  - Navigation
  - Change map content
  - Retriving data
- Example

## Getting Started

### Prerequisites
To use geo-innsyn-web-components in your project install it via npm:
 ```sh
  npm i @isygis/geo-innsyn-web-components
  ```

### React

Import modul
```js
import '@isygis/geo-innsyn-web-components/geo-innsyn-web-components.js'
```
Import style
```js
import '@isygis/geo-innsyn-web-components/geo-innsyn-web-components.css';
```
The library does not contain the configuration of the GeoInnsyn project. Therfore you have to point the application to the desired configuration. 
```js
const [configUrl, setConfigUrl] = useState<string>('https://geoinnsyn.no/?project=Plandialog&application=demo&apiKey=XXXXX'); 
```

#### Enabeling use of UI from GeoInnsyn
It's possible to include some UI-components from GeoInnsyn. 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 GeoInnsyn. 

### Angular

In angular.json include styles and scripts: 

```json
"styles": [
 "src/styles.scss",
 "../node_modules/@isygis/geo-innsyn-web-components/geo-innsyn-web-components.css"
],

"scripts": [
"../node_modules/@isygis/geo-innsyn-web-components/geo-innsyn-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 GeoInnsyn project. Therfore you have to point the application to the desired configuration. 
```js
configUrl = 'https://geoinnsyn.no/?project=Plandialog&application=demo&apiKey=XXXXX'; 
```

#### Enabeling use of UI from GeoInnsyn
It's possible to include some UI-components from GeoInnsyn. 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 GeoInnsyn. 

## 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 GeoInnsyn Web Components with React
```js
const [configUrl, setConfigUrl] = useState<string>('https://geoinnsyn.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://geoinnsyn.no/?project=Plandialog&application=demo&apiKey=XXXXX)
giparams - input params - (object with params)
className='isygis' - isolation bootstrap styles
mapOutputRef = ref for map events

```