[GIS] Unable to get Mapbox leaflet-omnivore to load markers from .csv

Question

I'm using the Mapbox.js API to build a really simple web map using a .csv file to place markers with tooltips. I'm trying to use the suggested leaflet-omnivore library to easily parse the csv and place the markers. Using this example guide I have been unable to get omnivore to place any markers at all. I've also noticed that just importing the library adds considerable load time to the map with the script:

<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.0.1/leaflet-omnivore.min.js'></script>

Here is (some) of the .csv I'm trying to place:

Name,latitude,longitude,Sport,Contact,Website,Location
Oregon Avenue Octopi,39.915048,-75.170185,Softball,,www.octopisoftball.org,"Marconi Plaza Philadelphia PA 19148"
West Philly Waste,39.943065,-75.215689,Softball,,,"Kingsessing Rec Center Philadelphia PA 19143"
Pittsburgh Pounders,40.466298,-79.961581,Baseball,,,"Arsenal Park Pittsburgh PA 15201"

I've tried variations on the snippets:

omnivore.csv('/data/teams.csv').addTo(map);

and

omnivore.csv('/data/teams.csv', latfield:'lat', lonfield:'lng', delimiter:',').addTo(map);

My csv is in a proper location and should be able to be read. The obvious question is whether this is a problem with my code or with omnivore.

I have had success inputting the markers individually but would much rather use a csv for easy adding and editing by multiple people. I'm also open to suggestions outside of omnivore if anyone has any.

Thanks!

Answer 1

Here's the working snippet I've used, and everything works ok:

omnivore.csv('teams.csv').addTo(map);

However, you don't need to rush into changing the code, because, in your case, any change goes wrong as long as you load your file using the file protocol:

instead of loading the file from a web server, using the http protocol:

In my case, I use the XAMPP solution stack package, that installs everything I need to host web pages.

Therefore, I've created a folder in the htdocs folder, and I've putted the html and the csv files inside:

Running on a web server, you'll see that leaflet-omnivore.min.js is loading very quick, under 100 ms!