2

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!

4

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:

enter image description here

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

enter image description here

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:

enter image description here

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

enter image description here

  • Thanks for the answer. It's going to be a bit before I can try this out on my own server, but it seems like it should be exactly what I'm looking for! – Wes Feb 20 '14 at 19:43
3

I was having the same issue than you, and then realize that it was a problem on the data. In order to log those errors on the console, you have to put:

omnivore.csv('your_file.csv', null, L.mapbox.featureLayer()).addTo(map)
  .on('error', function(error) {
    console.log(error);
});

And it will tell you which line is not working, such as an invalid lat or long. Hope this helps!

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.