Проблема с всплывающим текстом фолио для перекрывающихся координат (обновление: HTML исходный код) - PullRequest
Новая
       106

Проблема с всплывающим текстом фолио для перекрывающихся координат (обновление: HTML исходный код)

3 голосов
/ 29 мая 2020

Я пытаюсь использовать CircleMarker из фолио для отображения точек на основе фрейма данных. Проблема возникает с всплывающей частью маркера. Я получаю неправильные всплывающие окна для перекрывающихся координат. Есть ли способ исправить это? Как вы можете видеть на фотографии, независимо от того, в каком кружке я нажимаю, я получаю всплывающее окно с тем же значением, тогда как ожидаемое всплывающее окно должно изменяться в зависимости от «имени». Я чувствую, что всплывающее окно каким-то образом перезаписывается. Код, который я использую, если ниже: 

def color_producer(perc):
    if perc < 5:
        return 'red'
    elif 5 <= perc < 20:
        return 'orange'
    elif 20 <= perc < 40:
        return 'yellow'
    else:
        return 'green'


map = folium.Map(location=[100,0], zoom_start=2)

 for lat,lon,name,perc in zip(df['lat'],df['long'],df['ix_name'],df['perc']):


        (folium.CircleMarker(location=[lat, lon],
                            radius = perc,
                            popup= name,
                            fill=True, # Set fill to True
                            fill_color=color_producer(perc),
                            color = color_producer(perc))).add_to(map)

overlapping amrker popup

Я просмотрел сгенерированный исходный код html. Он хорошо смотрится со всеми разными именами для всплывающих окон. Вставка ниже для ref: 

 var circle_marker_7491df9ab173464ab69203523757c828 = L.circleMarker(
                [19.03681, 73.01582],
                {"bubblingMouseEvents": true, "color": "green", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "green", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 53.086419753086425, "stroke": true, "weight": 3}
            ).addTo(map_1ab3aa4a1c4748dcacb78d6a21b647be);


            circle_marker_7491df9ab173464ab69203523757c828.bindTooltip(
                `<div>
                     53.086419753086425
                 </div>`,
                {"sticky": true}
            );


        var popup_4123819b7b89443ba50eac288bcf3d3f = L.popup({"maxWidth": "100%"});


            var html_a0d12ff985d64ac0ac836d6a37a75452 = $(`<div id="html_a0d12ff985d64ac0ac836d6a37a75452" style="width: 100.0%; height: 100.0%;">DE-CIX Mumbai</div>`)[0];
            popup_4123819b7b89443ba50eac288bcf3d3f.setContent(html_a0d12ff985d64ac0ac836d6a37a75452);


        circle_marker_7491df9ab173464ab69203523757c828.bindPopup(popup_4123819b7b89443ba50eac288bcf3d3f)
        ;

var circle_marker_437f3afc648a4fd6983cde142a6b24c4 = L.circleMarker(
                [19.03681, 73.01582],
                {"bubblingMouseEvents": true, "color": "gray", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "gray", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 39.50617283950617, "stroke": true, "weight": 3}
            ).addTo(map_1ab3aa4a1c4748dcacb78d6a21b647be);


            circle_marker_437f3afc648a4fd6983cde142a6b24c4.bindTooltip(
                `<div>
                     39.50617283950617
                 </div>`,
                {"sticky": true}
            );


        var popup_150a69ba701b4e46ba5fdb45699302d7 = L.popup({"maxWidth": "100%"});


            var html_8feba716a60e41c1adfeef7becb0af51 = $(`<div id="html_8feba716a60e41c1adfeef7becb0af51" style="width: 100.0%; height: 100.0%;">Extreme IX Mumbai</div>`)[0];
            popup_150a69ba701b4e46ba5fdb45699302d7.setContent(html_8feba716a60e41c1adfeef7becb0af51);


        circle_marker_437f3afc648a4fd6983cde142a6b24c4.bindPopup(popup_150a69ba701b4e46ba5fdb45699302d7)
        ;

var circle_marker_68ff85d3457b43d3b493952dcc6d092c = L.circleMarker(
                [19.03681, 73.01582],
                {"bubblingMouseEvents": true, "color": "gray", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "gray", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 32.098765432098766, "stroke": true, "weight": 3}
            ).addTo(map_1ab3aa4a1c4748dcacb78d6a21b647be);


            circle_marker_68ff85d3457b43d3b493952dcc6d092c.bindTooltip(
                `<div>
                     32.098765432098766
                 </div>`,
                {"sticky": true}
            );


        var popup_cd2406fa5fa94ea98aab5bef6679cba3 = L.popup({"maxWidth": "100%"});


            var html_944ab6bbac7b4cc7bdd2e5fb0d8c8c53 = $(`<div id="html_944ab6bbac7b4cc7bdd2e5fb0d8c8c53" style="width: 100.0%; height: 100.0%;">NIXI Mumbai</div>`)[0];
            popup_cd2406fa5fa94ea98aab5bef6679cba3.setContent(html_944ab6bbac7b4cc7bdd2e5fb0d8c8c53);


        circle_marker_68ff85d3457b43d3b493952dcc6d092c.bindPopup(popup_cd2406fa5fa94ea98aab5bef6679cba3)
        ;

Я не очень хорош с html. Может быть, всплывающие окна не отображаются из-за того, что они находятся на одной и той же широте и длине?

...