How to open a popup

[slaetthult]

How can I open a Popup-box, when I click on a marker?

[ghettovoice]

Hello @slaetthult , take a look at this demo https://jsfiddle.net/ghettovoice/yh9zxskf/.

What you need:

1. vl-layer-vector/vl-source-vector - vector source and layer to load and show vector features.
2. vl-interaction-select - provides vector feature selection
3. vl-overlay - any html container bound to some coordinate.

So in the simplest case you only need to bind vl-overlay to select features from vl-interaction-select, like it is done in the demo above.

[fernanduandrade]

i'm new and learning about the lib, I tried it and it didnt work with polygon

[ghettovoice]

No prob 👌 What type of the layer do you use? Show me your component source

[fernanduandrade]

I made it work, the problem was because of the position binding, since it's a polygon i had to pass as "coordinates[0][0]" and now i have another problem because i work with polygons and multipolygons so i can't let the position set, it maybe be "coordinates[0][0]" and other times "coordinates[0][0][0]"

[ghettovoice]

I made it work ok.

You should know feature geometry type in the select feature handler. With geojson-encoded feature: featureGeoJSON.geometry.type. With openlayers ol/Feature: feature.getGeometry().getType().

UPD: and finally, when you have GeoJSON geometry, you can use something like http://turfjs.org/docs/#pointOnFeature to find a point inside polygon.

[fernanduandrade]

thanks!! that helps a lot

[iboates]

@ghettovoice How can I get the information from the GeoJSON feature in the popup? All I can get is the feature in the context of VueLayers, I need the properties of the feature as it appears in the source GeoJSON

[ghettovoice]

@iboates take a look here, it is updated demo https://jsfiddle.net/ghettovoice/yh9zxskf/31/

[iboates]

@ghettovoice Ok I realize now that what I have to do is to open a dialog box with the feature's GeoJSON properties, not a popup in the map. Is the <vl-interaction-select> really the best way to go about this?

I can make a dialog with a boolean v-model variable, but the way you have it in the fiddle, you use a template slot, so how can I get it to activate the v-dialog?

If I bind a @select listener to the <vl-interaction-select> then it still only gives me the feature on the map, not the GeoJSON feature.

[ghettovoice]

vl-interaction-select just implements select/unselect vector feature function. It can also synchronize selected features through the features prop: :features.sync="selectedFeatures". Or you can listen select, unselect events on it to trigger something for each feature. So using of it's slot is not required.

[iboates]

@ghettovoice thanks, that clears it up