Add latitude/longitude to csv file and make interactive map with the data

edited March 3 in p5.js

Hi everyone,

I'm quite a beginner in p5.js and I want to do the following:

I have a csv table with data of medication use in The Netherlands, per town. This data I want to show on an interactive (mapbox) map.

Problem 1:
The csv file only has the names of the towns, not the longitude & latitude. Is there a way to generate this automatically? Otherwise I have to do it manually for about 400 towns:(.

Problem 2:
When I have the longitude and latitude, how can I show them on a map, using mapbox, via p5.js?

I hope you can help me with this!!!





  • Check this post:

    And in this next code, you can add the cities to the array and it will load them in the map:

    Hover the mouse over the cities to display their names. I have a blinking effect at each location, in case you are wondering why the yellow circles are changing over time.


  • Hi kfrajer,

    Thanks for the help, really appreciated. I don't understand the following code:

    for(let cc of cities){ let readGeo =loadJSON('https://'+'$'+cc+'&sensor=false&region=Netherlands'); geoData.push(readGeo); } }

    What do 'let' and 'cc' mean?. And how can I load the names of the places into the 'var cities' array? or do I need to add d=them manually?



  • You can add them manually or you can read a file or URL using loadStrings. You can check the P5.js reference for an explanations and check the provided examples. If it is not clear, ask below and any of the forum goers will be happy to provide you an example or to point you to a previous post with one.

    So as you see in the link, what I am doing is this:

    1. I start with an array of know cities ( I don't know many places in Netherlands... sorry)
    2. In preload, I inquire for all the geoinformation of those cities. I am not sure if you know this, but preload executes all its statements and only after all statements are done, the program continues its normal execution aka. setup() will be executed follow by continuous calls to draw().
    3. Then in setup, I retrieve my geo object and I extract all the information I need like lat and lon.

    The push() function is associated to array objects. I am pushing or adding some specific info to my array. This is the way to do so.

    This code was just a simple demonstration of how to accomplish your task. It can be adapted to your purpose and isntead of preload, you could use a callback method. I recommend checking the video I provided in the previous post as @shiffman does a terrific job explaining the usage of mapbox and how to interact with it.


  • Thanks again for the help, I'll check it out today!!

Sign In or Register to comment.