Leaflet – Uncaught TypeError: L.GeoJSON.AJAX Is Not a Constructor

geojsonhtmljsonleaflet

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);
  });
}

Best Answer

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.

Related Question