leaflet map in Wordpress - popups wont work

Question

i am trying to integrate a map into my wordpress site using following code. To be more specific i am using this code inside a "html block" of the Block Editor.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
<script src="https://www.akzisemauer-berlin.de/map/js/leaflet.ajax.min.js"></script>

<div id="map" style="width:100%; height: 400px; ">
        </div>
<script>
var map = L.map('map', {
            zoomControl:true, maxZoom:18, minZoom:1
        }).setView([52.513660,13.417072], 12);


L.tileLayer('http://a.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
minZoom: 1,
maxZoom: 28,
}).addTo(map);


//Akzisemauer-wand

function akziseWallStyle(feature) {
    return {
        color: wall_color(feature.properties.bezirk),
        weight: 3,
    };
}
function wall_color(bezirk) {
    if(bezirk === "Friedrichshain-Kreuzberg") return "#e5b813"; else
    return "#666666";
}
var akzise_wall = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_wall.geojson",{
         style:akziseWallStyle});       
akzise_wall.addTo(map);

//Akzisemauer-Tore

// markerpopup function
function markerpopup(feature, layer) {
    if (feature.properties && feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}
var akziseGateFHXBStyle = {
    radius: 8,
    fillColor: "#e5b813",
    color: "#000",
    weight: 0.3,
    opacity: 1,
    fillOpacity: 0.8
}

var akzise_gates_FHXB = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_gates_FHXB.geojson", {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, akziseGateFHXBStyle)
    }}, {
    onEachFeature: markerpopup
    });    

akzise_gates_FHXB.addTo(map);

var akziseGatePBMIStyle = {
    radius: 8,
    fillColor: "#666666",
    color: "#000",
    weight: 0.3,
    opacity: 1,
    fillOpacity: 0.8
}

var akzise_gates_PBMI = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_gates_PBMI.geojson", {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, akziseGatePBMIStyle)
    }}, {
    onEachFeature: markerpopup
    });       
akzise_gates_PBMI.addTo(map);



testmarker = new L.CircleMarker([ 52.513660,13.417072], { radius: 10, color: 'green', }).bindPopup(String("DOES THIS WORK??")).addTo(map);

// Bezirksgrenzen
var bezirkStyle = {
        "color": "#717171",
        "weight": 0,
        "fillOpacity": 0.4
    };
var bezirksgrenzen = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/bezirksgrenzen_simp.geojson",{
         style:bezirkStyle});       
bezirksgrenzen.addTo(map);


setInterval(function () {
   map.invalidateSize();
}, 100);
</script>

(i use the invalidatesize function to fix a bug where maptiles would not load properly, check here)

I am using the point_to_layer function to style the points (akzisemauer_gates) which works fine but i cannot get the popups to work - neither the two akzise_gates_* features nor the testmarker.

what i tried:

when i skip the styling of the point features and go back to the standard marker the popups work as intended.
when i try out the same code in jsfiddle the popups work (it fails to load my geojson`s, probably for unrelated reasons, but the testmarker works), so i assume the problem is wordpress related

somebody maybe has experience with leaflet behaviour inside wordpress?

The Feature in your GeoJSON data does not have a `"name"` property, but a `"Gemeinde_name"` one. — ghybs, Oct 21 '20 at 02:43

a.urbanite · Accepted Answer · 2020-10-21T22:01:55.443

okay i figured it out. i made two mistakes

first one was i did not consider that layer can overlap each other. my "bezirke" layer, a polygon, was overlapping all markers. so when i clicked on what i thought was the marker i was actually clicking on the "bezirke" layer which didnt show a popup because this layer had no popup configured. interestingly this also applied to areas of the map that were empty in the polygon layer.

second i made a syntax mistake when using the L.GeoJson.Ajax function: i put the pointToLayer and onEachFeature subfunctions(dont know how its called) each in {} brackets, which is wrong, they are together in one {} bracket and inside only seperated by a comma

here is the working script:

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js" integrity="sha512-Abr21JO2YqcJ03XGZRPuZSWKBhJpUAR6+2wH5zBeO4wAw4oksr8PRdF+BKIRsxvCdq+Mv4670rZ+dLnIyabbGw==" crossorigin="anonymous"></script>

<div id="map" style="width:100%; height: 400px; ">
        </div>
<script>
//initialize map
var map = L.map('map', {
            zoomControl:true, maxZoom:18, minZoom:1
        }).setView([52.513660,13.417072], 12);

//add basemap
L.tileLayer('http://a.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
minZoom: 1,
maxZoom: 28,
}).addTo(map);

// Bezirksgrenzen
var bezirkStyle = {
"color": "#717171",
"weight": 0,
"fillOpacity": 0.4
};
var bezirksgrenzen = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/bezirksgrenzen_simp.geojson",{interactive: false, 
style:bezirkStyle});
bezirksgrenzen.addTo(map);
bezirksgrenzen.bringToBack();


//Akzisemauer-wand
function akziseWallStyle(feature) {
    return {
        color: wall_color(feature.properties.bezirk),
        weight: 3,
    };
}
function wall_color(bezirk) {
    if(bezirk === "Friedrichshain-Kreuzberg") return "#e5b813"; else
    return "#666666";
}
var akzise_wall = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_wall.geojson",{interactive: false,
         style:akziseWallStyle});       
akzise_wall.addTo(map);

//gates
function markerpopup(feature, layer) {
        layer.bindPopup(feature.properties.name)
}

function gates_style(feature) {
  return {
    radius: 8,
    fillColor: fill_color(feature.properties.bezirk),
    color: "#000",
    weight: 0.3,
    opacity: 1,
    fillOpacity: 0.8
  }
}

function fill_color(bezirk) {
  if (bezirk === "Friedrichshain-Kreuzberg") return "#e5b813";
  else return "#666666";
}

var akzise_gates = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/gates.geojson", {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, gates_style(feature))
}, 
onEachFeature: markerpopup
});
akzise_gates.addTo(map);

//bugfix
setInterval(function () {
   map.invalidateSize();
}, 100);
</script>

leaflet map in Wordpress - popups wont work

1 Answers1