Feature Selected but Popup didn't show up

[lordsalomon]

Hi dear,

I've been trying to implement the ol-ext popup feature into my openlayers test map but I have faced a problem with it. The layer are loaded correctly, even the selection interaction is occurring but the popup don't show up once I select a feature (a country in my example).

The dataset are from the Natural Earth project and Geoserver initial data. I also downloaded the ol-ext.css/ol-ext.js files and linked them to the html. Thanks

Here is that part of the js code :
// GeoJSON layer
var vectorSource = new ol.source.Vector({
url: "asset/ne_110m_admin_0_countries.geojson",
format: new ol.format.GeoJSON(),
});

map.addLayer(
new ol.layer.Vector({
name: "Countries",
source: vectorSource,
})
);

// Select interaction
var select = new ol.interaction.Select({
hitTolerance: 5,
multi: true,
condition: ol.events.condition.singleClick,
});
map.addInteraction(select);

// Select control
var popup = new ol.Overlay.PopupFeature({
popupClass: "default anim",
select: select,
/** /
template: function(f) {
return {
title: function(f) { return f.get('nom')+' ('+f.get('id')+')' },
attributes: {
region: { title: 'Région' },
arrond: 'arrond',
cantons: 'cantons',
communes: 'communes',
pop: 'pop'
}
}
},
//
template: {
title:
// 'nom', // only display the name
function (f) {
return f.get("nom") + " (" + f.get("id") + ")";
},
// [ 'region', 'arrond', 'cantons', 'communes', 'pop' ]
attributes: {
NAME: { title: "NAME" },
TYPE: { title: "TYPE" },
REGION_UN: { title: "CONTINENT" },
//communes: { title: "Communes" },
// with prefix and suffix
// pop: {
// title: "Population", // attribute's title
// before: "", // something to add before
// format: ol.Overlay.PopupFeature.localString(), // format as local string
// after: " hab.", // something to add after
// },
// calculated attribute
// pop2: {
// title: "Population (kHab.)", // attribute's title
// format: function (val, f) {
// return (
// Math.round(parseInt(f.get("pop")) / 100).toLocaleString() +
// " kHab."
// );
// },
// },
/* Using localString with a date * /
'date': {
title: 'Date',
format: ol.Overlay.PopupFeature.localString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
}
//
},
},
});
map.addOverlay(popup);

[Viglino]

It seems working for me: https://codepen.io/viglino/pen/ZEroWMN

[lordsalomon]

Thanks Dear, finally it was a conflict between your ol-ext popup and Walkermatt popup one. Finally resolved by commenting the walkermatt attach.
Also, if we have many vectors layers with differents attributes and names, how should we proceed ? i've found that in the attributes we should put the other layer's attributes names which we want to popup on click. but for the name of that new popup, should we implement in the function (f) an else clause giving the name and id of each layer ? Thanks again for this nice extension.

[lordsalomon]

Hi @Viglino , i managed to show elements for the popup. Thanks to your help. But i am stuck with your search feature control. the search bar show up, i can enter the name of countries (Defined 'property' for search) but once i give a country name, it's not selected or zoomed in. Below is the part of the js code relative to it :
// SEARCH BAR - Viglino

// Control Select
var select2 = new ol.interaction.Select({ zoom: 7 });
map.addInteraction(select2);

// Set the control grid reference
var search = new ol.control.SearchFeature({
//target: $(".options").get(0),
source: countries.getSource(),
property: "NAME_LONG",
});
map.addControl(search);

// Select feature when click on the reference index
search.on("select2", function (e) {
select.getFeatures().clear();
select.getFeatures().push(e.search);
var p = e.search.getGeometry().getFirstCoordinate();
map.getView().animate({ zoom: 6 });
});

and my html so far :

<!-- Production: Openlayers css  -->
<link rel="stylesheet" href="./libs/v6.14.1-dist/ol.css" />
<!-- <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" /> -->

<!-- ol-layerswitcher css -->
<link rel="stylesheet" href="./libs/layerswitcher/ol-layerswitcher.css" />

<!-- FontAwesome -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

<!-- ol-ext Viglino -->
<link rel="stylesheet" href="./libs/popup/ol-ext.css" />
<!-- <link
  rel="stylesheet"
  href="https://viglino.github.io/ol-ext/dist/ol-ext.css"
/> -->

<!-- Jquery for Search Bar - Viglino  -->
<script
  type="text/javascript"
  src="https://code.jquery.com/jquery-1.11.0.min.js"
></script>

<!-- Ol geocoder nominatim extension  -->
<link
  href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>

<title>Julio OpenLayers</title>

<!-- Production: Openlayers js, responsible of the body map  -->
<script type="text/javascript" src="./libs/v6.14.1-dist/ol.js"></script>
<!-- <script
  type="text/javascript"
  src="https://openlayers.org/en/latest/build/ol.js"
></script> -->

<!-- ol-layerswitcher js -->
<script src="./libs/layerswitcher/ol-layerswitcher.js"></script>

<!-- ol-popup walkermatt js/css -->
<!-- <script src="./libs/popup/ol-popup.js"></script> -->
<!-- <link rel="stylesheet" href="./libs/popup/ol-popup.css" /> -->

<!-- ol-popup Viglino js -->
<script src="./libs/popup/ol-ext.js"></script>
<!-- <script src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script> -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

<!-- Production: perso index page js  / must be puted after the map div-->
<script src="./javascript/main.js"></script>

Thanks again

[Viglino]

Your interaction is select2 not select and the event is select not select2:

// Select feature when click on the reference index
search.on("select", function (e) {
  select2.getFeatures().clear();
  select2.getFeatures().push(e.search);
  var p = e.search.getGeometry().getFirstCoordinate();
  map.getView().animate({ zoom: 6 });
});

When select event on search control add search feature to the select2 interaction....