Why is the same Popup text is displayed for both Markers OSM 5OpenLayers
I am displaying two Marker dynamically on OSM 5. The data saved to the array is (longiutde, latitude, car name) The Marker are being correctly displayed with a Popup window for each one. The Popup windows should contain the name of each car, but the problem here is that i am ALWAYS getting the second name of the car displayed on both Popups which is wrong. I am really stucked i have tried everything i knew.
<code>
/* open street map newest version */
var map = new ol.Map({
target: 'map', // the div id
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([4.35247, 52.520008]),
zoom: 6,
minZoom: 3
})
});
for(var i=0; i < arrayPos.length; i++) {
var long = arrayPos[i][0]
var lat = arrayPos[i][1];
var vehName = arrayPos[i][2];
// add a marker to the map
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
})]
})
});
layer.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png', //
scale: 0.4 // set the size of the vehicle on the map
})
}));
map.addLayer(layer);
//initialize the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
console.log(vehName); // two different car names are shown in the console
//display the pop with on mouse over event
map.on('pointermove', function (event) {
if (map.hasFeatureAtPixel(event.pixel) === true) {
var coordinate = event.coordinate;
//simple text written in the popup, values are just of the second index
content.innerHTML = '<b>Im a vehicle: </b><br>'+vehName; //just the second one is getting displayed
overlay.setPosition(coordinate);
}
else {
overlay.setPosition(undefined);
}
});
}
</code>
Any help is really appreciated!!
