OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Leaflet post popup properties to sidebar

  • Thread starter Thread starter ConnectedToast
  • Start date Start date
C

ConnectedToast

Guest
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:

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.
<p>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.</p>
<p>Here is my javascript code:</p>
<pre><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.
</code></pre>
Continue reading...
 

Latest posts

Top