0

I want to add my json files to leaflet using leaflet-ajax plugin. But it always says following error:

Uncaught TypeError: L.GeoJSON.AJAX is not a constructor

Why this error is showing in my code? Any solution?? My index.html file is here:

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<!-- Leaflet CSS/js -->
<link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="gis"></div>
    <div>
        <h2>Select Zipped shapefiles</h2>
        <input type="file" name="shapefiles" id="file">
        <input type="submit" name="submit" id="submit"><span id="warning"></span>
    </div>
    <script type="text/javascript" src="lib/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="lib/leaflet/leaflet-shapefile.js"></script>
    <script type="text/javascript" src="lib/leaflet/shp.js"></script>
    <script type="text/javascript" src="lib/leaflet/leaflet.ajax.js"></script>
</body>
</html>

And my main.js file:

/* ====================
 Adding  Multiple tile layers
==================== */
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
    thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; ' + osmLink + ' Contributors',
    landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
    thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;

var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
    landMap = L.tileLayer(landUrl, {attribution: thunAttrib});

var map = L.map('gis', {
    layers:[osmMap]}).setView([28.2539, 83.9764], 17);

var baseLayers = {
    "OSM Mapnik": osmMap,
    "Landscape": landMap
    };

// L.control.layers(baseLayers).addTo(map);

/* =============================================================================
                Overlaying Information Interactively on Map
============================================================================== */
var coolPlaces = new L.LayerGroup();

        L.marker([28.2539, 83.9764])
        .bindPopup('Te Papa').addTo(coolPlaces),
        L.marker([-41.29437, 174.78405])
        .bindPopup('Embassy Theatre').addTo(coolPlaces),
        L.marker([-41.2895, 174.77803])
        .bindPopup('Michael Fowler Centre').addTo(coolPlaces),
        L.marker([-41.28313, 174.77736])
        .bindPopup('Leuven Belgin Beer Cafe').addTo(coolPlaces),

        L.polyline([
        [28.2539, 83.9764],
        [-41.2895, 174.77803],
        [-41.29042, 174.78219],
        [-41.29437, 174.78405]
        ]
        ).addTo(coolPlaces);

        var overlays = {
        "Interesting places": coolPlaces
        };
L.control.layers(baseLayers,overlays).addTo(map);



/* =============================================================================
                            Add Required Geojson Files
============================================================================== */
var geojsonLayer = new L.GeoJSON.AJAX("data/geojson/roadNetwork.json");       
geojsonLayer.addTo(map);



/* =============================================================================
                            Add Shapefile Option
============================================================================== */
document.getElementById("submit").onclick = function(e){
    var files = document.getElementById('file').files;
    if (files.length == 0) {
      return; //do nothing if no file given yet
  }

  var file = files[0];

  if (file.name.slice(-3) != 'zip'){ //Demo only tested for .zip. All others, return.
        document.getElementById('warning').innerHTML = 'Select .zip file';      
    return;
  } else {
    document.getElementById('warning').innerHTML = ''; //clear warning message.
    handleZipFile(file);
  }
};

//More info: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
function handleZipFile(file){
    var reader = new FileReader();
  reader.onload = function(){
      if (reader.readyState != 2 || reader.error){
          return;
      } else {
          convertToLayer(reader.result);
    }
  }
  reader.readAsArrayBuffer(file);
}

function convertToLayer(buffer){
    shp(buffer).then(function(geojson){ //More info: https://github.com/calvinmetcalf/shapefile-js
    var layer = L.shapefile(geojson).addTo(map);//More info: https://github.com/calvinmetcalf/leaflet.shapefile
    console.log(layer);
  });
}
2

You're loading main.js before lib/leaflet/leaflet.ajax.js.

Ensure that Leaflet and all plugins you use are loaded before your own code. Pay attention to the order of your <script> tags.

  • Oh I realize it. Thank you !! – Tekson Mar 25 at 10:41
  • 2
    You might want to mark the answer as accepted instead of upvoting, BTW. – IvanSanchez Mar 25 at 13:03
  • It was not him who upvoted it :-) – TomazicM Mar 25 at 13:18
  • Whoops, I saw OP was a new user and I made the wrong assumption O:-) – IvanSanchez Mar 25 at 13:23
  • Sorry i am new on stack-overflow. I am learning how to use it. – Tekson Mar 25 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.