0

I created a web map in Leaflet using QGIS and the QGIS2Web Plugin. I want to be able to copy and paste this file onto a tablet, and also keep this file on the local network drive for my coworkers to access. I noticed that QGIS allows me to save a file as GeoJSON and the only difference between that and the JS files in the data folder is the extra code var variable =at the beginning of the latter.

I tried saving the GeoJSON into the data folder and loading it using an AJAX request and while it worked fine in Firefox as well as Internet Explorer 11 when I went to the F12 Developer Tools and put it in IE10 mode, it didn't load in IE11. The F12 developer tools told me that there were extra commas, but after deleting those it told me it didn't support the measure and search tools (which is weird as they work fine in the original html file), and then after I commented those out it would crash and give me a "this file stopped loading due to a long-running script" message.

Ultimately all I want to do is save myself the extra steps of saving my GeoJson file, opening it in Notepad, adding var variable = to the beginning of the code, and saving it as a JS file. Is there any way that I can do this without using an AJAX request, as this doesn't seem to work in Internet Explorer 11? I feel like this should be an easy thing to do.

  • are you using leaflet.ajax? – neogeomat May 21 '18 at 13:55
  • I wasn't. I had tried that briefly but it didn't seem to work. I could try that again. – Ryan Norton May 21 '18 at 14:38
  • Is IE10/11 a must? IE has been difficult to work with. – neogeomat May 21 '18 at 14:40
  • Unfortunately, IE11 is. Everyone has that installed on their computer. – Ryan Norton May 21 '18 at 15:05
  • Okay, so I added '<script src="raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/…>' to the head and changed 'var layer_CurbStop7 = new L.geoJSON(json_CurbStop7' to 'var layer_CurbStop7 = new L.geoJSON(".data/CurbStop7.geojson"' but I get an error message saying that it does not support this function. – Ryan Norton May 21 '18 at 15:51
1

IE has problems with GeoJSON file containing characters like à or â etc.... Replacing those characters in the GeoJSON with normal characters (like a) does the trick.

1

As @neogeomat says, use leaflet-ajax. Include the script as you have tried:

<script src="https://raw.githubusercontent.com/calvinmetcalf/leaflet-ajax/gh-pages/dist/leaflet.ajax.min.js"></script>

Or use your own downloaded local copy (I don't think it's encouraged to link to Github raw directly). Then create your layer:

var layer_CurbStop7 = new L.GeoJSON.AJAX("data/CurbStop7.geojson");
  • I tried that, and I get the "L.GeoJSON is not a constructor" error message. I saved the leaflet.ajax.min.js file to the js folder. – Ryan Norton May 22 '18 at 12:10
  • Did you put the script which loads leaflet-ajax after the script which loads Leaflet? – Tom Chadwin May 22 '18 at 12:18
  • Yes, I did, and I still get that message. – Ryan Norton May 22 '18 at 12:25
  • My only other suggestion is to change the code to var layer_CurbStop7 = L.geoJson.ajax("data/CurbStop7.geojson");. If that doesn't work, you'll have to investigate issues with browser dev tools such as whether everything is loading correctly. – Tom Chadwin May 22 '18 at 13:09
  • Other issues: seems you cannot include scripts from raw.githubusercontent.com any more (at least on Chrome). Another issue you might have is that leaflet-ajax only opens GeoJSONs over HTTP(S), not file:// - see github.com/calvinmetcalf/leaflet-ajax/issues/…. – Tom Chadwin May 22 '18 at 14:04

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.