Angular5, Openlayers5 make your popup(overlay) draggable

Question

I am trying to make my popup draggable. I have seen some solutions with older openlayers versions but these wont work with the new version.

Map:

this.map = new OlMap({
  target: 'map',
  layers: [
    new OlTileLayer({
      name: 'maplayer',
      source: new OlXYZ({
        url: 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=',
        title: 'maplayer'
      })
    })
  ],
  view: this.view
});

Popup:

this.popup = document.getElementById('popup');

    this.incidentOverlay = new Overlay(({
      element: this.popup,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      },
      autoPanMargin: 250,
    }));

what is the best way to make my overlay draggable

thx a lot

Does this help you : https://openlayers.org/en/latest/examples/translate-features.html ? — Askirkela, Jun 25 '19 at 13:34
@Askirkela I also saw that example but when is expirement with it in angular5 it says that new Select() does not have a constructor In angular I am using the OL module. Now I am a little bit stuck — user3356007, Jun 25 '19 at 13:37
You can pass options when creating a Select instance (look in the docs). Keep in mind that the latest types for the ol packages are not all up to date. — Askirkela, Jun 25 '19 at 14:03
@Askirkela do you have an example of how i can fix this in combination with angular5? — user3356007, Jun 25 '19 at 14:11
why not upgrade to 7? https://material.angular.io/cdk/drag-drop/examples — , Jun 25 '19 at 14:13
@Knostradamus is an update easy from 5 to 7 ? and still the dragdrop will not be done bij openlayers — user3356007, Jun 25 '19 at 14:20
It's not hard: https://update.angular.io/ Just follow the guide. If your popup overlay is an Angular Material Dialog then this should be easy. Not familiar with openlayers. Got out of GIS a long time ago. — , Jun 25 '19 at 14:24
To initialize your Select, take a look here : https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html . Since an overlay is a feature, selecting it then translating it should work — Askirkela, Jun 25 '19 at 14:25
@Askirkela I tried a couple of things it really does not want to work so I need a example because the documentation is not very clearly there are no examples — user3356007, Jun 25 '19 at 14:39
Do your users HAVE to be able to translate your overlay or could you do it programmatically? If you can do it programmatically, use the `Overlay.setPosition([number, number])` (in your layer's projection) to move your overlay. — Askirkela, Jun 25 '19 at 14:46

score 2 · Accepted Answer · answered Jun 25 '19 at 19:08

2

Have a look at the ol/interaction/DragOverlay of the ol-ext lib.

An example is avaliable here: https://viglino.github.io/ol-ext/examples/interaction/map.interaction.dragoverlay.html

answered Jun 25 '19 at 19:08

Viglino Jean-Marc

1,371
8
6

can we also make a part over the overlay clickable – user3356007 Jun 26 '19 at 08:27
when I start dragging the popup directly switches position also in the example you send me. any idea of how i can set the point where there is clicked of the popup as the point from where the dragging has to start? – user3356007 Jun 27 '19 at 14:37
The popup is located on its anchor point at the cursor position. – Viglino Jean-Marc Jul 03 '19 at 16:05

Angular5, Openlayers5 make your popup(overlay) draggable

1 Answers1