[GIS] Modal for hyperlink in Leaflet app

geojsonhyperlinkjavascriptleafletmodal

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);
     };


  }

Best Answer

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>
Related Question