Folium maps not displayed with Safari in Iphones

Pablo24680 commented 7 months ago

I have created a map with Folium in Python. Chrome opens the map correctly. But Safari just shows the page in blank and the map is not displayed. The problem persists after removing markers and other elements with pop ups.

I sent the html file via email and via whatsapp to lot of Iphone users.

I am not an expert in html neither CSS or JavaScript.

This is the most simple version of the script in Python:

z = folium.Map() z.save("Map with nothing.html")

This is the html file created:

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>

    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_c1ca8abfae87cf05439dfa4dfd5b4c96 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
                .leaflet-container { font-size: 1rem; }
            </style>

</head>
<body>

            <div class="folium-map" id="map_c1ca8abfae87cf05439dfa4dfd5b4c96" ></div>

</body>
<script> 

            var map_c1ca8abfae87cf05439dfa4dfd5b4c96 = L.map(
                "map_c1ca8abfae87cf05439dfa4dfd5b4c96",
                {
                    center: [0.0, 0.0],
                    crs: L.CRS.EPSG3857,
                    zoom: 1,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );

            var tile_layer_2223daa336910949acb89349d7b8a0c8 = L.tileLayer(
                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            );

            tile_layer_2223daa336910949acb89349d7b8a0c8.addTo(map_c1ca8abfae87cf05439dfa4dfd5b4c96);

</script>
</html>

Conengmo commented 6 months ago

How do you even open an html file on iOS? I can't seem to do it, even when I try to open it from an attachment in the mail app.

Conengmo commented 2 months ago

I'll close this issue since we need more info to find out what's going on. If more info comes up, we can reopen it.

python-visualization / folium

Folium maps not displayed with Safari in Iphones #1930