Develop Reference

show popups correctly with external hyperlinks in openlayers 4

I have an openlayers map that loads a couple of kml files containing about 120 polygon placemarks each. As they're too many to show a popup for each, I had to create an outside-map menu, so the user can click on any one of these features and see it's info / location.
I use this function to create the outside-map menu, containing all the features:
vEnergeticos.getSource().on('change', function(evt){
var source = evt.target;
if (source.getState() === 'ready') {
var energeticos = source.getFeatures();
for (var i in energeticos) {
var figura = energeticos[i].getGeometry().getExtent();
var myCenter = ol.extent.getCenter(figura);
$("#containerLeft").append("<a href=javascript:showMenuPopup(" + myCenter + "," + energeticos[i].get('ID') + ")>" + energeticos[i].get('name') + "</a><br>");
}
}
});
and then when the user clicks on any of these options, this function is called:
function showMenuPopup(xx, yy, theID){
var myPixel = map.getPixelFromCoordinate([xx, yy]);
var elNombre = "";
var laDescripcion = "";
map.forEachFeatureAtPixel(myPixel, function(feature, layer) {
if (feature.get('ID') == theID){
elNombre = feature.get('name');
laDescripcion = feature.get('description');
}
});
popupTitle.innerHTML = elNombre;
popupContent.innerHTML = laDescripcion;
overlay.setPosition([xx,yy]);
}
This works in some situations, however, when the selected feature is outside of the current map view, the map relocates successfully (overlay.setPosition([xx,yy]);), the popup is shown, but the popup is empty. If the feature is visible when the user clicks from the left menu, then the popup is shown correctly.
Just to be clear enough, imagine you're seeing a map where you can see part of Europe, and then you click on some item located in Canada (using the off-map menu), you'll see the map relocates in Canada, but the popup that is shown is empty. If you click again on that very same off-map link, or any other feature that is visible at that location/zoom view, then the popup is shown correctly.
I tried to use the "moveend (ol.MapEvent)" in order to fix this, so the popup was loaded after the map is relocated, but it didn't work for me. The moveend event is called before the map starts to move using overlay.setPosition([xx,yy]), and I haven't been able to find some other "after-relocation" event that I could use.
I've been struggling with this for many days now, so any help will be really appreciated.
Regards!!

The problem is that the features outside of the current map view are not "AtPixel", so you won't catch them with map.forEachFeatureAtPixel.
I suggest you to avoid passing coordinates to showMenuPopup: you just need the feature id, than you can retrieve the feature's coordinates inside showMenuPopup.
$("#containerLeft").append("<a href=javascript:showMenuPopup('" + energeticos[i].getId() + "')>" + energeticos[i].get('name') + "</a><br>");
Then
function showMenuPopup(featureId){
var feature = vEnergeticos.getSource().getFeatureById(featureId);
var elNombre = feature.get('name');
var laDescripcion = feature.get('description');
var figura = feature.getGeometry().getExtent();
var myCenter = ol.extent.getCenter(figura);
popupTitle.innerHTML = elNombre;
popupContent.innerHTML = laDescripcion;
overlay.setPosition(myCenter);
}

Javascript: Dynamically generated functions, referring to an external included JS File with GPT rendering

Thanks for looking at this. I think I am making a conceptional mistake in my thoughts, that's why I will let you know about my scenario first:
I have 1 or x DIVs where I display DFP AdUnits and will use these dynamically generated functions on. The function triggers as soon as the DIV is in a visible area:
I generate the links dynamically
function scriptincluder(divid){
var gbgscript = document.createElement('script');
gbgscript.async = true;
gbgscript.type = 'text/javascript';
gbgscript.src = 'https://anyscript.net/script.js?function=myfmydiv1&div=mydiv1 ';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gbgscript, node);
}
With this function I dynamically create the link and this works so far. So I generate links for myfmydiv1/div1, myfmydiv2/div2, myfmydiv3/div3… so on. And add them to the parentNode.
I generate the AdSlots dynamically
googletag.cmd.push(function() {
for (var slot in divslots) {
window['slot_'.concat(slot.toString())] = googletag.defineSlot('/Adslot/Adslot/Adslot/Adslot/Adslot/Adslot', slotsize[slot], slot.toString()).addService(googletag.pubads());
// generate external link pixel from #1:
scriptincluder(slot.toString());
}
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad(); // ad unit will not render yet
googletag.enableServices();
});
In this part I generate the Ad Units and add it to a global variable "window['slot_'.concat(slot.toString())]" (<== I have seen this on the web and I am curious if that's the right way to go. At least I can see it in the GCR dev. tool)
I generate the functions referring to the link at #1 dynamically.
for (var slot in divslots) {
var [‘myf’ + escape(slot)] = function() {
alert("I am: " + slot);
googletag.cmd.push(function() {
googletag.pubads().refresh([window['slot_'.concat(key2.toString())]]);});
}
}
The function is triggered once the DIV slot is in a visible area and refreshes the Ad Unit.
It always triggers the wrong function. For example, div1 triggers function of div2 and div1 doesn’t actually load, but div2. Any ideas/help?

I figured out the solution with an experienced programmer colleague of mine.
He suggested to use the cont variable for the variable function in the last piece of code.
for (var slot in divslots) {
const myFunction = 'myf' + escape(slot);
const mySlot = 'slot_'.concat(slot.toString());
var [myFunction] = function() {
alert("I am: " + slot);
googletag.cmd.push(function() {
googletag.pubads().refresh([window[mySlot]]);});
}
}

Javascript not updating img

I'm using Cesium and trying to have a button that changes the image whenever pressed. Cesium runs on javascript but whenever the variable changes that contains the name of the image file, the image does not change.
var iName = "HeatMap"; var count=1;
name=iName.concat(count.toString());
var viewer = new Cesium.CesiumWidget('cesiumContainer');
var layers = viewer.scene.imageryLayers;
//Cesium Active Window
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name.concat('.png')),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
opacity:.3
}));
function buttonPressCount()
{
name='HeatMap';
count=count+1;
name = name.concat(count.toString());
document.getElementById('counter').innerHTML = name;
}
the document.getElementById is just for debugging purposes so I know that the name actually changed.

It seems to me you should call something like
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name.concat('.png')),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
opacity:.3}));
in function buttonPressCount.

get name of files in a folder with javascript

I have a background image folder that there is some picture that i want to use them for background.
how i can get their names and put them on array whit javascript?if i cant they do with javascript,how can i do that?
i want to read name of files and use javacsript and link for change background image whit css.
<script>
function nextbg(){
$('#bg').css('background-image','url(Images/bg2.jpg)');
}
</script>

This solution is created according to the fact that browser dont have access to folders/filesystem.
Javascript can not access the filesystem. This has to be done by a server script and then be feed to the javascript.
I had the simliar problem when building my game engine when I was loading all my diffrent tiles. I ended up doing it like this.
This solution do pose two a problems when implementing it.
You will have to define the amout of images in the "NrofTiles" array
The images must be named like tile1, tile2 ... tile9 so you can
increment the path to them.
The typeOfTiles[typeCounter] is just there to give me access to different folders, in my case for my tiles, grass, houses, water and so on.
for(var i = 0; i <= nrofTiles.length; i++)
{
for(var x = 0; x <= nrofTiles[i]; x++)
{
console.log
("Fetching tile "+(x + 1 )+" of " + 14);
img = new Image();
//My path
img.src = 'Images/Cart/' + typeOfTiles[typeCounter] + '/' + (x + 1) + '.png';
imgArray.push(img);
var intervalFunctionen = function () {
alert("calls back here");
};
}//end for loop!
}end outer for loop!
When everything is loaded(the tiles), you do this to change the background picture.
This is an example of a changing body background. You could make a link with an ID lets say "iamthelink".
HTML
Change BG
JAVASCRIPT
var link = document.getElementsById('iamthelink');
link.onclick= function() {
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';
}

OpenLayers Markers with custom Text / Label

I have "N" markers on an Openlayers map and I need to "label" these markers (Meaning: Put a text in/on them)
I have tried several ways but still couldn't achieve what I need.
My JS code snippet (Removed some irrevelant stuff from the code):
function getWeatherInfo(){
if(wheatherOfCitiesMarkerLayer == null){
wheatherOfCitiesMarkerLayer = new OpenLayers.Layer.Markers("WeatherMarkerLayer");
map.addLayer(wheatherOfCitiesMarkerLayer);
}
$.getJSON(qryPointResultListForAllCities(), function(data) {
if(data!= null){
var size = new OpenLayers.Size(60,45);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
for(var i = 0; i < data.pr.length; i ++){
// Create markers by using the returned data from the server
//...
//... Removed some irrevelant stuff
var lat = data.pr[i].la;
var lon = data.pr[i].lo;
var infos = data.pr[i].info.infos;
var infop = data.pr[i].info.infop;
var infocc = data.pr[i].info.infocc;
var icon = new OpenLayers.Icon('my_marker_img.png',size,offset);
location = new OpenLayers.LonLat(lon, lat);
location = transformFromWGS1984ToSphericalMercator(location.clone());
marker = new OpenLayers.Marker(location,icon.clone());
wheatherOfCitiesMarkerLayer.addMarker(marker);
}
}
}
}
What I need to do is put a label or text in/on each marker on the map.

Since you are taking marker data from server anyway, what you can do is, create a layer in a map file with just the label class defined and add it on your marker layer as a overlay.
Hope this helps.

Instead of adding text (or label) to a marker, you can add a marker to a label.
This is done by creating a new text file with the location, title, description and path to your icon (not required, it will use the default if none is set). For example,
if you want to place two markers on the map, the text file may look like this
point title description icon
10,99 An labeled marker with default image
12,34 Another marker This is my label text http://example.com/marker.png
Please note that there should be tabs between the names and parameters, not spaces. There is also a tab at the end of the second line where no icon is given.
Save this file somewhere on your site and put this code where your layers are being initialized.
var textl = new OpenLayers.Layer.Text("text", {location : "data_dile.txt"});
map.addLayer(textl);
The text file may be created dynamically though server-side languages, such as PHP.
There is an online example here.