I've an HTML with a list of data's :
<select id="searchinput" align="top" maxlength="120" name="zl_choix">(...)
And the button search with this code:
<input type='button' value='Search !' id='searchbutton' onclick='search()'>
And my Javascript function, take the value of the data list and search on the map this value for make a zoom and display popup :
function search()
{
// ZOOM ///////////////////////////////
var search_value = document.getElementById('searchinput').value;
var layers = map.getLayers();
var view = map.getView();
var length = layers.getLength();
for (var i = 0; i<length; i++) {
if (layers.item(i).q['name'] == 'Layer 1') {
obj = layers.a[i].q['source'].i;
var cpt_ligne = 0
for (prop in obj){
cpt_ligne++;
nb_ligne = Object.keys(obj).length;
if (cpt_ligne == 1) {
var debut = prop;
};
if (cpt_ligne == nb_ligne) {
var fin = prop;
};
}
for (var j = debut; j<fin; j++) {
var test_undefined = layers.a[i].q['source'].g[j];
if (test_undefined != undefined) {
if (layers.a[i].q['source'].g[j].q['num'] === search_value) {
destination_center = layers.a[i].q['source'].g[j].q['geometry'].j;
var resolution = view.getResolution();
var duration = 2500;
var start = +new Date();
var zoom = ol.animation.zoom({
resolution: resolution
});
map.beforeRender(zoom);
view.setCenter(destination_center);
view.setZoom(15);
// POPUP ///////////////////////////////
if (popup_test == 1) {
map.removeOverlay(popup);
popup = new ol.Overlay.Popup;
popup.setOffset([0, 10]);
map.addOverlay(popup);
} else {
popup = new ol.Overlay.Popup;
popup.setOffset([0, 10]);
map.addOverlay(popup);
};
map.addOverlay(popup);
popup_test = 1;
var recup_layer = map.forEachLayerAtPixel(
map.getPixelFromCoordinate(destination_center),
function(ft, layer){return ft;}
);
var recup_prop = map.forEachFeatureAtPixel(
map.getPixelFromCoordinate(destination_center),
function(ft, layer){return ft;}
);
if (recup_layer && recup_layer.get('name') == 'Layer 1') {
var geometry = recup_prop.getGeometry();
var coord = geometry.getCoordinates();
var content = ("<div id='tad_close_popup' )'></div><div id='tad_text_popup'><p>Arrêt "+ recup_prop.get('data') + "</p></div>");
popup.show(coord, content);
}
/////////////////////////////////////////////////////////
break;
}
}
}
}
}
}
The problem is my variable recup_prop doesn't recover the value if the point destination_center didn't on my screen when I click on the button Search !.
For example, if I've two near points and I see them on my screen and I search the first point and the second point, no problem, if I do alert (recup_prop)
I've an object.
But if I've a third point what I don't see alert (recup_prop)
varaible recup_prop is undefined.