folium Folium maps not displayed with Safari in Iphones

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/[email protected]/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Apr 15 '24 14:04 Pablo24680

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.

May 06 '24 15:05 Conengmo

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.

Sep 10 '24 08:09 Conengmo