Giters

python-visualization / folium

Python Data. Leaflet.js Maps.

Home Page:https://python-visualization.github.io/folium/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Folium maps not displayed with Safari in Iphones

Pablo24680 opened this issue · comments

commented

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>
commented

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.