17

I created a popup with Leaflet doing so:

marker.bindPopup(content).openPopup();

How can I update the content value afterwards?

I suppose to do it from the marker, something like this:

marker.updatePopup(newContent);

6 Answers 6

22

_popup has an underscore in front of it to indicate that it's a private / member instance, and should not be accessed directly. The correct API is Layer.setPopupContent(). e.g.

marker.setPopupContent(newContent);
1
14

I suppose you want the content to be changed after some event occured, like mouseover, contextmenu, or anything else.

To do so, you can use the following code:

//marker creation
var marker = L.marker([44.63, 22.65]).bindPopup('something').addTo(map);
marker.openPopup();

//changing the content on mouseover
marker.on('mouseover', function(){
    marker._popup.setContent('something else')
});

As you can see, you can acccess the popup for the desired marker using marker._popup method, and then use setContent method to change the text inside it.

popup.setContent method reference

Here's some code on Plunker demonstrating this: http://plnkr.co/edit/vjS495QPXiJpKalrNpvo?p=preview

1
  • 1
    I found that in the mouseover I needed to do: this.getPopup.setContent(' blah blah blah');
    – TheSteve0
    Aug 30, 2016 at 16:05
5

Might be to late to reply, but for others, I think the best ways is here

http://jsfiddle.net/cPTQF/

$('button').click(function() {
   // Update the contents of the popup
   $(popup._contentNode).html('The new content is much longer so the popup should update how it looks.');

   // Calling _updateLayout to the popup resizes to the new content
   popup._updateLayout();

   // Calling _updatePosition so the popup is centered.
   popup._updatePosition();
   return false;
});
1
  • I know this is old, but it came up in my Google search results so that means it might for others as well...The issue with this method is that #1 if the popup is not currently open, that button click (or whatever you bind to) does nothing. Secondly, if you dimiss the popup and click it again, you get the original content, not the new content!
    – D.R.
    Jul 20, 2017 at 3:10
2

You can get the popup content with:

marker.getPopup().getContent();

Set the content it with:

marker.getPopup().setContent("123");
marker.getPopup().update();
0

marker5.bindPopup(html).openPopup();

                var html = `
                    <div class="popup-box">
                    <div class="title">`+title+`</div>
                    <div class="popup-data">
                        <div class="popup-title">长度: `+(totalDistance).toFixed(2)+` 千米</div>
                    </div>
                    <div class="popup-data">
                        <div class="popup-title">名称: </div>
                        <input id="linename" class="popup-data-input" value="`+ response.rows[i].name  + `" />
                    </div>
                    <div class="popup-data">
                        <div class="popup-title">管辖派出所: </div>
                        <select id="aioConceptName" class="popup-data-input" id="select">
                          <option value="管辖派出所601" selected>`+response.rows[i].mark + `</option>
                          <option value="管辖派出所602">管辖派出所602</option>
                          <option value="管辖派出所603">管辖派出所603</option>
                          <option value="管辖派出所604">管辖派出所604</option>
                        <select/>
                    </div>
                    <div class="popup-button">
                        <button class="del" onclick="polylineDelete(`+ myPolyLine.id +`)">删除</button>
                        <button class="confirm" onclick="polylineEdit(`+ myPolyLine.id + `,'`+ myPolyLine.name + `','`+ myPolyLine.mark + `'` +`)">保存</button>
                    </div>
                    </div>
                `;

function polylineEdit(id,names,mark) {
    // alert(id + name + mark)
    // name = '111图形955800';
    // alert($('#mark').val())
    var conceptName = $('#aioConceptName').val();
    // alert(conceptName)
    //地图划线保存+渲染
    var name = $('#linename').val();
    // var mark = $('#mark').val();
    console.log("地图划线修改+渲染");
    // var _list = [ [30.28990324883237,123.43688964843751],[29.54717721331581,123.26934814453126],[29.475470141887214,122.55523681640626],[30.0381887651539,122.50030517578126]];

    /*var myPolyLine = new polyLine();
    /!*myPolyLine.name = "图形51300";
    myPolyLine.type = "1";
    myPolyLine.latlng = _list;dashArray
    myPolyLine.mark = "300";*!/
    myPolyLine.name = name;
    myPolyLine.type = type;
    myPolyLine.latlng = latlng;
    myPolyLine.mark = marks;*/
    // console.log(JSON.stringify(myPolyLine));
    $.operate.save("popup/poly_line/edit",{id:id,name:name,type:2,mark:conceptName},console.log("修改成功"));
}
function polylineDelete(id) {
    $.operate.save("popup/poly_line/edit",{id:id,markone:'del'},console.log("删除成功"));
}

this my dynamic editor content.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jun 8, 2022 at 14:19
0

I found that if you use a unique tag for the marker you can dynamically change the title information. If however, like I did you use just "marker" for the tag, then the title will not change if you update it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.