I am trying to display a image for each place loaded in the map, but returns undefined 404 (Not Found).
I am using leaflet, easybutton and markcluster to display data(json) from opentripmap. The data obtained is displayed on the screen using geoJson, pointToLayer and onEachFeature.
opentripmap json contains a ID, unsing this ID I get another json file from wikidata to get the img name.
and finally with this img name I am trying to upload the image using this structure below in a funtion: https://upload.wikimedia.org/wikipedia/commons/${a}/${ab}/${imageName}.
note: If I set a fixed link to only one img, instead of use a function to return a link for each point, it works...
let geojsonLayer;
function getPOI() {
$.ajax({
url: "libs/php/getPOI.php",
type: 'POST',
dataType: 'json',
data: {
lat_max: maxLat,
lon_max: maxLng,
lat_min: minLat,
lon_min: minLng,
},
success: function (result) {
//Clear old layers------------------
if (geojsonLayer) {
geojsonLayer.clearLayers();
}
//Cluster---------------------------
var markers = L.markerClusterGroup({
iconCreateFunction: function (cluster) {
return L.divIcon({
html: '<b style="background-color:#63acaa;color:white;text-align:center;font-size:1.2em;padding:1em;shape-outside:circle();clip-path:circle();">' + cluster.getChildCount() + '</b>',
className: 'dummy'
});
}
});
//data obtained from opentripmap----
var data = result.POI;
//Icon on mymap------------------
var myIconNature = L.icon({
iconSize: [27, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: './image/leaf.svg'
});
geojsonLayer = markers.addLayer(L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, { icon: myIconNature });
},
onEachFeature: onEachFeature
})).addTo(mymap);
mymap.addLayer(markers);
//onclick function markers---------
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.name) {
function getImage(value) {
$.ajax({
url: "libs/php/getImage.php",
type: 'POST',
dataType: 'json',
data: {
id: value,
},
success: function (result) {
const imageName = result.image.split(' ').join('_');
const MD5 = md5(imageName);
const a = MD5.slice(0, 1);
const ab = a + (MD5.slice(1, 2))
const iLink = `https://upload.wikimedia.org/wikipedia/commons/${a}/${ab}/${imageName}`;
console.log(iLink)
return iLink;
}
})
};
var popupContent;
for (var i = 0; i < 1; i += 1) {
popupContent = document.createElement("img");
popupContent.onload = function () {
layer.openPopup();
};
popupContent.src = getImage(feature.properties.wikidata);
layer.bindPopup(popupContent, {
maxWidth: "auto"
});
}
layer.openPopup();
//layer.bindPopup('<img src="' + getImage(feature.properties.wikidata) + '" style="width:100px;height:100px;">');
}
}
}
})
}; ```