Upgrading Extensible Components - 23.1

Spectrum Spatial Analyst Extensibility Guide
Product type
Software
Portfolio
Locate
Product family
Spectrum
Product
Spectrum > Spatial > Spectrum Spatial Analyst
Version
23.1
Language
English
Product name
Spectrum Spatial Analyst
Title
Spectrum Spatial Analyst Extensibility Guide
Topic type
Reference
Overview
Configuration
How Do I
Tips
First publish date
2007
Last edition
2023-06-02
Last publish date
2023-06-02T09:43:01.991628

Spectrum Spatial Analyst enables you to migrate your existing extensible components to Angular 11. The following sections will help you successfully migrate your components.

You need to make the following changes to run the extensible components in the migrated Spectrum Spatial Analyst application.

1. NgRx Store

The NgRx Store has been migrated from version 2.2.3 to version 11.1.1. This upgrade requires some syntax changes as explained below:

  • First change: Remove the new operator while dispatching the action. This is must for every action’s dispatch that you are using in your extensible component.

    In Angular 4, whenever you dispatched an action, you would use the below syntax:
    this.store.dispatch(new actionName(payload));
    Now, you need to remove the new operator in Spectrum Spatial Analyst Angular 11’s extensible components so that it looks like:
    this.store.dispatch(actionName(payload));
    To create a query in Spectrum Spatial Analyst make the changes as described in the table below.
    To create a query layer in Angular 4 To create a query layer in Angular 11 
    const params = {
query: "SELECT Country,Capital,Continent  
FROM \"/Samples/NamedTables/WorldTable\" 
WHERE Lower(Country) LIKE Lower('%In%')",
layerName: "Country", 
name: "Countries name containing 'In'", 
addToMap: addToMap,
getResult: getResult,
orderIndex: 0,
replaceCurrentLegend: false,
customComponentData: { customDataObj: "customDataObj" }
};
this.store.dispatch(new ExecuteQueryAction(params));
    		 
    this.store.dispatch(ExecuteQueryAction(params)); 
// No change in the payload passed to ExecuteQueryAction. 
Only change is removing the new operator.
  • Second change: Modify the payload passed to action while dispatching it. It is required only when your payload is of type string, number, Boolean or an array. If the payload is of type JSON object like in the above example of query, then there is no need to make any change in the payload. For example, 
    this.store.dispatch(new ToggleResourceSelectorVisiblity(true));
    To dispatch action when payload is of type Boolean:
    Angular 4 Angular 11 
    this.store.dispatch(new
ToggleResourceSelectorVisiblity(true));
    		 
    this.store.dispatch(ToggleResourceSelectorVisiblity(
{toggleVisiblity: true} ));
    So, if the payload is of primitive type like Boolean, make the following changes:
    • Remove the new operator as explained above.
    • Wrap the Boolean payload in a JSON object. The key which has been introduced for ToggleResourceSelectorVisiblity action is toggleVisiblity. Each actions have different key name, refer to the API documentation for details on actions and the corresponding keys.

2. RxJS

It has been migrated from version 5.4.2 to 6.6.7 and requires the following changes:

  • First change: If you are using map, mergeMap, concatMap, switchMap etc. operators of RxJS in your extensible component, then you have to use pipe operator as shown below:
    Using RxJS map operator in Angular 4 Using RxJS map operator in Angular 11 
    this.xhrIncokerService.invokeController
(options).map((data ) => {
//logic 
});
    		 
    this.xhrIncokerService.invokeController
(options).pipe(map( (data)=> {; //logic });

  • Second change: Importing RxJS operators has also changed. To import certain operators like map, mergeMap, concatMap, and switchMap you can use the following code:

    Importing RxJS operators in Angular 4 Importing RxJS operators in Angular 11 
    // Old version
import { Observable } from 'rxjs/Observable'; 
// Old version
import { Subject } from 'rxjs/Subject';  
// Old version
import { Observer } from 'rxjs/Observer'; 
    // Latest version;
import { map, mergeMap, switchMap, concatMap }  from 'rxjs/operators'; 
importing very commonly used Rxjs stuff like Observable,  Subscription, Subject 
import {Observable, Subject, Observer, Subscription, of } from 'rxjs';

You can refer to RxJS documentation for the latest updates.

3. Open Layers

It has been migrated from 4.2.0 to 6.5.0 and requires the following changes.
Using open layers in 4.2.0 Using open layers in 6.5.0 
import * as ol from 'openlayers';
const vectorSource = new ol.source.Vector();
const point_feature = new ol.Feature({});
const point_geom = new ol.geom.Point([2.0000000000345, 1.0000000245]);
point_feature.setGeometry(point_geom);
vectorSource.addFeature(point_feature);
const layer = new ol.layer.Vector({ source: vectorSource});
const map = new ol.Map({
       layers: [layer],
	interactions: ol.interaction.defaults({
	doubleClickZoom: false,
	shiftDragZoom: false,
	keyboard: false,
	mouseWheelZoom: false,
	pinchZoom: false     
	}),
	target: 'map'
       });
 
import { Map, Feature } from 'ol';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Point from 'ol/geom/Point';
import { defaults } from 'ol/interaction';
const vectorSource = new VectorSource();
const point_feature = new Feature({});
const point_geom = new Point([2.0000000000345, 1.0000000245]);
point_feature.setGeometry(point_geom);
vectorSource.addFeature(point_feature);
const layer = new VectorLayer({ source: vectorSource });
		const map = new Map({
             layers: [layer],
		interactions: defaults({
		doubleClickZoom: false,
		shiftDragZoom: false,
             keyboard: false,
		mouseWheelZoom: false,
		pinchZoom: false
		}),
		target: 'map'
		});

4. Third-party libraries

Spectrum Spatial Analyst provides you various third-party libraries. Those libraries have been upgraded. If your extensible components use those libraries, you need to modify the syntax according to their updated syntax. The following third-party libraries have been upgraded.

  • "primeng": "^11.4.2"
  • "ngx-bootstrap": "^6.2.0"
  • "@ngx-translate/core": "^13.0.0"
  • "@ngx-translate/http-loader": "^6.0.0"
  • "ng2-google-charts": "6.1.0"
Note: Please refer to the official documentation of these plugins to get the latest syntax.

5. Angular Framework and dependencies upgrade

If you have set up a local dev environment to create or edit extensible components, then you need to upgrade the following:

  • Angular framework -> 11

  • NgRxStore -> 11.1.1

  • RxJS -> 6.6.7
  • Openlayers -> 6.5.0