The following html code creates several markers and popups for them. ... is just a replacement for long things which I've ommitted as they don't have significance in solving my problem. As there are 100s of these markers, creating all the popups in one go results in a very long web load time.
Is there a way to somehow add the popups to the markers only when the marker is clicked on? The code below has already been generated, so I can't rebuild it from scratch using a new logic.
var m1 = L.marker(...).addTo(map);
var p1 = L.popup(...);
var v1 = $('<div id="v1"></div>')[0];
p1.setContent(v1);
m1.bindPopup(p1);
vegaEmbed(v1, ...)
var m2 = L.marker(...).addTo(map);
var p2 = L.popup(...);
var v2 = $('<div id="v2"></div>')[0];
p2.setContent(v2);
m2.bindPopup(p2);
vegaEmbed(v2, ...)
var m3 = L.marker(...).addTo(map);
var p3 = L.popup(...);
var v3 = $('<div id="v3"></div>')[0];
p3.setContent(v3);
m3.bindPopup(p3);
vegaEmbed(v3, ...)
.
.
.
and so on
Attempt at Falke Design's Proposed Solution:
So far I have the following Python code:
m = folium.Map(...)
fg = folium.FeatureGroup()
for i in range(0,400):
p = folium.Popup().add_child(folium.VegaLite(...))
folium.Marker(...popup = p).add_to(fg)
fg.add_to(m)
m.save('templates/index.html')
Which generates the below html:
var fg = L.featureGroup({}).addTo(m);
var m1 = L.marker(...).addTo(fg);
var p1 = L.popup(...);
var v1 = $('<div id="v1"></div>')[0];
p1.setContent(v1);
m1.bindPopup(p1);
vegaEmbed(v1, ...)
.
.
.
and so on up to 400
Yes there is a way. You can add to each marker a click event and then add the popup.
var fg = L.featureGroup().addTo(map);
var m1 = L.marker([51.505, -0.09]).addTo(fg);
var v1 = '<div id="v1">v1</div>';
m1.popcontent = v1; //custom property to safe the html to the marker
var m2 = L.marker([51.505, -0.094]).addTo(fg);
var v2 = '<div id="v2">v2</div>';
m2.popcontent = v2;
var m3 = L.marker([51.505, -0.096]).addTo(fg);
var v3 = '<div id="v3">v3</div>';
m3.popcontent = v3;
fg.on('click',function(e){
var layer = e.layer;
layer.bindPopup(layer.popcontent).openPopup();
});
If your html is updated in vegaEmbed you have to save the html id to the marker and then read it out.
var m1 = L.marker([51.505, -0.09]).addTo(fg);
var v1 = 'v1';
m1.popcontent = v1; //custom property to safe the id to the marker
fg.on('click',function(e){
var layer = e.layer;
layer.bindPopup($("#"+layer.popcontent).html()).openPopup(); // or document.getElementById(layer.popcontent).innerHTML;
});