Forums

Hosting KML files and static folder problems

Hello. I'm trying to host KML files with PA service. I have html file with script.

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 49.61, lng: 32.19} // Adjust as necessary
        });

        var ctaLayer = new google.maps.KmlLayer({
            url: 'https://asvirid.name/kml/Crops_2023.kml',
            map: map,
            preserveViewport: false, // Adjust the viewport to the KML layer
            suppressInfoWindows: false // Allows default info windows on click
        });

        ctaLayer.addListener('status_changed', function() {
            console.log('KML Layer status:', ctaLayer.getStatus());
        });
    }
</script>

And this worked for me for like 4 or 5 years, but now I get an error

KML Layer status: FETCH_ERROR

When I host my KML file on google drive or any another server it works fine. But some how script cant access to my static folder anymore. Is here any solution how can it and find problem?

Very weird thing with this KML files... I've done nothing but everything works fine now.

That's strange! Glad to hear it's working now, anyway.

Have this problem again. Can you guys test it? Here is my path to kml file - https://www.asvirid.name/kml/test.kml on PA and path to kml file on github - https://raw.githubusercontent.com/DavisMerrit/maps/main/test.kml This code does not work (my kml polygon does not show up on the map):

<!DOCTYPE html>
<html>
<head>
    <title>KML hosting on PA test</title>
    <style>
        #map {
            height: 1000px; 
            width: 100%; 
        }
    </style>
</head>
<body>
    <h3>My Google Maps Demo with KML</h3>
    <div id="map"></div>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 9,
                center: {lat: 49.61, lng: 32.19}
            });
            var kmlLayer = new google.maps.KmlLayer({
                url: 'https://www.asvirid.name/kml/test.kml', 
                map: map
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-qrMGzhs2YMwvImY6_Rl0yALWfcY4Apk&callback=initMap">
    </script>
</body>
</html>

But when I change link to github - everything is fine...This is due to changes in the PA service itself. Because before everything worked just fine.

Could you provide a link to a page that has the HTML above on your site? I just used curl to download the URL that you provided, and it all looks fine; in particular, the Content-Type header was application/vnd.google-earth.kml+xml, which is (I believe) what it should be.

Working one - https://www.asvirid.name/_cropmap2024 KML is hosted on github

Not working one - https://www.asvirid.name/_cropmap_test KML is hosted on PA site/static/kml/ (https://www.asvirid.name/kml/Crops_2024.kml)

It looks like there are a bunch of /vt?... PNG images that are being requested on the working one and are not being requested on the broken one and it looks like those PNGs are the shapes that overlay the map. You'll have to check the code and config on PythonAnywhere to see why those are not being requested.

To be clear - the issue is not that the map is requesting the files from PythonAnywhere and that they're not being served. The issue is that the map is not making the requests to PythonAnywhere for the files.

How can I check it and what config files should I look?

It would be in whatever files define the map that you are showing.

But there is only 1 file - kml file. And when it hosted on PA it does not work, but when it hosted in another place it does work. In previous link examples i've used more files. But it does not matter. The problem is in PA. Can you just copy this HTML file and host on your PA site?

<!DOCTYPE html>
<html>
<head>
    <title>KML hosting on PA test</title>
    <style>
        #map {
            height: 1000px; 
            width: 100%; 
        }
    </style>
</head>
<body>
    <h3>My Google Maps Demo with KML</h3>
    <div id="map"></div>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 9,
                center: {lat: 49.61, lng: 32.19}
            });
            var kmlLayer = new google.maps.KmlLayer({
                url: 'https://www.asvirid.name/kml/test.kml', 
                map: map
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-qrMGzhs2YMwvImY6_Rl0yALWfcY4Apk&callback=initMap">
    </script>
</body>
</html>

You can download my kml file and host it in your own static folder https://www.asvirid.name/kml/test.kml But when you try to go to this HTML page the polygon (kml file) will not load.

If you look at the requests that are made from the page on PythonAnywhere and compare it to the requests that are made when it's not on PythonAnywhere, you will see that there are no requests for the polygon files. They are not failing, they are not being blocked, they are just not being made. So there is some difference between how the KML is handled that is preventing those requests from being made and that is not really something we can help with. If those requests were being made and failed for some reason, that would be something we could help with.

Somehow it works now...Have you guys fixed something?

No, there have been no changes to the system recently.