Create new plugins - AnSyn/ansyn GitHub Wiki

In this page we create a new plugins that we use with an OpenLayers map it's a simple plugin that draw an icon on the center of the map on each move.

Step 1

Create a directory named plugins

Step 2

The most importent thing in a plugin is that he inherit from BaseImageryPlugin and have the @ImageryPlugin declaration Create file called center-marker.plugins.ts and paste the following text into it:

import {BaseImageryPlugin, ImageryPlugin} from '@ansyn/imagery';
import { OpenLayersMap } from '@ansyn/ol';

@ImageryPlugin({
  supported: [OpenLayersMap],
  deps: []
})
export class CenterMarkerPlugins extends BaseImageryPlugin{  
}

we just create our plugin and tell him that he support only OpenLayer map. let give him some logic

Step 3

we need to define our icon style declare on iconStyle variable and define it in the constructor:

...
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
...
export class CenterMarkerPlugin extends BaseImageryPlugin {
  private _iconStyle: Style;
  constructor() {
    super();
    this._isEnabled = false;

    this._iconStyle = new Style({
      image: new Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'assets/icons/filters.svg'
      }))
    });

  }
}

Step 4

we need to define the layer that draw our icon:

...
import {BaseImageryMap, BaseImageryPlugin, ImageryPlugin} from '@ansyn/imagery';
import Point from 'ol/geom/Point';
import Vector from 'ol/source/Vector';
import Feature from 'ol/Feature';
import VectorLayer from 'ol/layer/Vector';
...
export class CenterMarkerPlugin extends BaseImageryPlugin {
...
private _existingLayer;
...
private tryDrawCenter() {
    const map: BaseImageryMap = this.communicator.ActiveMap;
    const center = map.mapObject.getView().getCenter();
    const iconFeature = new Feature({
      geometry: new Point(center),
      name: 'Center'
    });
    iconFeature.setStyle(this._iconStyle);
    const vectorSource = new Vector({
      features: [iconFeature]
    });
    this._existingLayer = new VectorLayer({source: vectorSource});
    this.communicator.addLayer(this._existingLayer);
  }
}

Step 5

we need to subscribe to an position change event that draw our layer:

...
import {BaseImageryMap, BaseImageryPlugin, ImageryMapPosition, ImageryPlugin} from '@ansyn/imagery';
...
export class CenterMarkerPlugin extends BaseImageryPlugin {
...
onInit() {
    this.communicator.positionChanged.pipe(
      debounceTime(500),
      tap(this.tryDrawCenter.bind(this))
      ).subscribe();
  }
...
}

Step 6

declare on your plugins in app.module.ts

...
ImageryModule.provide({
      maps: [OpenLayersMap],
      plugins: [CenterMarkerPlugins],
      mapSourceProviders: [OpenLayerOSMSourceProvider]
    }),
  ],
...

Step 7

If we run our app we see that we only draw the icon but it never remove, let update our plugin to draw only one icon add the following to your center-marker.plugins.ts file:

export class CenterMarkerPlugins extends BaseImageryPlugin {
 private tryDrawCenter(){
   this.tryDeleteCenter();
  ...
}
 private tryDeleteCenter() {
    if (this._existingLayer) {
      this.communicator.removeLayer(this._existingLayer);
      this._existingLayer = null;
    }
  }
}