Skip to main content
3 of 3
Additional explanation.
TomazicM
  • 27k
  • 24
  • 31
  • 42

Most probably geoJSON layer does not show because data is not loaded yet when you add layer to the map. Try with this code:

var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle});
geojson.on('data:loaded', function() {
  mymap.addLayer(this);
});

As PVar wrote, also make sure that geoJSON file named StratfordBoundary actually exists on home directory of your project on server.

EDIT1: If you run your code locally on file system, then you must add local: true option to ajax call:

var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle, local: true});

EDIT2: The way you refer to leaflet.ajax.min.js in the last incarnation of your question:

<script src="Z:\Leaflet\leaflet.ajax.min.js"><script>

will never work because of security reasons. Put your Leaflet directory in the same directory where you have your project file and refer to it:

<script src="Leaflet/leaflet.ajax.min.js"><script>

The second problem is calling your project in browser from file system, not from server. Here you will have CORS (cross-origin) security problems. It also depends on the settings of the browser, but I managed to display map and geojson successefully from file system in Firefox, but not in Chrome or IE11. Crome reports the following error in console:

leaflet.ajax.js:373 Access to XMLHttpRequest at 'file:///C:/inetpub/wwwroot/LeafletExamples/geoJSON/StratfordBoundary.geojson'
from origin 'null' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
TomazicM
  • 27k
  • 24
  • 31
  • 42