javascript - 通过循环二维数组创建多个对象？

Question

我是一般编程新手，正在使用 p5.js 和 Leaflet。我正在尝试用传单在 map 上绘制多个圆圈。我有世界上所有国家首都的二维数组坐标。我正在循环遍历数组，为每行坐标创建一个圆形标记。到目前为止它有效，但问题是，我实际上只得到一个圆形对象，称为“圆”，只有一对坐标。我的问题:如何为每个循环创建一个具有不同名称的新对象，以便每个循环实际上都是一个单独的对象，可以单独处理事件？

这是到目前为止的代码:

var coords = [
  [+41.3317, +19.8172],
  [+42.5075, +1.5218],
  [+53.9678, +27.5766],
  [+50.8371, +4.3676],
  [+43.8608, +18.4214],
  [+42.7105, +23.3238],
  [+55.6763, +12.5681],
  [+52.5235, +13.4115],
  [+59.4389, +24.7545],
  [+60.1699, +24.9384],
  [+48.8567, +2.3510],
  [+37.9792, +23.7166],
  [+51.5002, -0.1262],
  [+53.3441, -6.2675],
  [+64.1353, -21.8952],
  [+41.8955, +12.4823],
  [+42.6740, +21.1788],
  [+45.8150, +15.9785],
  [+56.9465, +24.1049],
  [+47.1411, +9.5215],
  [+54.6896, +25.2799],
  [+49.6100, +6.1296],
  [+35.9042, +14.5189],
  [+47.0167, +28.8497],
  [+43.7325, +7.4189],
  [+42.4602, +19.2595],
  [+52.3738, +4.8910],
  [+42.0024, +21.4361],
  [+59.9138, +10.7387],
  [+48.2092, +16.3728],
  [+52.2297, +21.0122],
  [+38.7072, -9.1355],
  [+44.4479, +26.0979],
  [+55.7558, +37.6176],
  [+43.9424, +12.4578],
  [+59.3328, +18.0645],
  [+46.9480, +7.4481],
  [+44.8048, +20.4781],
  [+48.2116, +17.1547],
  [+46.0514, +14.5060],
  [+40.4167, -3.7033],
  [+50.0878, +14.4205],
  [+50.4422, +30.5367],
  [+47.4984, +19.0408],
  [+62.0177, -6.7719],
  [+36.1377, -5.3453],
  [+49.4660, -2.5522],
  [+54.1670, -4.4821],
  [+49.1919, -2.1071],
  [+78.2186, +15.6488],
  [+34.5155, +69.1952],
  [+40.1596, +44.5090],
  [+40.3834, +49.8932],
  [+26.1921, +50.5354],
  [+23.7106, +90.3978],
  [+27.4405, +89.6730],
  [+4.9431, +114.9425],
  [+39.9056, +116.3958],
  [+41.7010, +44.7930],
  [+28.6353, +77.2250],
  [-6.1862, +106.8063],
  [+33.3157, +44.3922],
  [+35.7061, +51.4358],
  [+31.7857, +35.2007],
  [+35.6785, +139.6823],
  [+15.3556, +44.2081],
  [+31.9394, +35.9349],
  [+11.5434, +104.8984],
  [+51.1796, +71.4475],
  [+25.2948, +51.5082],
  [+42.8679, +74.5984],
  [+29.3721, +47.9824],
  [+17.9689, +102.6137],
  [+33.8872, +35.5134],
  [+3.1502, +101.7077],
  [+4.1742, +73.5109],
  [+47.9138, +106.9220],
  [+19.7378, +96.2083],
  [+27.7058, +85.3157],
  [+39.0187, +125.7468],
  [+23.6086, +58.5922],
  [+33.6751, +73.0946],
  [+14.5790, +120.9726],
  [+24.6748, +46.6977],
  [+1.2894, +103.8500],
  [+6.9155, +79.8572],
  [+33.5158, +36.2939],
  [+37.5139, +126.9828],
  [+38.5737, +68.7738],
  [+13.7573, +100.5020],
  [-8.5662, +125.5880],
  [+39.9439, +32.8560],
  [+37.9509, +58.3794],
  [+41.3193, +69.2481],
  [+24.4764, +54.3705],
  [+21.0341, +105.8372],
  [+35.1676, +33.3736],
  [+25.0338, +121.5645],
  [+17.1175, -61.8456],
  [-34.6118, -58.4173],
  [+25.0661, -77.3390],
  [+13.0935, -59.6105],
  [+17.2534, -88.7713],
  [-19.0421, -65.2559],
  [-15.7801, -47.9292],
  [-33.4691, -70.6420],
  [+9.9402, -84.1002],
  [+15.2976, -61.3900],
  [+18.4790, -69.8908],
  [-0.2295, -78.5243],
  [+13.7034, -89.2073],
  [+12.0540, -61.7486],
  [+14.6248, -90.5328],
  [+6.8046, -58.1548],
  [+18.5392, -72.3288],
  [+14.0821, -87.2063],
  [+17.9927, -76.7920],
  [+45.4235, -75.6979],
  [+4.6473, -74.0962],
  [+23.1333, -82.3667],
  [+19.4271, -99.1276],
  [+12.1475, -86.2734],
  [+8.9943, -79.5188],
  [-25.3005, -57.6362],
  [-12.0931, -77.0465],
  [+17.2968, -62.7138],
  [+13.9972, -61.0018],
  [+13.2035, -61.2653],
  [+5.8232, -55.1679],
  [+10.6596, -61.4789],
  [-34.8941, -56.0675],
  [+10.4961, -66.8983],
  [+38.8921, -77.0241],
  [+18.3405, -64.9326],
  [+18.2249, -63.0669],
  [+12.5246, -70.0265],
  [+32.2930, -64.7820],
  [+18.4328, -64.6235],
  [+19.3022, -81.3857],
  [-51.7010, -57.8492],
  [+4.9346, -52.3303],
  [+64.1836, -51.7214],
  [+15.9985, -61.7220],
  [+14.5997, -61.0760],
  [+16.6802, -62.2014],
  [+12.1034, -68.9335],
  [+18.4500, -66.0667],
  [+46.7878, -56.1968],
  [+21.4608, -71.1363],
  [+30.0571, +31.2272],
  [+36.7755, +3.0597],
  [-8.8159, +13.2306],
  [+3.7523, +8.7741],
  [+9.0084, +38.7575],
  [+6.4779, +2.6323],
  [-24.6570, +25.9089],
  [+12.3569, -1.5352],
  [-3.3818, +29.3622],
  [+6.8067, -5.2728],
  [+11.5806, +43.1425],
  [+15.3315, +38.9183],
  [+0.3858, +9.4496],
  [+13.4399, -16.6775],
  [+5.5401, -0.2074],
  [+9.5370, -13.6785],
  [+11.8598, -15.5875],
  [+3.8612, +11.5217],
  [+14.9195, -23.5153],
  [-1.2762, +36.7965],
  [-11.7004, +43.2412],
  [-4.2767, +15.2662],
  [-4.3369, +15.3271],
  [-29.2976, +27.4854],
  [+6.3106, -10.8047],
  [+32.8830, +13.1897],
  [-18.9201, +47.5237],
  [-13.9899, +33.7703],
  [+12.6530, -7.9864],
  [+33.9905, -6.8704],
  [+18.0669, -15.9900],
  [-20.1654, +57.4896],
  [-25.9686, +32.5804],
  [-22.5749, +17.0805],
  [+13.5164, +2.1157],
  [+9.0580, +7.4891],
  [-1.9441, +30.0619],
  [-15.4145, +28.2809],
  [+0.3360, +6.7311],
  [+14.6953, -17.4439],
  [-4.6167, +55.4500],
  [+8.4697, -13.2659],
  [-17.8227, +31.0496],
  [+2.0411, +45.3426],
  [+15.5501, +32.5322],
  [+4.8496, +31.6046],
  [-26.3186, +31.1410],
  [-25.7463, +28.1876],
  [-6.1670, +35.7497],
  [+6.1228, +1.2255],
  [+12.1121, +15.0355],
  [+36.8117, +10.1761],
  [+0.3133, +32.5714],
  [+4.3621, +18.5873],
  [-12.7806, +45.2278],
  [-20.8732, +55.4603],
  [-15.9244, -5.7181],
  [+27.1536, -13.2033],
  [-35.2820, +149.1286],
  [-18.1416, +178.4419],
  [+1.3282, +172.9784],
  [+7.1167, +171.3667],
  [+6.9177, +158.1854],
  [-0.5434, +166.9196],
  [-41.2865, +174.7762],
  [+7.5007, +134.6241],
  [-9.4656, +147.1969],
  [-9.4333, +159.9500],
  [-13.8314, -171.7518],
  [-21.1360, -175.2164],
  [-8.5210, +179.1983],
  [-17.7404, +168.3210],
  [-14.2793, -170.7009],
  [-21.2039, -159.7658],
  [-17.5350, -149.5696],
  [+13.4667, +144.7470],
  [-12.1869, +96.8283],
  [-22.2758, +166.4581],
  [-19.0565, -169.9237],
  [+15.2069, +145.7197],
  [-29.0545, +167.9666],
  [-25.0662, -130.1027],
  [-13.2784, -176.1430],
  [-10.4286, +105.6807],
  [+32.3754, -86.2996],
  [+58.3637, -134.5721],
  [+33.4483, -112.0738],
  [+34.7244, -92.2789],
  [+38.5737, -121.4871],
  [+39.7551, -104.9881],
  [+41.7665, -72.6732],
  [+39.1615, -75.5136],
  [+30.4382, -84.2806],
  [+33.7545, -84.3897],
  [+21.2920, -157.8219],
  [+43.6021, -116.2125],
  [+39.8018, -89.6533],
  [+39.7670, -86.1563],
  [+41.5888, -93.6203],
  [+39.0474, -95.6815],
  [+38.1894, -84.8715],
  [+30.4493, -91.1882],
  [+44.3294, -69.7323],
  [+38.9693, -76.5197],
  [+42.3589, -71.0568],
  [+42.7336, -84.5466],
  [+44.9446, -93.1027],
  [+32.3122, -90.1780],
  [+38.5698, -92.1941],
  [+46.5911, -112.0205],
  [+40.8136, -96.7026],
  [+39.1501, -119.7519],
  [+43.2314, -71.5597],
  [+40.2202, -74.7642],
  [+35.6816, -105.9381],
  [+42.6517, -73.7551],
  [+35.7797, -78.6434],
  [+46.8084, -100.7694],
  [+39.9622, -83.0007],
  [+35.4931, -97.4591],
  [+44.9370, -123.0272],
  [+40.2740, -76.8849],
  [+41.8270, -71.4087],
  [+34.0007, -81.0353],
  [+44.3776, -100.3177],
  [+36.1589, -86.7821],
  [+30.2687, -97.7452],
  [+40.7716, -111.8882],
  [+44.2627, -72.5716],
  [+37.5408, -77.4339],
  [+47.0449, -122.9016],
  [+38.3533, -81.6354],
  [+43.0632, -89.4007],
  [+41.1389, -104.8165]
];

var newCoords = [];
var circleIndex = [];
var circle;

function setup() {

  //Initializig the map


  mapId = createDiv();
  mapId.id("mapid");
  mapId.size(windowWidth, windowHeight);
  mapId.position(0, 0)
  mymap = L.map('mapid').setView([0, 0], 2.5);


  //Loading tiles from mapbox

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    accessToken: 'pk.eyJ1Ijoib3NrYXItcXVpcmluLWthY2tlYmFydCIsImEiOiJjazV4b2EyM2UyMWdtM2VtbG0wdzFvM2p2In0.SrMgYWTBUYDq3f703br1aQ'
  }).addTo(mymap);

  //creating the circles on the map

  for (i = 0; i < coords.length; i++) {
    circleIndex[i] = []
    for (j = 0; j < coords[i].length; j++) {
      circleIndex[i].push(coords[i][j]);
      newCoords.push(coords[i][j]);
    }
    circle = L.circle(newCoords, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.3,
      radius: 50000
    }).addTo(mymap);
    newCoords = []

    //adding callback function to a click event for the circle. This will only work for the circle with the Index 1 of the array.

  }
  circle.on('click', function(click) {
    alert(this.latlng);
  });

}

有什么建议吗？如何掌握？我可以以某种方式更改构造函数来为每个行索引或其他内容添加不同的名称索引吗？

抱歉代码困惑^^我也愿意接受编辑建议。

干杯!

Answer 1

如果您想保留对每个圆圈的引用，您可以将它们添加到数组或字典中。我会使用一个数组，因为你没有任何东西可以像字符串名称一样区分每个圆圈。

这是我编辑代码的方法。

记住还要将循环内的变量声明为 var i 或 let i 。

var coords = [
  [+41.3317, +19.8172],
  [+42.5075, +1.5218],
  [+53.9678, +27.5766],
  [+50.8371, +4.3676],
  [+43.8608, +18.4214],
  [+42.7105, +23.3238],
  [+55.6763, +12.5681],
  [+52.5235, +13.4115],
  [+59.4389, +24.7545],
  [+60.1699, +24.9384],
  [+48.8567, +2.3510],
  [+37.9792, +23.7166],
  [+51.5002, -0.1262],
  [+53.3441, -6.2675],
  [+64.1353, -21.8952],
  [+41.8955, +12.4823],
  [+42.6740, +21.1788],
  [+45.8150, +15.9785],
  [+56.9465, +24.1049],
  [+47.1411, +9.5215],
  [+54.6896, +25.2799],
  [+49.6100, +6.1296],
  [+35.9042, +14.5189],
  [+47.0167, +28.8497],
  [+43.7325, +7.4189],
  [+42.4602, +19.2595],
  [+52.3738, +4.8910],
  [+42.0024, +21.4361],
  [+59.9138, +10.7387],
  [+48.2092, +16.3728],
  [+52.2297, +21.0122],
  [+38.7072, -9.1355],
  [+44.4479, +26.0979],
  [+55.7558, +37.6176],
  [+43.9424, +12.4578],
  [+59.3328, +18.0645],
  [+46.9480, +7.4481],
  [+44.8048, +20.4781],
  [+48.2116, +17.1547],
  [+46.0514, +14.5060],
  [+40.4167, -3.7033],
  [+50.0878, +14.4205],
  [+50.4422, +30.5367],
  [+47.4984, +19.0408],
  [+62.0177, -6.7719],
  [+36.1377, -5.3453],
  [+49.4660, -2.5522],
  [+54.1670, -4.4821],
  [+49.1919, -2.1071],
  [+78.2186, +15.6488],
  [+34.5155, +69.1952],
  [+40.1596, +44.5090],
  [+40.3834, +49.8932],
  [+26.1921, +50.5354],
  [+23.7106, +90.3978],
  [+27.4405, +89.6730],
  [+4.9431, +114.9425],
  [+39.9056, +116.3958],
  [+41.7010, +44.7930],
  [+28.6353, +77.2250],
  [-6.1862, +106.8063],
  [+33.3157, +44.3922],
  [+35.7061, +51.4358],
  [+31.7857, +35.2007],
  [+35.6785, +139.6823],
  [+15.3556, +44.2081],
  [+31.9394, +35.9349],
  [+11.5434, +104.8984],
  [+51.1796, +71.4475],
  [+25.2948, +51.5082],
  [+42.8679, +74.5984],
  [+29.3721, +47.9824],
  [+17.9689, +102.6137],
  [+33.8872, +35.5134],
  [+3.1502, +101.7077],
  [+4.1742, +73.5109],
  [+47.9138, +106.9220],
  [+19.7378, +96.2083],
  [+27.7058, +85.3157],
  [+39.0187, +125.7468],
  [+23.6086, +58.5922],
  [+33.6751, +73.0946],
  [+14.5790, +120.9726],
  [+24.6748, +46.6977],
  [+1.2894, +103.8500],
  [+6.9155, +79.8572],
  [+33.5158, +36.2939],
  [+37.5139, +126.9828],
  [+38.5737, +68.7738],
  [+13.7573, +100.5020],
  [-8.5662, +125.5880],
  [+39.9439, +32.8560],
  [+37.9509, +58.3794],
  [+41.3193, +69.2481],
  [+24.4764, +54.3705],
  [+21.0341, +105.8372],
  [+35.1676, +33.3736],
  [+25.0338, +121.5645],
  [+17.1175, -61.8456],
  [-34.6118, -58.4173],
  [+25.0661, -77.3390],
  [+13.0935, -59.6105],
  [+17.2534, -88.7713],
  [-19.0421, -65.2559],
  [-15.7801, -47.9292],
  [-33.4691, -70.6420],
  [+9.9402, -84.1002],
  [+15.2976, -61.3900],
  [+18.4790, -69.8908],
  [-0.2295, -78.5243],
  [+13.7034, -89.2073],
  [+12.0540, -61.7486],
  [+14.6248, -90.5328],
  [+6.8046, -58.1548],
  [+18.5392, -72.3288],
  [+14.0821, -87.2063],
  [+17.9927, -76.7920],
  [+45.4235, -75.6979],
  [+4.6473, -74.0962],
  [+23.1333, -82.3667],
  [+19.4271, -99.1276],
  [+12.1475, -86.2734],
  [+8.9943, -79.5188],
  [-25.3005, -57.6362],
  [-12.0931, -77.0465],
  [+17.2968, -62.7138],
  [+13.9972, -61.0018],
  [+13.2035, -61.2653],
  [+5.8232, -55.1679],
  [+10.6596, -61.4789],
  [-34.8941, -56.0675],
  [+10.4961, -66.8983],
  [+38.8921, -77.0241],
  [+18.3405, -64.9326],
  [+18.2249, -63.0669],
  [+12.5246, -70.0265],
  [+32.2930, -64.7820],
  [+18.4328, -64.6235],
  [+19.3022, -81.3857],
  [-51.7010, -57.8492],
  [+4.9346, -52.3303],
  [+64.1836, -51.7214],
  [+15.9985, -61.7220],
  [+14.5997, -61.0760],
  [+16.6802, -62.2014],
  [+12.1034, -68.9335],
  [+18.4500, -66.0667],
  [+46.7878, -56.1968],
  [+21.4608, -71.1363],
  [+30.0571, +31.2272],
  [+36.7755, +3.0597],
  [-8.8159, +13.2306],
  [+3.7523, +8.7741],
  [+9.0084, +38.7575],
  [+6.4779, +2.6323],
  [-24.6570, +25.9089],
  [+12.3569, -1.5352],
  [-3.3818, +29.3622],
  [+6.8067, -5.2728],
  [+11.5806, +43.1425],
  [+15.3315, +38.9183],
  [+0.3858, +9.4496],
  [+13.4399, -16.6775],
  [+5.5401, -0.2074],
  [+9.5370, -13.6785],
  [+11.8598, -15.5875],
  [+3.8612, +11.5217],
  [+14.9195, -23.5153],
  [-1.2762, +36.7965],
  [-11.7004, +43.2412],
  [-4.2767, +15.2662],
  [-4.3369, +15.3271],
  [-29.2976, +27.4854],
  [+6.3106, -10.8047],
  [+32.8830, +13.1897],
  [-18.9201, +47.5237],
  [-13.9899, +33.7703],
  [+12.6530, -7.9864],
  [+33.9905, -6.8704],
  [+18.0669, -15.9900],
  [-20.1654, +57.4896],
  [-25.9686, +32.5804],
  [-22.5749, +17.0805],
  [+13.5164, +2.1157],
  [+9.0580, +7.4891],
  [-1.9441, +30.0619],
  [-15.4145, +28.2809],
  [+0.3360, +6.7311],
  [+14.6953, -17.4439],
  [-4.6167, +55.4500],
  [+8.4697, -13.2659],
  [-17.8227, +31.0496],
  [+2.0411, +45.3426],
  [+15.5501, +32.5322],
  [+4.8496, +31.6046],
  [-26.3186, +31.1410],
  [-25.7463, +28.1876],
  [-6.1670, +35.7497],
  [+6.1228, +1.2255],
  [+12.1121, +15.0355],
  [+36.8117, +10.1761],
  [+0.3133, +32.5714],
  [+4.3621, +18.5873],
  [-12.7806, +45.2278],
  [-20.8732, +55.4603],
  [-15.9244, -5.7181],
  [+27.1536, -13.2033],
  [-35.2820, +149.1286],
  [-18.1416, +178.4419],
  [+1.3282, +172.9784],
  [+7.1167, +171.3667],
  [+6.9177, +158.1854],
  [-0.5434, +166.9196],
  [-41.2865, +174.7762],
  [+7.5007, +134.6241],
  [-9.4656, +147.1969],
  [-9.4333, +159.9500],
  [-13.8314, -171.7518],
  [-21.1360, -175.2164],
  [-8.5210, +179.1983],
  [-17.7404, +168.3210],
  [-14.2793, -170.7009],
  [-21.2039, -159.7658],
  [-17.5350, -149.5696],
  [+13.4667, +144.7470],
  [-12.1869, +96.8283],
  [-22.2758, +166.4581],
  [-19.0565, -169.9237],
  [+15.2069, +145.7197],
  [-29.0545, +167.9666],
  [-25.0662, -130.1027],
  [-13.2784, -176.1430],
  [-10.4286, +105.6807],
  [+32.3754, -86.2996],
  [+58.3637, -134.5721],
  [+33.4483, -112.0738],
  [+34.7244, -92.2789],
  [+38.5737, -121.4871],
  [+39.7551, -104.9881],
  [+41.7665, -72.6732],
  [+39.1615, -75.5136],
  [+30.4382, -84.2806],
  [+33.7545, -84.3897],
  [+21.2920, -157.8219],
  [+43.6021, -116.2125],
  [+39.8018, -89.6533],
  [+39.7670, -86.1563],
  [+41.5888, -93.6203],
  [+39.0474, -95.6815],
  [+38.1894, -84.8715],
  [+30.4493, -91.1882],
  [+44.3294, -69.7323],
  [+38.9693, -76.5197],
  [+42.3589, -71.0568],
  [+42.7336, -84.5466],
  [+44.9446, -93.1027],
  [+32.3122, -90.1780],
  [+38.5698, -92.1941],
  [+46.5911, -112.0205],
  [+40.8136, -96.7026],
  [+39.1501, -119.7519],
  [+43.2314, -71.5597],
  [+40.2202, -74.7642],
  [+35.6816, -105.9381],
  [+42.6517, -73.7551],
  [+35.7797, -78.6434],
  [+46.8084, -100.7694],
  [+39.9622, -83.0007],
  [+35.4931, -97.4591],
  [+44.9370, -123.0272],
  [+40.2740, -76.8849],
  [+41.8270, -71.4087],
  [+34.0007, -81.0353],
  [+44.3776, -100.3177],
  [+36.1589, -86.7821],
  [+30.2687, -97.7452],
  [+40.7716, -111.8882],
  [+44.2627, -72.5716],
  [+37.5408, -77.4339],
  [+47.0449, -122.9016],
  [+38.3533, -81.6354],
  [+43.0632, -89.4007],
  [+41.1389, -104.8165]
];

//var newCoords = []; // this is only used inside the loop so it can be declared there
//var circleIndex = []; // this is not being used
//var circle; // this gets overridden on each iteration 
var circles = []; // Use this array to store the created circles

function setup() {

  //Initializig the map


  mapId = createDiv();
  mapId.id("mapid");
  mapId.size(windowWidth, windowHeight);
  mapId.position(0, 0)
  mymap = L.map('mapid').setView([0, 0], 2.5);


  //Loading tiles from mapbox

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    accessToken: 'pk.eyJ1Ijoib3NrYXItcXVpcmluLWthY2tlYmFydCIsImEiOiJjazV4b2EyM2UyMWdtM2VtbG0wdzFvM2p2In0.SrMgYWTBUYDq3f703br1aQ'
  }).addTo(mymap);

  //creating the circles on the map

  // Tip: Instead of looking at the coords multidimensional array as a matrix, think of
  // it as a list of coordinate pairs, which you can loop without using indexes
  for (let newCoordPair of coords) {
    var circle = L.circle(newCoordPair, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.3,
      radius: 50000
    }).addTo(mymap);

    circles.push(circle);
    // Add here the event to the circle if you want all the circles to have it
    circle.on('click', function(click) {
       alert(this.latlng);
    });
  }
}