CODEWITHSUNDEEP
angulardrag-and-dropoverlayopenlayersdraggable
user3356007
user3356007

Reputation: 403

Angular5, Openlayers5 make your popup(overlay) draggable

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

Upvotes: 1

Views: 870

Answers (1)

Viglino Jean-Marc
Viglino Jean-Marc

Reputation: 1421

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

Upvotes: 2

Related Questions