1

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;">');

                }
            }

        }
    })
}; ```
BMesc
  • 33
  • 4

0 Answers0