Considering I have a folder that contains multiple .gpx tracks, my objective is to show each of them in a single leaflet map. Then I would personalize thing like tooltips of each track, the color for each track, etc.

I already searched and found these libraries:



But they only let me load one track. Is there a way to load an entire folder?

If leaflet does not allow it, is there another option?


So I have the tracks folder on my backend/server side, so to read them at the frontend I need some way to get the data.

My backend runs using Flask, and I got an endpoint to list all the files:

class GPS_Tracks(Resource):
  def get(self):
      files =[]
      for f in os.listdir(files_directory):
        if f.endswith(".gpx"):
      return files

It returns something like this:

    "2016-01-15 17-43-20.gpx", 
    "2016-01-15 18-34-15.gpx", 
    "2016-01-16 21-36-19.gpx", 
    "2016-01-16 21-48-17.gpx", 
    "2016-01-16 22-58-56.gpx",

So my frontend does a request to that endpoint and gets the names of the files. But I need to still access the files.

  • 1
    What makes you think these plugins let you load only one track? You can call them as many times as you wish.
    – ghybs
    Jul 8, 2016 at 17:16
  • @ghybs how do I do that? Jul 23, 2016 at 14:15

1 Answer 1


EDIT 2 following rev 3 of the question

There is nothing wrong in using a 2-steps approach:

  1. Make a 1st AJAX request to retrieve the list of files paths to be loaded.
  2. Make a bunch of AJAX requests to load each file individually (possibly through omnivore).

Note that you need the exact file path, whereas in your code you seem to send only the file name.

If all your files are in the same folder, and that folder never changes, then you can hard-code its path in your client script and infer the files full path: omnivore.gpx(folderPath + listOfFilesNames[i])

EDIT following below comments

If you can have a hard-coded list of your server files paths as a JavaScript array, then it is trivial to use the code in the original answer:

var listOfFilesPath = [
  "path/to/file3.gpx" // etc.

Now if you do not have that hard-coded list, you will have to find a way to generate it server side, as the client (browser) cannot list by itself all files in a server folder. Unless you use a predefined template for their paths and blindly generate those paths in your client script.

Original answer:

You can load as many files as you wish, as long as you can list them:

for (var i = 0; i < listOfFilesPath.length; i += 1) {
  • Yeah I get that, the problem is to list a folder of GPX files Jul 23, 2016 at 21:28
  • If your files do not change, list them manually and hard-code their paths. If they may change, and you are client side, you have to allow a multiple files select and just retrieve that list. If your files are server side, you can use any server language to read your folder and build a hard-coded list to include into your JS script. Have a look at Stack Overflow, I am sure you will find plenty resources for that.
    – ghybs
    Jul 24, 2016 at 2:55
  • My files are on the server side, so I already built a list of files to be sent to the client. But how do I get the actual files? The list is not enough to add the gpx's to the layer Jul 28, 2016 at 13:12
  • Sorry I miss your context so it is hard for me to understand where is your difficulty. Please add more details on what you have, what you have coded, what you miss. I will edit the above answer, but as I have to wild guess, it will probably not help you that much.
    – ghybs
    Jul 29, 2016 at 7:05
  • check out the edit I made on the original post. As you se my frontend requests the names of the files, but I still need their actual data. Maybe add the path that is missing? But is that a good way to do it? Jul 29, 2016 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.