Uncaught TypeError: Cannot call method 'getElementsByTagName' of null

StackOverflow https://stackoverflow.com/questions/21604477

  •  07-10-2022
  •  | 
  •  

Question

I have spent so much time trying to fix this bug. I really don't know what the issue is.

http://pastebin.com/wXEHsqeY is where the code is. The error points to leaflet library kml.js but I have not touched this file. The error seems to be coming from lines 366-390 as when I remove them there is no error.

I would really appreciate any help anyone can offer.

Thanks

Update: apologies for using the wrong format, please see a more basic example of what Im stuck on.

<body>
    <div style="width:100%; height:100%" id="map"></div>

<?php
function getKmlFiles() {

    $folder = 'kml/';
    $filetype = '*.*';
    $files = glob($folder.$filetype);

    for ($i=0; $i<count($files); $i++) {

        echo '"' . $files[$i].'",';
    }

}
?>

<script>

var kmlArray = [<?php getKmlFiles(); ?>];

console.log(kmlArray);

var map = new L.Map('map', {center: new L.LatLng(58.4, 43.0), zoom: 11});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var track = new L.KML("http://localhost/kmllayer/kml.kml", {async: true});
track.on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });

map.addLayer(track);
map.addLayer(osm);

    var object ={'THW-UK2 (R)':track};
for (var i=0; i<kmlArray.length; i++) {

    var kmlLayer = new L.KML("http://localhost/kmllayer/" + kmlArray[i] , {async: true});
    object[kmlArray[i]] = kmlLayer;
    map.addLayer(kmlLayer);

kmlLayer.on("loaded", function(e) { 
            map.fitBounds(e.target.getBounds());
         });

         map.addLayer(kmlLayer);

}
console.log(object);

map.addControl(new L.Control.Layers({}, object, {})); 


</script>




<script type='text/javascript'>

map.on( "zoomend", function( e ) {
    console.log( "zoom level is " + map.getZoom() )
});

map.on( "zoomend", function( e ) {
    zoom = map.getZoom( );
    if ( zoom <= 3 ) {
        alert('zoomed out');
    }
});

</script>
Was it helpful?

Solution 2

For anyone who encountered a similar problem, the cause was the kml files were saved as .kmz files but weren't actually zipped. Issue solved now.

OTHER TIPS

you are opening php in your js file at line 366

var kmlArray = [<?php getKmlFiles(); ?>];

if you want to use the values of php in js file make a variable global and call it in your js file.

<script>
abc = "<?php getKmlFiles(); ?>";
</script>

in your js files

var kmlArray = abc;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top