3

I have a pretty map with a cool event that trigger a map.onclick event like that :

function onMapClick(e) {
    L.popup()
        .setLatLng(e.latlng)
        .setContent('<link rel="import" href="./pages/myPopup.html">')
        .openOn(mymap);
    }
mymap.on('click', onMapClick);

And i'm trying to import html text in my leaflet popup. I'm using bootstrap+JQuery and I already saw bootstrap3-dialog but I think there is something to try with HTML5 or with jquery, but I don't know how !

I also found some explanations for having a click link inside leaflet popup that help for the start ! (JSFiddle here)

Community
  • 1
  • 1
FloCAD
  • 67
  • 1
  • 9
  • How exactly do you want your "html text" to appear? should it be a new page, an insert in the Leaflet popup, a link that user should click to be redirected to that page?.. – ghybs Mar 29 '17 at 13:02
  • oh inserted in the leaflet popup ! – FloCAD Mar 29 '17 at 13:47

1 Answers1

2

You sound to be looking for a simple <iframe> (instead of your strange <link> tag which is for the page <head>) embedded in a Leaflet popup.

<iframe src="./myPopup.html"></iframe>

This is extremely simple and does not present any particular issue. Do not forget to set height and width on your iframe.

Demo: https://plnkr.co/edit/m94za7fHpGakqouMmwO2?p=preview

ghybs
  • 34,277
  • 5
  • 51
  • 73
  • arf ! It wasn't the best solution in my point of view but all the others solutions ([detailled there](https://www.html5rocks.com/en/tutorials/webcomponents/imports/) ) didn't worked for me so I wanna do this ... Thank you for your answer ! =) – FloCAD Mar 29 '17 at 15:22
  • for some reason, this is embedding my whole app inside the popup, even if I am pointing towards a static html file – Louis Feb 13 '18 at 15:20
  • @Louis please open a new question with specific details of your issue if you have a different problem. – ghybs Feb 13 '18 at 16:19