Linking A URL Link To Folium Marker Without Iframe

Hello all.

I am trying to link a URL link with a marker for each location in folium. I have successfully reached this point, but I do not want the web page of that URL link to be show as an iframe.

The following is my map with markers:

When I click on “Paris” for instance, the following is what I am seeing:

The following is a section views.py file where the folium markers are being added to the map:

    for i in range(0, len(data)):
        folium.Marker(
            location=[data.iloc[i]['latitude'], data.iloc[i]['longitude']],
            popup=f"<a href=http://127.0.0.1:8000>{ data.iloc[i]['name'] }</a>",
        ).add_to(mapObject)

    mapObject = mapObject._repr_html_()

    content = {
        'mapObject': mapObject,
        'mapForm': mapForm,
    }

    return render(request, 'map_app/DisplayCities.html', content)

The following is the “DisplayCities.html” template which is what the DisplayCities view is rendering:

{% load crispy_forms_tags %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" 
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" 
          crossorigin="anonymous">

    <title>Map Home Page</title>
  </head>
  <body>
    <!--Navigation Bar-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Geographical World Map</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'display-map' %}">Global Map 
                <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0" method="POST">
            <!--The csrf_token is added for security.-->
            {% csrf_token %}  
            {{ mapForm|crispy }}
            <button class="btn btn-outline-success my-2 my-sm-0 mx-4" type="submit">Search</button>
          </form>
        </div>
      </nav>

    <div class="container">
        <div class="row mt-4">
            <div class="col-md-10 offset-md-1">
                {{ mapObject|safe }}
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" 
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" 
            crossorigin="anonymous"></script>
  </body>
</html>

I would appreciate any advice on how I click on the title of each folium marker and have them redirect the user to a new web page without an iframe. Thank you.

I have not tested this so I may be wrong. However, the anchor element has an attribute target that is dedicated to controlling how the browser opens the link. I believe you want to use the _top value since that will control the top most window which in this case is the window containing the iframe.

On a tag that generates the link that you want to redirect the current browser page/tab, use the attribute target="_top"

Since you’re working with a third party library (folium), I would assume that it is responsible for handling the click event on the marker.

My guess would be you need to find out how it handles those events, and either configure it to not do that, or patch it such that it does.

(A brief glance at the documentation appears to me to indicate that the Marker object is linked to the Popup object, which opens the defined url as a popup. I would think then that you could subclass Popup to create the desired behavior, and initialize the Marker class with your version of Popup.)

I want to thank both of you for your help. I was able to open the URL in another web page without the iframe.

I have a question about making an image full screen meaning full height and width using CSS.

To make the image cover the entire web page, I set width to 100% and set height to “auto” because I wanted to preserve the aspect ratio of the image.

The issue is now the screen has a scroll bar as the following shows:

Regarding this same web page, I don’t quite understand why the bullet point “Plaza De Mayo” is showing up in its own colour and not the colour white as I set it to this colour inside the following:

a:link {
    color: white;
    text-decoration: none;
    font-family: Courier, monospace;
}

a:visited {
    text-decoration: none;
}

a:hover {
    color: lightskyblue;
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

The following is the bullet point “Plaza De Mayo” at the bottom. I have created it with a hyper link:
mayo