[GIS] Local GeoJSON Access Mapbox GL JS / Online GeoJSON Updating

geojsonmapboxmapbox-gl-js

I've seen a lot of similar questions floating around but they have not really addressed what I am looking for.

I am a novice at web development.

I'm attempting to change my project so that my geoJSON data is no longer stored within the html and is rather accessed through a separate file. It worked absolutely fine when the var stores = {etc, etc}, but now that I've pointed it out externally it is no longer working. Here is the code that I am using:

var stores = 'MasterDirectory_QC_V10.geojson';        

map.on('load', function (e) {
 map.addSource('places', {
type: 'geojson',
data: 'stores' 

 });

I've tried a lot of solutions and none of them have work. I noticed it was kicking out a cross origins request error, so I ran it in an instance of chrome with the security settings off. This did not help. I am aware switching to using jquery to get the geojsons would work well, but I think my code is a bit complex at this point for that – theres a lot going on outside of this snippet that might interfere with that. I've also noticed when I try to move the css to a different sheet instead of the section, that does not work either.

My eventual goal is to be able to host my geoJSON somewhere such that users of my system can submit new data to the geoJSON and update it – such that the map/directly will be dynamically updated as this happens. I do not necessarily know what the most direct way of doing this beyond putting it up on AWS.

jsbin: https://gist.github.com/cormundo/b7703bb55b8a74d19caa0ebf75c856cf

Best Answer

It's a bit hard to tell what problem you actually want solved but:

  • 'stores' should be stores
  • Yes, you will need to serve the data from a host that is CORS-enabled, or that is the same host. (The same is true regardless of method.)
  • Using jQuery.getJSON() to load the file is a sensible approach. It's not clear why you think this is so complex.
  • Other places to host data include Github Pages and Dropbox.
Related Question