I am building a game map for a friend and have run into an interesting way to do their popup content. Basically the popups are going to have history over each section so I decided that displaying it in a scrollable sidebar would be the better option. I installed the leaflet plugin Sidebar-V2 and have it running. I also am using a geoJSON variable to dynamically grab multiple parameters of the popup content. So far I’ll have title, type, image and content.
Here is my javascript code:
//Add GeoJSON
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Test",
"group": "majorcity",
"image": "test.png",
"popupcontent": "<p>Hello world!</p>"
},
"geometry": {
"coordinates": [
1741.5,
1000.5
],
"type": "Point"
},
"id": 0
},
{
"type": "Feature",
"properties": {
"name": "Test2",
"group": "village",
"image": "test.png",
"popupcontent": "<p>different popup!</p>"
},
"geometry": {
"coordinates": [
1800,
1200
],
"type": "Point"
},
"id": 1
}
]
}
]
};
//Create dynamic popups from GeoJSON
L.geoJSON(geojson).bindPopup(function(layer) {
return '<h3>' + layer.feature.properties.name + '</h3>'
+ '<p>' + layer.feature.properties.popupcontent + '</p>';
}).addTo(map);
var image = L.imageOverlay('images/volucris_map_BASE.png', bounds).addTo(map);
//Trigger console on click
var marker = L.marker([1800, 1000],{title: "Title" } ).addTo(map);
marker.bindPopup("This is popup content");
marker.on('click', onClick);
function onClick(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
console.log(content);
postToSidebar(content);
}
function postToSidebar(content) {
document.getElementById('sidebar-popup-content').innerHTML = content;
sidebar.open('home');
}```
So what I do have working is when I add a manual popup with the L.marker I successfully have posted the single property to the content box and opened the sidebar on click. This works great, however I need a way to get this to work with the dynamic geoJSON markers along with multiple parameters. What could I use to pass from the popup bind to the onClick/postToSidebar?
I also tried using a click event from leaflet documentation but they don't have a marker specific one from what I'm searching. I've searched over some of the similar stackoverflow topics as well for this same topic but nothing seems to use the stack I am using. Most are able to achieve this with React but I am limited to doing this in raw html/js due to where it will be placed in the future.