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). 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:

 npm i @isygis/geo-innsyn-web-components

React

Import modul

import '@isygis/geo-innsyn-web-components/geo-innsyn-web-components.js'

Import style

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.

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:

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

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

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.

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:

<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

  • Switches off the feature selector and drawing manager within the map service.
  • 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 name (DEPRECATED)
  • 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 the translation bar.
  • Removes a drawing from the GeoJson data. (REMOVED)
  • Removes a specific layer.
  • Removes multiple layers.
  • Changes the map size.
  • Modifies the map's center.
  • Sets the extent of the map.
  • Changes the language setting of the map interface.
  • Provides a new JWT token for the map service.
  • Enables or disables map animations.
  • Reveals a layer by its unique identifier (guid) or by its name.
  • Reveals a layer by its name (DEPRECATED)
  • 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.
  • Activates the feature to show neighbors.
  • Show a property on the map.
  • Show properties on the map
  • Uploads GeoJson data for drawing. (REMOVED)
  • Uploads GeoJson data.
  • Allows the map to zoom in or out.
  • Switches off the map hover information.
  • Adjusts the click pixel tolerance on the map.
  • Sets the popover parameters.
  • Start / stop geolocation.
  • Set base layer
  • Login (AzureAd)
  • Logout (AzureAd)
  • Show / Hide scale line
  • Pause hover info

• GETTERS PARAMETERS isygis-custom-isy-map

  • Retrieves the center of the map
  • Activates or deactivates the capture of click coordinates on the map
  • Retrieves the extent of the map
  • Retrieves the overlay layers of the map
  • Get base layers
  • Retrieves the geometry of an object
  • Retrieves the project configuration
  • Retrieves the property information of an object
  • Retrieves information about a point
  • Retrieves Saks information
  • Retrieves the chosen search result
  • Retrieves the visible layers on the map
  • Transforms coordinates from one spatial reference to another
  • Retrieves the start of a map move
  • Retrieves the end of a map move
  • Get neighbors for plan
  • Get map image

Isygis-custom-isy-tool-draw

• SETTER PARAMETERS isygis-custom-isy-tool-draw

  • Show draw tool UI
  • Start/Modify/Remove Draw
    • IStyle Interface
    • IFill Interface
    • IStroke Interface
    • IImage Interface
    • Modify Draw
    • Remove Selected Object
    • Remove All Drawings
  • Stop draw
  • Upload drawing GeoJson

• GETTER PARAMETERS isygis-custom-isy-tool-draw

  • Download drawing GeoJSON
  • Get modified feature
  • Get drawn features

SETTER PARAMETERS isygis-custom-isy-map

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

this.giparams = JSON.stringify({
  giParamId: 'deactivateShowNeighbors',
});

Makes all visible layers on the map invisible.

this.giparams = JSON.stringify({
  giParamId: 'hideAllVisibleLayers',
});

Makes a specific layer invisible on the map, identified by its unique identifier (guid) or by its name.

this.giparams = JSON.stringify({
  giParamId: 'hideLayer',
  guid?: string,
  name?: string,
});

Makes a specific layer invisible on the map, identified by its name (DEPRECATED)

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.

this.giparams = JSON.stringify({
  giParamId: 'hideLayers',
  guids?: string[],
  names?: string[],
});

Hides a marker displayed on the map.

this.giparams = JSON.stringify({
  giParamId: 'hideMarker',
});

Hides the translation bar.

this.giparams = JSON.stringify({
  giParamId: 'hideTranslateBar',
  hide: boolean,
});

Removes a drawing from the GeoJson data. (REMOVED)

this.giparams = JSON.stringify({
  giParamId: 'removeDrawingGeoJson',
});

Removes a specific layer.

this.giparams = JSON.stringify({
  giParamId: 'removeLayer',
  guid?: string,
  name?: string,
});

Removes multiple layers.

this.giparams = JSON.stringify({
  giParamId: 'removeLayers',
  guids?: string[],
  names?: string[],
});

Changes the map size.

this.giparams = JSON.stringify({
  giParamId: 'resizeMap',
});

Modifies the map's center.

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.

this.giparams = JSON.stringify({
  giParamId: 'setExtent',
  epsg?: string,
  extent: number[],
});

Changes the language setting of the map interface.

this.giparams = JSON.stringify({
  giParamId: 'setLanguage',
  language: string, // ('en', 'no')
});

Provides a new JWT token for the map service.

this.giparams = JSON.stringify({
  giParamId: 'setJwt',
  token: string,
});

Enables or disables map animations.

this.giparams = JSON.stringify({
  giParamId: 'setMapAnimation',
  active: boolean,
});

Reveals a layer by its unique identifier (guid) or by its name.

this.giparams = JSON.stringify({
  giParamId: 'showLayer',
  guid?: string,
  name?: string
});

Reveals a layer by its name (DEPRECATED)

this.giparams = JSON.stringify({
  giParamId: 'showLayerByName',
  name: string,
});

Reveals multiple layers identified by their unique identifiers (guids) or by its names.

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.

this.giparams = JSON.stringify({
  giParamId: 'showMarkerWhenClick',
  active: boolean,
  markerColor: string,
});

Activates the feature to show neighbors.

this.giparams = JSON.stringify({
  giParamId: 'showNeighbors',
  bruksnummer: string,
  festenummer: string,
  gaardsnummer: string,
  kommunenummer: string,
  seksjonsnummer: string,
});

Show a property on the map.

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

Show properties on the map.

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,          
    },
    ...
  ]
});

Uploads GeoJson data for drawing. (REMOVED)

Function is moved to: "isygis-custom-isy-tool-draw"

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.

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

Allows the map to zoom in or out.

this.giparams = JSON.stringify({
  giParamId: 'zoomIn',
});

this.giparams = JSON.stringify({
  giParamId: 'zoomOut',
});

Switches off the map hover information.

this.giparams = JSON.stringify({
  giParamId: 'deactivateHoverInfo',
  hide: boolean,
});

Adjusts the click pixel tolerance on the map.

this.giparams = JSON.stringify({
  giParamId: 'setClickPixelTolerance',
  clickPixelTolerance: number,
});

Sets the popover parameters.

this.giparams = JSON.stringify({
  giParamId: 'setPopoverParams',
  layerName: string,
  template: string,
  popoverColor: string,
});

Start / stop geolocation.

this.giparams = JSON.stringify({
  giParamId: 'geolocation',
  active: boolean,
  accuracyCircleFillColor?: string,
  geolocationImageSrc?: string,
  geolocationImageScale?: number,
});

Set base layer

this.giparams = JSON.stringify({
  giParamId: 'setBaseLayer',
  guid: string,
});

Login (AzureAd)

this.giparams = JSON.stringify({
  giParamId: 'login'  
});

Logout (AzureAd)

this.giparams = JSON.stringify({
  giParamId: 'logout'  
});

Show / Hide scale line

Default is false (scale line is hidden)

this.giparams = JSON.stringify({
  giParamId: 'showScaleLine',
  show: boolean
});

Pause hover info

this.giparams = JSON.stringify({
  giParamId: 'pauseHoverInfo',
  active: boolean,
});

GETTERS PARAMETERS isygis-custom-isy-map

<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

this.giparams = JSON.stringify({
  giParamId: 'getCenter',
});

Returned event data

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

this.giparams = JSON.stringify({
  giParamId: 'getClickCoordinates',
  active: boolean,
});

Returned event data

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

this.giparams = JSON.stringify({
  giParamId: 'getExtent',
  epsg?: string,
});

Returned event data

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

this.giparams = JSON.stringify({
  giParamId: 'getMapLayers',
});

Returned event data

data = {
    "mapLayers": [
       { ... },
    ],
    "mapOutputId": "mapLayers"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'mapLayers') {
    // ...
  }
}

Get base layers

this.giparams = JSON.stringify({
  giParamId: 'getBaseLayers',
});

Returned event data

data = {
    "baseLayers": [
        ...
    ],
    "mapOutputId": "baseLayers"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'baseLayers') {
    // ...
  }
}

Retrieves the geometry of an object

this.giparams = JSON.stringify({
  giParamId: 'getObjectGeometry',
  active: boolean,
});

Returned event data

data = {
    "objectGeometry": { ... },
    "mapOutputId": "objectGeometry"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'objectGeometry') {
    // ...
  }
}

Retrieves the project configuration

this.giparams = JSON.stringify({
  giParamId: 'getProjectConfig',
  active: boolean,
});

Returned event data

data = {
    "projectConfig": { ... },
    "mapOutputId": "projectConfig"
}

mapOutputData(data: any): void {


  if (data['mapOutputId'] === 'projectConfig') {
    // ...
  }
}

Retrieves the property information of an object

this.giparams = JSON.stringify({
  giParamId: 'getPropertyInfo',
  active: boolean,
});

Returned event data

data = {
    "propertyInfo": { ... },
    "mapOutputId": "propertyInfo"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'propertyInfo') {
    // ...
  }
}

Retrieves information about a point

this.giparams = JSON.stringify({
  giParamId: 'getPointInfo',
  active: boolean,
});

Returned event data

data = {
    "pointInfo": { ... },
    "mapOutputId": "pointInfo"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'pointInfo') {
    // ...
  }
}

Retrieves Saks information

this.giparams = JSON.stringify({
  giParamId: 'getSaksInfo',
  knr: string,
  planid: string,
});

Returned event data

data = {
    "saksInfo": { ... },
    "mapOutputId": "saksInfo"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'saksInfo') {
    // ...
  }
}

Retrieves the chosen search result

this.giparams = JSON.stringify({
  giParamId: 'getChosenSearchResult',
  active: boolean,
});

Returned event data

data = {
    "chosenSearchResult": { ... },
    "mapOutputId": "chosenSearchResult"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'chosenSearchResult') {
    // ...
  }
}

Retrieves the visible layers on the map

this.giparams = JSON.stringify({
  giParamId: 'getVisibleLayers',
  active: boolean,
});

Returned event data

data = {
    "visibleLayers": [
      { ... },
    ],
    "mapOutputId": "visibleLayers"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'visibleLayers') {
    // ...
  }
}

Transforms coordinates from one spatial reference to another

this.giparams = JSON.stringify({
  giParamId: 'getTransformCoordinates',
  fromEpsg: string,
  toEpsg: string,
  coordinates: number[],
});

Returned event data

data = {
    "coordinates": [
        10.109541122770539,
        59.80633928908478
    ],
    "mapOutputId": "transformCoordinates"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'transformCoordinates') {
    // ...
  }
}

Retrieves the start of a map move

this.giparams = JSON.stringify({
  giParamId: 'getMapMoveStart',
  active: boolean,
});

Returned event data

data = {
    "mapOutputId": "mapMoveStart"
}

mapOutputData(data: any): void {
  if (data['mapOutputId'] === 'mapMoveStart') {
    //

 ...
  }
}

Retrieves the end of a map move

this.giparams = JSON.stringify({
  giParamId: 'getMapMoveEnd',
  active: boolean,
});

Returned event data

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

this.giparams = JSON.stringify({
  giParamId: 'getNeighborsForPlan',
  planId: string,
  kommunenummer: number,
});

Returned event data

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

this.giparams = JSON.stringify({
  giParamId: 'getMapImage',
  format: string; // 'image/png' | 'image/jpeg'
  name?: string; // default: 'map'
  download?: boolean; // default: false
});

Returned event data

// 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 isygis-custom-isy-tool-draw

<div class="isygis">
 <isygis-custom-isy-tool-draw [giparams]="giparamsDraw"></isygis-custom-isy-map>
</div>

Show draw tool UI

this.giparamsDraw = JSON.stringify({
  giParamId: 'showDrawToolUi';
  show: boolean;
  minified?: boolean;
  drawPanels?: string[]; // 'pointTab' | 'lineTab' | 'polygonTab'
});

Start/Modify/Remove Draw

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

this.giparamsDraw = JSON.stringify({
  giParamId: 'stopDraw';
});

Upload drawing GeoJson

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 isygis-custom-isy-tool-draw

<div class="isygis">
 <isygis-custom-isy-tool-draw [giparams]="giparamsDraw"></isygis-custom-isy-map>
</div>

Download drawing GeoJSON

this.giparamsDraw = JSON.stringify({
  giParamId: 'downloadDrawingGeoJson'
});

Returned

GeoJson file.

Get modified feature

this.giparamsDraw = JSON.stringify({
  giParamId: 'getModifiedFeature',
  active: boolean
});

Returned

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

this.giparamsDraw = JSON.stringify({
  giParamId: 'getDrawnFeatures'
});

Returned

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

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