1

I want to add my own component as a zoom control for an openlayer map. from here I see that I can do that easily if I create some html elements. But I already have this zoom component that I use elsewhere and I was hoping to reuse it, but I have not figured out yet how to. My component is simple and it looks like this:

<div >
    <div>
        <button mat-flat-button (click)="zoomIn($event)">
            +
        </button>
    </div>
    <div>
        <button mat-flat-button (click)="zoomOut($event)">
            -
        </button>
    </div>
</div>

zoomout and in events are basically just emitting a signal.

So at the moment I am facing two issues I don't know how to solve. First is how to actually use the angular component as the control, and how to connect the signal and zoom in or out just like the actual map zoom out do it.

from that link the constructor looks like:

constructor(opt_options) {
    const options = opt_options || {};

    const button = document.createElement('button');
    button.innerHTML = 'N';

    const element = document.createElement('div');
    element.className = 'rotate-north ol-unselectable ol-control';
    element.appendChild(button);

    super({
      element: element,
      target: options.target,
    });

    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
  }

and i guess where I have the button and the element is where I'd have my component. And another problem I have is that once I try to use the signal, I get an error saying I need to call the super first. But if I call it first, I can't set the target and the element.

Has anyone tried to do this before?

thanks!

solar apricot
  • 353
  • 2
  • 5
  • 24

1 Answers1

0

you can try this. It works for me.

constructor(opt_options) { 
    super({
        element: document.createElement('div')
    });

    const elm = this.element;
    const button = document.createElement('button');
    button.innerHTML = name;

    elm.className = "ol-unselectable ol-control layerchangebutton";
    elm.appendChild(button);

    this._layerNumber = layerNumber;
    this._mapService = mapService;
    button.addEventListener('click', this.handleLayer.bind(this), false);
}
Ahmet Beşkonaklıoğlu
  • 1