How to positionate overlay

[rSammy]

How to place popup correctly ?
I have a map where every areas (features) are visible on the screen, and I don't want anyone to move it.
So I want the popup to be shown on the map but the popup doesn't place itself automatically.
When I click on some area on the edge of the screen the map gets dragged to the selected area

When I move the map, the size change

Whenever I click on some feature, on the bottom of the screen, the map is dragging me slowly to the selected area because of the "pointOnSurface" method
How can the popup be shown only on visible screen ?

<div class="ol-overlay-container ol-selectable" style="position: absolute; top: 179px; left: 0;">

Top and left values are dynamically changed every one second

[rSammy]

It does exactly the same on the demo app.

When you zoom in and click on the circle area, the map is being dragged. While it should just display the popup on the left side instead.

[ghettovoice]

Hi @rSammy ,
to disable map panning there is autoPan property - it is disabled by default.

Also you can use positioning property to define how the overlay is actually positioned with respect to its position property. Possible values: 'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'. Default is 'top-left'.

It does exactly the same on the demo app.

I can't reproduce auto dragging on the demo. Are you experience this behavior with the demo fork?

[rSammy]

Hi @rSammy ,
to disable map panning there is autoPan property - it is disabled by default.

Also you can use positioning property to define how the overlay is actually positioned with respect to its position property. Possible values: 'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'. Default is 'top-left'.

It does exactly the same on the demo app.

I can't reproduce auto dragging on the demo. Are you experience this behavior with the demo fork?

Try zoom in the map like this, then if you click on the circle it will auto drag

[rSammy]

I don't know why, on my app the width of the div is too large.

While my code looks like this

<vl-interaction-select @select="onSelect" @unselect="onUnselect" :features.sync="selectedFeatures"
                               v-if="drawType == null">
            <template slot-scope="select">
                <!-- selected feature popup -->
                <vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id"
                            :position="pointOnSurface(feature.geometry)">
                    <template slot-scope="popup">
                        <div class="card" style="width:50%;">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <p class="card-header-title">
                                        Feature ID {{ feature.id }}
                                    </p>
                                </h5>
                                <div class="card-text">
                                    <div class="content">
                                        <p>
                                            Overlay popup content for Feature with ID <strong>{{ feature.id }}</strong>
                                        </p>
                                        <p>
                                            Popup: {{ JSON.stringify(popup) }}
                                        </p>
                                        <p>
                                            Feature: {{ JSON.stringify({ id: feature.id, properties: feature.properties
                                            }) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </vl-overlay>
                <!--// selected popup -->
            </template>
        </vl-interaction-select>

[rSammy]

I have autopan enabled, I don't think that's the problem as it does the same on the demo app.
You were talking about "positioning", the think is that, I can't predict the area where the user will click

[ghettovoice]

Try zoom in the map like this, then if you click on the circle it will auto drag

I did this, here is screen cast https://drive.google.com/file/d/1UY7tAWCU6ZqRY0V2sY8qvFHTH-nI_W2C/view

I don't know why, on my app the width of the div is too large.

Probably you should use absolute width because overlay div position is absolute

[ghettovoice]

You were talking about "positioning", the think is that, I can't predict the area where the user will click

Yes, and OpenLayers ol.Overlay component too, so there is autoPan option that is an easy work around. openlayers/openlayers#2181

[ghettovoice]

You can try to listen map click event and dynamically compute positioning based on hit of the click coordinate in one of the four sectors of the map (south-west, south-east, ...)

[rSammy]

Try zoom in the map like this, then if you click on the circle it will auto drag

I did this, here is screen cast https://drive.google.com/file/d/1UY7tAWCU6ZqRY0V2sY8qvFHTH-nI_W2C/view

I tried with google chrome, indeed i'm not being dragged, but with firefox it does

I don't know why, on my app the width of the div is too large.

Probably you should use absolute width because overlay div position is absolute

Yup, I put style="position:absolute" on template element it did the trick and stopped dragging the map

[ghettovoice]

but with firefox it does

Now I see. Very strange bug.
Thank you for attentiveness

[rSammy]

On Firefox, when I set auto-pan to true, the map is getting dragged even when I set position absolute. When I set auto-pan off, I need to set position absolute, otherwise map get dragged.

I still can't manage to position the popup correctly, it is always at the right of the feature

[ghettovoice]

Sorry for the late response.
This is available positioning enum:

export const OVERLAY_POSITIONING = {
  BOTTOM_LEFT: 'bottom-left',
  BOTTOM_CENTER: 'bottom-center',
  BOTTOM_RIGHT: 'bottom-right',
  CENTER_LEFT: 'center-left',
  CENTER_CENTER: 'center-center',
  CENTER_RIGHT: 'center-right',
  TOP_LEFT: 'top-left',
  TOP_CENTER: 'top-center',
  TOP_RIGHT: 'top-right',
}

[ghettovoice]

Please try v0.11.0-rc.1 that is based on OpenLayers 5

npm install vuelayers@next

or v0.10.15 that also contains the bugfix

npm install vuelayers@latest

[ghettovoice]

fixed in the latest versions

[felixdenoix]

Hi @ghettovoice, it seems that the issue is not fixed yet on the example app you provide.
The positionning is working when testing here when doing

   <vl-overlay id="overlay" :position="overlayCoordinate" positioning="center-top">
      <template slot-scope="scope">
        <div class="overlay-content">
          Hello world!<br>
          Position: {{ scope.position }}
        </div>
      </template>
    </vl-overlay>

but not in the demo app when used in this line like so:

<vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id"
 :position="pointOnSurface(feature.geometry)" :auto-pan="true" :auto-pan-animation="{ duration: 300 }" positioning="center-center">

any idea of how to solve the issue ?

[ghettovoice]

Hi @felixdenoix ,
I don't see any problems with demo neither on site https://vuelayers.github.io/demo/, nor run locally.

What are showing in the devtool? Is it shows VlOverlay component? If so what in the position property?

[felixdenoix]

@ghettovoice thanks for the quick response !
it seems that the positioning property is not taken in account. In the velayers-demo, I modified the app.vue l.32 like so:

<vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id" :position="pointOnSurface(feature.geometry)" positioning="center-center">

and i got

So it seems that the positioning property is not taken in account !
I'm surely doing something wrong (and/or not understanding the role of the position attribute) but i can't figure out what ...

[ghettovoice]

Ok, I got it.
In the demo there is additional css styles applied to the overlay container that prevents positioning from property. And also there is a bug in the vl-overlay styles, it always have position: abosulte.

According to the demo code, try to comment out this styles https://github.com/ghettovoice/vuelayers-demo/blob/master/src/App.vue#L761
And add this rules to workaround style bug:

.vl-overlay
    position: relative !important

[felixdenoix]

Allright everything is working fine now ! Thanks a lot for the plugin :)