3

I have a simple Leaflet app that maps some custom points (bars, restaurants, etc...).

enter image description here

Currently, when the user clicks on on of the marker icons, a popup appears that displays a hyperlink of the location's name (ex: Slim's bar). If the user clicks on the hyperlink name, it takes them to the website (ex: www.slimsraleigh.com). The problem is that, in doing so, it takes the user out of the app and to a completely new page. What I'd like to have happen is that the page still comes up, but inside of a modal that the use can X out of once they are finished and want to view another locations website; basically, they remain in the app. How would you suggest I do this? I see there is a Leaflet Modal that can be loaded via NPM (I am using Node JS, so that should be easy), but the logistics of linking the modal to a click event of the hyperlink is where I am stuck. Below is the code where .Name and .Link (2 properties of my geoJson data) are utilized to make the hyperlink in the popup. Can anyone suggest a way I can accomplish my goal if getting the hyperlink tied to the modal?

L.geoJson(dtr_points, {
onEachFeature: function (feature, layer) {
    layer.bindPopup("<a href=" + feature.properties.Link + ">" + feature.properties.Name + "</a>");

     if(feature.properties.Type == "beer") {
        layer.setIcon(beer);
     };
     if(feature.properties.Type == "bar") {
        layer.setIcon(bar);
     };
     if(feature.properties.Type == "restaurant") {
        layer.setIcon(restaurant);
     };
     if(feature.properties.Type == "music") {
        layer.setIcon(music);
     };
     if(feature.properties.Type == "culture") {
        layer.setIcon(culture);
     };
     if(feature.properties.Type == "cafe") {
        layer.setIcon(cafe);
     };
     if(feature.properties.Type == "occult shop") {
        layer.setIcon(occult);
     };


  } 
2

I think that's a bad idea. You don't want to display another website inside a popup, it'll be a poor user experience.

What you could do is open the link in a new tab.

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> 
  • I tried this several times without success. The website would popup, but not in a new tab. And it would always have an issue. I noticed that the url at the top would also say http://www.<site name>.com/target='_blank'. I tried multiple syntax iterations of the following, but nothing worked: layer.bindPopup("<a href=" + feature.properties.Link + " target='_blank'>" + feature.properties.Name + "</a>"); Not sure why this isn't working, because it should. – gwydion93 Mar 21 '17 at 17:13
  • YOu better ask another question. Your issue, though, is that you're not escaping your " properly. Try making the string in a var first var link_url = "<a href='" + feature.properties.Link + "' target='_blank'>" + feature.properties.Name + "</a>" and then console.log(link_url) to check what you are using. – Alex Leith Mar 21 '17 at 22:24
  • After retesting this solutions, I got it working. Again, there seemed to be some syntax issue related to the " "s. A separate window now pops up. However, I am not so sure about this solution for mobile devices. The app is designed to provide an easy to use guide of downtown hotspots for visitors to a convention. Using a modal may make more sense when the app is launched from a mobile device, whereas it would look clunky on a laptop. – gwydion93 Mar 27 '17 at 18:22
2

I think you'll want some more markup to identify those links in leaflet popups:

layer.bindPopup('<a class="weblink" href='...

Then, if you are using jQuery, you can register clicks on those links with:

$('div.leaflet-popup a.weblink').on('click', function(e) {
    var href = $(this).attr('href');
    var html = '<iframe src="' + href + '"></iframe>';
    e.preventDefault(); // so we don't open the link directly

    // then use the leaflet-modal plugin you mentioned in the question
    map.fire('modal', {
        content: html, // HTML string 
    });
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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