I’m trying a basic map drawing with JSON file.

What I’m trying to do is simply draw ellipse according the latitude and longitude in the JSON file. I’m creating a for loop to define the variable of [] arry, but when I print xgeo and ygeo, the error message shows “r is undefined”. And none of ellipse is drawn.

let bkgImage;
let urlMap, urlC;
let mapGeoLeft, mapGeoRight, mapGeoBottom, mapGeoTop;
let xgeo, ygeo;
let w, h;



function preload() {
  urlMap =
    "https://api.mapbox.com/styles/v1/mapbox/light-v11/static/[-123,29.7604267,-70.2553259,41]/600x400@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN";
  urlC = loadJSON("cities.json") 
  
  bkgImage = loadImage("US.Map.png");
}


function setup() {
  let u1 = split(urlMap,"/"); //string
  let u2 = u1[8]; //taking coordinate info.
  let coord = split(u2,","); // taking off ,
  coord[0] = coord[0].replace("[",""); //taking off []
  coord[3] = coord[3].replace("]","");
  
  mapGeoLeft = coord[0];
  mapGeoRight = coord[2];
  mapGeoTop = coord[1];
  mapGeoBottom = coord[3];

  createCanvas(600, 400);
  image(bkgImage, 0, 0, width, height);
  
  print(mapGeoRight);
  print(mapGeoLeft)
}

function draw() {
  for(let r = 0; r < urlC.length; r++){
    let lon = urlC[r].longitude
    let lat = urlC[r].latitude
    
    let xgeo = map(lon, mapGeoLeft, mapGeoRight, 0, width);
    let ygeo = map(lat, mapGeoTop, mapGeoBottom, 0, height);
    
    fill(255,0,0);
    ellipse(xgeo, ygeo, 5, 5)
    
  }

  // print(lon);
  
  noLoop();
}

Part of the JSON file I’m using:

[
  {
    "city": "New York",
    "growth_from_2000_to_2013": "4.8%",
    "latitude": 40.7127837,
    "longitude": -74.0059413,
    "population": "8405837",
    "rank": "1",
    "state": "New York"
  },
  {
    "city": "Los Angeles",
    "growth_from_2000_to_2013": "4.8%",
    "latitude": 34.0522342,
    "longitude": -118.2436849,
    "population": "3884307",
    "rank": "2",
    "state": "California"
  },
  {
    "city": "Chicago",
    "growth_from_2000_to_2013": "-6.1%",
    "latitude": 41.8781136,
    "longitude": -87.6297982,
    "population": "2718782",
    "rank": "3",
    "state": "Illinois"
  },
  {
    "city": "Houston",
    "growth_from_2000_to_2013": "11.0%",
    "latitude": 29.7604267,
    "longitude": -95.3698028,
    "population": "2195914",
    "rank": "4",
    "state": "Texas"
  },
  {
    "city": "Philadelphia",
    "growth_from_2000_to_2013": "2.6%",
    "latitude": 39.9525839,
    "longitude": -75.1652215,
    "population": "1553165",
    "rank": "5",
    "state": "Pennsylvania"
  },
  {
    "city": "Phoenix",
    "growth_from_2000_to_2013": "14.0%",
    "latitude": 33.4483771,
    "longitude": -112.0740373,
    "population": "1513367",
    "rank": "6",
    "state": "Arizona"
  },
  {
    "city": "San Antonio",
    "growth_from_2000_to_2013": "21.0%",
    "latitude": 29.4241219,
    "longitude": -98.4936282,
    "population": "1409019",
    "rank": "7",
    "state": "Texas"
  },
  {
    "city": "San Diego",
    "growth_from_2000_to_2013": "10.5%",
    "latitude": 32.715738,
    "longitude": -117.1610838,
    "population": "1355896",
    "rank": "8",
    "state": "California"
  },
  {
    "city": "Dallas",
    "growth_from_2000_to_2013": "5.6%",
    "latitude": 32.7766642,
    "longitude": -96.7969879,
    "population": "1257676",
    "rank": "9",
    "state": "Texas"