Search code examples
javascriptmapboxgeojson

Getting "Cross origin request error" when using 'LoadURL()' from Mapbox.js

I got this code from this article: http://lyzidiamond.com/posts/external-geojson-mapbox/

code:

var filterLayer = L.mapbox.featureLayer()
.loadURL('data.geojson')
.addTo(map);

I'm trying to follow this Mapbox.js example that creates filters for placemarkers: https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-marker-clusters/

When I copy the entire example, I don't see any placemarkers at all, like the example in the link above. So I decided to load my own geoJson file.

Therefore I used the code I typed here earlier to load my own geoJson file. But I get this error when I inspect element:

XMLHttpRequest cannot load
file:///C:/Users/username/Documents/website/data.geojson. 
Cross origin requests are only supported for protocol schemes: http, data,    
chrome, chrome-extension, https, chrome-extension-resource.
Solution

  • You have to serve your data.geojson from local HTTP server instead of using file:// protocol.

    For example you can use WAMP server and copy contents of spike321.github.io directory to WAMP public html path.

    Then you can open localhost/spike321.github.io and everything should work.