We Keep Coding

Extracting array values from JSON in Jquery - javascript

I'm currently building a little mobile web app for a university project. The application I'm trying to build takes values from a JSON file for various species of trees and then lists these through use of Jquery on a HTML page - when one of these list items is clicked it brings the user to a google map page where the idea is to draw a polygon from the coordinate information within the JSON file.
My JSON file looks like this:
[{
"forestnumber":"1",
"name":"Cork Oak" ,
"imagelocation":"img/corkoak.png" ,
"scientificname":"Cork Oak" ,
"type":"Evergreen" ,
"shortdesc":"Quercus suber, commonly called the cork oak, is a medium-sized, evergreen oak tree in the section Quercus sect. Cerris. It is the primary source of cork for wine bottle stoppers and other uses, such as cork flooring. It is native to southwest Europe and northwest Africa." ,
"coordinates": [[-35.279033, 149.079420], [-35.279240, 149.081258], [-35.283641, 149.081343], [-35.283405, 149.079024]]
},{
"forestnumber":"2",
"name":"Local Eucalypts And Grasses" ,
"imagelocation":"img/localeucalypts.png" ,
"scientificname":"Various" ,
"type":"Evergreen" ,
"shortdesc":"There are more than 700 species of eucalyptus and are mostly native of Australia, and a very small number are found in adjacent areas of New Guinea and Indonesia. One species, Eucalyptus deglupta, ranges as far north as the Philippines." ,
"coordinates": [[-35.279136, 149.081158], [-35.279305, 149.081193], [-35.283613, 149.081276], [-35.283405, 149.07902], [-35.284155, 149.080923], [-35.284425, 149.081320], [-35.286067, 149.081197], [-35.286094, 149.080900], [-35.286328, 149.081362], [-35.285604, 149.082060], [-35.284642, 149.082469], [-35.283257, 149.082599], [-35.281447, 149.082384], [-35.280926, 149.082163], [-35.280354, 149.081800], [-35.279764, 149.081678]]
},{
"forestnumber":"3",
"name":"Common Fig" ,
"imagelocation":"img/figs.png" ,
"scientificname":"Ficus Carica" ,
"type":"Deciduous" ,
"shortdesc":" Although commonly referred to as a fruit, the fig is actually the infructescence or scion of the tree, known as a false fruit or multiple fruit, in which the flowers and seeds are borne." ,
"coordinates": [[-35.285872, 149.079429], [-35.285624, 149.077371], [-35.286509, 149.078898]]
}]
Each forest is numbered and each coordinate value is another array.
My jQuery code looks like this:
$.getJSON( "js/forests.json", function( data ) {
for (var i = 0; i <= data.length; i++) { //loop through JSON file
var value = data[i];//set value to represent data
var _html; // set _html as a variable
_html = "<li class='forestlistitem' data-val='"+value.forestnumber+"'><span class='name'>"+value.name+"</span><img src='"+value.imagelocation+"' alt='"+value.name+"' class='listimage' /></li>" ;
$('#forestlistbody ul').append(_html); //append _html to the HTML of the page
$('.forestlistitem').click(function(){ //sort of a no-no but the only way i can get it to work?
$("#forests").hide();//hides forests div in HTML
$("homeselect").hide();//hides homeselect div in HTML
$("trails").hide();//hides trails div in HTML
$("#map").show();//shows map div in HTML
initMap();//initializes map function
numb = $(this).data('val'); // sets global variable numb to the forest number associated with which option was clicked
console.log(numb); // output numb variable to console in order to test that it is sending the correct number
});
THE PROBLEM: So Basically what I want to be able to do from herein is output the coordinates array that was associated with the clicked list item into an MVCArray by pushing each coordinate value into it. The code for that looks something like this at the moment(currently not a loop for each because I don't know how to output it from JSON).
var forest = new google.maps.MVCArray();
forest.push ( new google.maps.LatLng(-35.285872, 149.079429) );
forest.push ( new google.maps.LatLng(-35.285624, 149.077371) );
forest.push ( new google.maps.LatLng(-35.286509, 149.078898) );
var polygonOptions = {path: forest};
var polygon = new google.maps.Polygon(polygonOptions);
polygon.setMap(map);
If anyone could help me I'd highly appreciate it, ive been wracking my brains on this looking at various resources but I can't quite figure out how to get the array values out of the JSON and into a loop for each push item. This is only the second time ever working with code so im still a bit of a newbie =p

To parse your JSON into google.maps.Polygon objects, translate the array of arrays that currently holds the coordinates into an array of google.maps.LatLng objects (or google.maps.LatLngLiteral objects)
for (var i = 0; i < jsonData.length; i++) {
var coordinates = [];
for (var j = 0; j < jsonData[i].coordinates.length; j++) {
var pt = new google.maps.LatLng(jsonData[i].coordinates[j][0], jsonData[i].coordinates[j][1]);
coordinates.push(pt);
}
var polygon = new google.maps.Polygon({
map: map,
paths: [coordinates]
})
}
fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < jsonData.length; i++) {
var coordinates = [];
for (var j = 0; j < jsonData[i].coordinates.length; j++) {
var pt = new google.maps.LatLng(jsonData[i].coordinates[j][0], jsonData[i].coordinates[j][1]);
coordinates.push(pt);
bounds.extend(pt);
}
var polygon = new google.maps.Polygon({
map: map,
paths: [coordinates]
})
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var jsonData = [{
"forestnumber": "1",
"name": "Cork Oak",
"imagelocation": "img/corkoak.png",
"scientificname": "Cork Oak",
"type": "Evergreen",
"shortdesc": "Quercus suber, commonly called the cork oak, is a medium-sized, evergreen oak tree in the section Quercus sect. Cerris. It is the primary source of cork for wine bottle stoppers and other uses, such as cork flooring. It is native to southwest Europe and northwest Africa.",
"coordinates": [
[-35.279033, 149.079420],
[-35.279240, 149.081258],
[-35.283641, 149.081343],
[-35.283405, 149.079024]
]
}, {
"forestnumber": "2",
"name": "Local Eucalypts And Grasses",
"imagelocation": "img/localeucalypts.png",
"scientificname": "Various",
"type": "Evergreen",
"shortdesc": "There are more than 700 species of eucalyptus and are mostly native of Australia, and a very small number are found in adjacent areas of New Guinea and Indonesia. One species, Eucalyptus deglupta, ranges as far north as the Philippines.",
"coordinates": [
[-35.279136, 149.081158],
[-35.279305, 149.081193],
[-35.283613, 149.081276],
[-35.283405, 149.07902],
[-35.284155, 149.080923],
[-35.284425, 149.081320],
[-35.286067, 149.081197],
[-35.286094, 149.080900],
[-35.286328, 149.081362],
[-35.285604, 149.082060],
[-35.284642, 149.082469],
[-35.283257, 149.082599],
[-35.281447, 149.082384],
[-35.280926, 149.082163],
[-35.280354, 149.081800],
[-35.279764, 149.081678]
]
}, {
"forestnumber": "3",
"name": "Common Fig",
"imagelocation": "img/figs.png",
"scientificname": "Ficus Carica",
"type": "Deciduous",
"shortdesc": " Although commonly referred to as a fruit, the fig is actually the infructescence or scion of the tree, known as a false fruit or multiple fruit, in which the flowers and seeds are borne.",
"coordinates": [
[-35.285872, 149.079429],
[-35.285624, 149.077371],
[-35.286509, 149.078898]
]
}];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Related

Is there a way to create the unary_union from python shapely module for JavaScript?
from shapely.ops import unary_union
I have seen turf.js has union() but this isn't equal to the unary_union.
Or does anyone know what the unary_union actually does? Maybe I can try to recreate it, I have seen the source code in python but it looked very complicated.
The above code takes to line coords and merges them into one. The it converts to a LineString for shapely to read. But not sure whats the purpose of the unary_union (but it is the only way that gives me the correct result when comparing with actual data).
The idea was to get the area before/after the intersects, unary_union helped with finding the area before the intersect and the other area after the intersect.
UPDATE:
This is the full code of the program which gets me the areas of the intersected lines:
import numpy as np
from shapely.geometry import LineString
from shapely.ops import unary_union, polygonize
avg_coords = [(0.0, 0.0), (4.872117, 2.29658), (5.268545, 2.4639225), (5.664686, 2.6485724), (6.059776, 2.8966842), (6.695151, 3.0986626), (7.728006, 3.4045217), (8.522297, 3.652668), (9.157002, 3.895031), (10.191483, 4.1028132), (10.827622, 4.258638), (11.38593, 4.2933016), (11.86478, 4.3048816), (12.344586, 4.258769), (12.984073, 4.2126703), (13.942729, 4.1781383), (14.58212, 4.137809), (15.542498, 3.99943), (16.502588, 3.878359), (17.182951, 3.7745714), (18.262657, 3.6621647), (19.102558, 3.567045), (20.061789, 3.497897), (21.139917, 3.4806826), (22.097425, 3.5153809), (23.65388, 3.5414772), (24.851482, 3.541581), (26.04966, 3.507069), (27.72702, 3.463945), (28.925198, 3.429433), (29.883854, 3.3949006), (31.08246, 3.3344274), (31.92107, 3.317192), (33.716183, 3.3952322), (35.63192, 3.4213595), (37.427895, 3.4474766), (39.343628, 3.473604), (41.49874, 3.508406), (43.773468, 3.5518723), (46.287716, 3.595359), (49.28115, 3.6302335), (52.633293, 3.6997545), (54.30922, 3.7431688), (55.8651, 3.8038807), (58.738773, 3.8387446), (60.893887, 3.8735466), (63.647655, 3.9170544), (66.760704, 3.960593), (68.79663, 3.9607692), (70.23332, 3.986855), (72.867905, 3.995737), (75.38245, 4.0219164), (77.778656, 3.9615464), (79.337975, 3.8145657), (80.41826, 3.6675436), (80.899734, 3.5204697), (81.62059, 3.38207), (82.34045, 3.3042476), (83.30039, 3.1918304), (84.38039, 3.062116), (84.50359, 2.854434), (83.906364, 2.7591898), (83.669716, 2.586092), (83.43435, 2.3351095), (83.19727, 2.1879735), (82.84229, 1.9283267), (82.48516, 1.7984879), (81.65014, 1.5993768), (80.454544, 1.4781193), (79.13962, 1.3308897), (77.944595, 1.1750168), (76.39001, 1.0364205), (74.59633, 0.87184185), (71.60447, 0.741775), (70.04903, 0.6551017), (58.3, 0.0)]
model_coords = [(0.0, 0.0), (0.6699889, 0.18807), (1.339894, 0.37499), (2.009583, 0.55966), (2.67915, 0.74106), (3.348189, 0.91826), (4.016881, 1.0904), (4.685107, 1.2567), (5.359344, 1.418), (6.026172, 1.5706), (6.685472, 1.714), (7.350604, 1.8508), (8.021434, 1.9803), (8.684451, 2.0996), (9.346408, 2.2099), (10.0066, 2.311), (10.66665, 2.4028), (11.32436, 2.4853), (11.98068, 2.5585), (12.6356, 2.6225), (13.29005, 2.6775), (13.93507, 2.7232), (14.58554, 2.7609), (15.23346, 2.7903), (15.87982, 2.8116), (16.52556, 2.8254), (17.16867, 2.832), (17.80914, 2.8317), (18.44891, 2.825), (19.08598, 2.8124), (19.72132, 2.7944), (20.35491, 2.7713), (20.98673, 2.7438), (21.61675, 2.7121), (22.24398, 2.677), (22.86939, 2.6387), (23.49297, 2.5978), (24.1147, 2.5548), (24.73458, 2.51), (25.3526, 2.464), (25.96874, 2.4171), (26.58301, 2.3697), (27.1954, 2.3223), (27.80491, 2.2751), (28.41354, 2.2285), (29.02028, 2.1829), (29.62512, 2.1384), (30.22809, 2.0954), (30.82917, 2.0541), (31.42837, 2.0147), (32.02669, 1.9775), (32.62215, 1.9425), (33.21674, 1.9099), (33.80945, 1.8799), (34.40032, 1.8525), (34.98933, 1.8277), (35.5765, 1.8058), (36.16283, 1.7865), (36.74733, 1.7701), (37.33002, 1.7564), (37.91187, 1.7455), (38.49092, 1.7372), (39.06917, 1.7316), (39.64661, 1.7285), (40.22127, 1.7279), (40.79514, 1.7297), (41.36723, 1.7337), (41.93759, 1.7399), (42.50707, 1.748), (43.07386, 1.7581), (43.63995, 1.7699), (44.20512, 1.7832), (44.76772, 1.7981), (45.3295, 1.8143), (45.88948, 1.8318), (46.44767, 1.8504), (47.00525, 1.8703), (47.55994, 1.8911), (48.11392, 1.9129), (48.6661, 1.9356), (49.21658, 1.959), (49.76518, 1.9832), (50.31305, 2.0079), (50.85824, 2.033), (51.40252, 2.0586), (51.94501, 2.0845), (52.48579, 2.1107), (53.02467, 2.1369), (53.56185, 2.1632), (54.09715, 2.1895), (54.63171, 2.2156), (55.1634, 2.2416), (55.69329, 2.2674), (56.22236, 2.2928), (56.74855, 2.3179), (57.27392, 2.3426), (57.7964, 2.3668), (58.31709, 2.3905), (58.83687, 2.4136), (59.35905, 2.4365), (59.87414, 2.4585), (60.38831, 2.4798), (60.8996, 2.5006), (61.40888, 2.5207), (61.91636, 2.5401), (62.42194, 2.5589), (62.92551, 2.577), (63.42729, 2.5945), (63.92607, 2.6113), (64.42384, 2.6275), (64.91873, 2.643), (65.4127, 2.658), (65.90369, 2.6724), (66.39266, 2.6862), (66.87964, 2.6995), (67.36373, 2.7123), (67.84679, 2.7246), (68.32689, 2.7364), (68.80595, 2.7478), (69.28194, 2.7588), (69.756, 2.7695), (70.22709, 2.7798), (70.69707, 2.7898), (71.16405, 2.7995), (71.62902, 2.809), (72.0919, 2.8183), (72.55277, 2.8273), (73.01067, 2.8362), (73.46734, 2.845), (73.92112, 2.8536), (74.37269, 2.8622), (74.82127, 2.8706), (75.26884, 2.8791), (75.71322, 2.8875), (76.15559, 2.8958), (76.59488, 2.9042), (77.03304, 2.9126), (77.46812, 2.921), (77.90111, 2.9294), (78.33199, 2.9379), (78.75986, 2.9464), (79.18652, 2.955), (79.60912, 2.9637), (80.03049, 2.9724), (80.44985, 2.9811), (80.86613, 2.99), (81.2802, 2.9989), (81.69118, 3.0078), (82.10006, 3.0168), (82.50674, 3.0259), (82.91132, 3.035), (83.31379, 3.0441), (83.71307, 3.0533), (84.10925, 3.0625), (84.50421, 3.0717), (84.8961, 3.0809), (85.28577, 3.0901), (85.67334, 3.0993), (86.05771, 3.1085), (86.43989, 3.1176), (86.81896, 3.1267), (87.19585, 3.1358), (87.57063, 3.1448), (87.94319, 3.1537), (88.31257, 3.1626), (88.67973, 3.1713), (89.04372, 3.18), (89.40659, 3.1886), (89.7652, 3.197), (90.12457, 3.2053), (90.47256, 3.2135), (90.82946, 3.2216), (91.17545, 3.2295), (91.52045, 3.2373), (91.86441, 3.2449), (92.20641, 3.2524), (92.54739, 3.2597), (92.88728, 3.2669), (93.21538, 3.2739), (93.55325, 3.2807), (93.87924, 3.2874), (94.20424, 3.2939), (94.52822, 3.3002), (94.85012, 3.3064), (95.16219, 3.3123), (95.48208, 3.3182), (95.79107, 3.3238), (96.09807, 3.3293), (96.40505, 3.3346), (96.71003, 3.3397), (97.01401, 3.3447), (97.31592, 3.3496), (97.60799, 3.3542), (97.90789, 3.3587), (98.19686, 3.3631), (98.48386, 3.3673), (98.77085, 3.3714), (99.05574, 3.3753), (99.32983, 3.3791), (99.6127, 3.3828), (99.8837, 3.3863), (100.1538, 3.3897), (100.4326, 3.393), (100.6897, 3.3961), (100.9566, 3.3991), (101.2215, 3.402), (101.4756, 3.4048), (101.7375, 3.4075), (101.9885, 3.4101), (102.2385, 3.4126), (102.4875, 3.4149), (102.7354, 3.4172), (102.9714, 3.4194), (103.2163, 3.4214), (103.4493, 3.4234), (103.6823, 3.4253), (103.9133, 3.4271), (104.1433, 3.4288), (104.3712, 3.4304), (104.5882, 3.4319), (104.8141, 3.4333), (105.0291, 3.4346), (105.2421, 3.4358), (105.4541, 3.437), (105.6651, 3.438), (105.8751, 3.439), (106.083, 3.4399), (106.28, 3.4407), (106.4759, 3.4414), (106.6699, 3.442), (106.8629, 3.4425), (107.0549, 3.443), (107.2458, 3.4433), (107.4249, 3.4435), (107.6128, 3.4437), (107.7897, 3.4438), (107.9647, 3.4437), (108.1387, 3.4436), (108.3116, 3.4433), (108.4737, 3.443), (108.6436, 3.4426), (108.8027, 3.4421), (108.9706, 3.4414), (109.1265, 3.4407), (109.2814, 3.4399), (109.4255, 3.439), (109.5784, 3.4379), (109.7195, 3.4368), (109.8694, 3.4356), (110.0084, 3.4342), (110.1454, 3.4328), (110.2813, 3.4313), (110.4162, 3.4296), (110.5403, 3.4279), (110.6722, 3.426), (110.7932, 3.424), (110.9132, 3.422), (111.0322, 3.4198), (111.1492, 3.4175), (111.2651, 3.4151), (111.3701, 3.4127), (111.483, 3.4101), (111.585, 3.4074), (111.686, 3.4046), (111.786, 3.4017), (111.884, 3.3987), (111.9809, 3.3956), (112.0669, 3.3924), (112.1608, 3.3891), (112.2448, 3.3857), (112.3268, 3.3822), (112.4078, 3.3786), (112.4867, 3.3749), (112.5548, 3.3711), (112.6317, 3.3672), (112.6978, 3.3632), (112.7726, 3.3591), (112.8356, 3.3549), (112.8975, 3.3506), (112.9476, 3.3462), (113.0076, 3.3417), (113.0655, 3.3372), (113.1125, 3.3325), (113.1584, 3.3278), (113.2024, 3.3229), (113.2464, 3.318), (113.2884, 3.313), (113.3283, 3.3079), (113.3584, 3.3027), (113.3963, 3.2974), (113.4233, 3.292), (113.4492, 3.2865), (113.4742, 3.281), (113.4972, 3.2753), (113.5201, 3.2696), (113.5312, 3.2638), (113.5501, 3.2579), (113.5591, 3.2519), (113.5661, 3.2459), (113.5721, 3.2397), (113.577, 3.2335), (113.5809, 3.2272), (113.573, 3.2208), (113.5749, 3.2143), (113.5649, 3.2077), (113.5539, 3.2011), (113.5409, 3.1944), (113.5278, 3.1876), (113.5128, 3.1807), (113.4967, 3.1737), (113.4697, 3.1667), (113.4418, 3.1596), (113.4227, 3.1524), (113.3917, 3.145), (113.3597, 3.1375), (113.3266, 3.1298), (113.2827, 3.1218), (113.2475, 3.1136), (113.2016, 3.1051), (113.1635, 3.0964), (113.1155, 3.0873), (113.0655, 3.0779), (113.0144, 3.0683), (112.9525, 3.0583), (112.8994, 3.048), (112.8345, 3.0373), (112.7793, 3.0264), (112.7123, 3.0152), (112.6453, 3.0037), (112.5763, 2.9919), (112.5063, 2.9798), (112.4352, 2.9674), (112.3533, 2.9548), (112.2801, 2.9419), (112.1952, 2.9287), (112.1102, 2.9153), (112.034, 2.9017), (111.9361, 2.8879), (111.8481, 2.8739), (111.7581, 2.8597), (111.667, 2.8453), (111.5661, 2.8307), (111.473, 2.816), (111.3689, 2.801), (111.2639, 2.786), (111.1579, 2.7708), (111.0509, 2.7555), (110.9428, 2.74), (110.8239, 2.7245), (110.7138, 2.7088), (110.5928, 2.6931), (110.4709, 2.6772), (110.3578, 2.6613), (110.2338, 2.6453), (110.1087, 2.6292), (109.9826, 2.613), (109.8457, 2.5968), (109.7176, 2.5805), (109.5787, 2.5642), (109.4496, 2.5478), (109.3086, 2.5314), (109.1666, 2.5149), (109.0236, 2.4984), (108.8806, 2.4819), (108.7355, 2.4653), (108.5905, 2.4488), (108.4434, 2.4322), (108.2865, 2.4155), (108.1384, 2.3989), (107.9794, 2.3822), (107.8195, 2.3655), (107.6684, 2.3488), (107.5063, 2.3321), (107.3374, 2.3156), (107.1744, 2.2989), (107.0104, 2.2822), (106.8442, 2.2654), (106.6683, 2.2487), (106.5012, 2.232), (106.3242, 2.2152), (106.1452, 2.1985), (105.9662, 2.1818), (105.7862, 2.165), (105.6052, 2.1483), (105.4232, 2.1316), (105.2402, 2.1149), (105.0572, 2.0981), (104.8721, 2.0814), (104.6772, 2.0647), (104.492, 2.048), (104.295, 2.0313), (104.098, 2.0147), (103.9, 1.998), (103.701, 1.9813), (103.502, 1.9647), (103.301, 1.948), (103.1, 1.9314), (102.899, 1.9148), (102.6959, 1.8982), (102.483, 1.8816), (102.2789, 1.865), (102.0649, 1.8484), (101.8588, 1.8318), (101.6428, 1.8153), (101.4268, 1.7988), (101.2098, 1.7822), (100.9918, 1.7657), (100.7728, 1.7492), (100.5538, 1.7328), (100.3338, 1.7163), (100.1128, 1.6999), (99.89169, 1.6834), (99.65978, 1.667), (99.43769, 1.6506), (99.20477, 1.6343), (98.98066, 1.6179), (98.74665, 1.6016), (98.51164, 1.5852), (98.27574, 1.5689), (98.04964, 1.5527), (97.81264, 1.5364), (97.57562, 1.5202), (97.33752, 1.5039), (97.08962, 1.4877), (96.8506, 1.4716), (96.61061, 1.4554), (96.37051, 1.4393), (96.12058, 1.4232), (95.87949, 1.4071), (95.62759, 1.391), (95.38547, 1.375), (95.13258, 1.359), (94.88946, 1.343), (94.63548, 1.3271), (94.38145, 1.3111), (94.12645, 1.2952), (93.87144, 1.2793), (93.61545, 1.2635), (93.35946, 1.2477), (93.10343, 1.2319), (92.84642, 1.2161), (92.58843, 1.2004), (92.33042, 1.1846), (92.07232, 1.169), (91.8034, 1.1533), (91.54331, 1.1377), (91.2744, 1.1221), (91.0133, 1.1065), (90.7434, 1.091), (90.48229, 1.0755), (90.21139, 1.0601), (89.9493, 1.0446), (89.67728, 1.0292), (89.40428, 1.0139), (89.13137, 0.99855), (88.86826, 0.98325), (88.59427, 0.96799), (88.32026, 0.95277), (88.04527, 0.93758), (87.77126, 0.92242), (87.4972, 0.90731), (87.21732, 0.89222), (86.94719, 0.87718), (86.66711, 0.86217), (86.3773, 0.8472), (86.10719, 0.83227), (85.82721, 0.81738), (85.5472, 0.80252), (85.26721, 0.7877), (84.9872, 0.77292), (84.7071, 0.75819), (84.41721, 0.74349), (84.1371, 0.72883), (83.84721, 0.71421), (83.5671, 0.69963), (83.27721, 0.68509), (82.99711, 0.6706), (82.70711, 0.65615), (82.41721, 0.64173), (82.1371, 0.62736), (81.8471, 0.61304), (81.55722, 0.59875), (81.27709, 0.58451), (80.98712, 0.57031), (80.697, 0.55616), (80.39711, 0.54205), (80.10722, 0.52798), (79.8271, 0.51396), (79.53701, 0.49999), (79.23711, 0.48605), (78.9471, 0.47217), (78.65701, 0.45833), (78.3571, 0.44453), (78.06712, 0.43078), (77.77701, 0.41708), (77.4771, 0.40343), (77.18701, 0.38982), (76.8871, 0.37626), (76.59711, 0.36274), (76.30701, 0.34928), (76.0071, 0.33586), (75.7169, 0.32249), (75.4071, 0.30917), (75.11701, 0.29589), (74.8171, 0.28267), (74.52701, 0.26949), (74.22711, 0.25636), (73.937, 0.24329), (73.63691, 0.23026), (73.3271, 0.21728), (73.03699, 0.20436), (72.73712, 0.19148), (72.4469, 0.17865), (72.13712, 0.16588), (71.84701, 0.15315), (71.547, 0.14048), (71.24701, 0.12786), (70.947, 0.11528), (70.64701, 0.10277), (70.3471, 0.090298), (70.05691, 0.077883), (69.74712, 0.06552), (69.457, 0.05321), (69.1569, 0.040952), (68.84709, 0.028747), (68.557, 0.016595), (68.25701, 0.0)]
polygon_points = [] #creates a empty list where we will append the points to create the polygon
for xyvalue in avg_coords:
polygon_points.append([xyvalue[0],xyvalue[1]]) #append all xy points for curve 1
for xyvalue in model_coords[::-1]:
polygon_points.append([xyvalue[0],xyvalue[1]]) #append all xy points for curve 2 in the reverse order (from last point to first point)
for xyvalue in avg_coords[0:1]:
polygon_points.append([xyvalue[0],xyvalue[1]]) #append the first point in curve 1 again, to it "closes" the polygon
line_non_simple = LineString(polygon_points) #converts the intersecting array to linestring
mls = unary_union(line_non_simple) #not quite sure what this does but it works
avg_poly = []
model_poly = []
for xyvalue in avg_coords:
avg_poly.append([xyvalue[0],xyvalue[1]])
for xyvalue in model_coords:
model_poly.append([xyvalue[0],xyvalue[1]])
line_non_simple = LineString(polygon_points)
mls = unary_union(line_non_simple)
Area_cal =[]
for polygon in polygonize(mls):
Area_cal.append(polygon.area)
print(polygon.area)# print area of each section
Area_poly = (np.asarray(Area_cal).sum())
print(Area_poly)#print combined area
When plotted it looks like this

So to create simple polygons from a complex polygon (self-intersecting), is to use turf.unkink() for Javascript turf.js. The area can also be found using the polygon area equation.
Example code below.
Firstly, join the end point of the first curve with end of second curve, then join the start point of the second curve with start point of the first point. This creates a single polyon of the two curves.
Like the following:
function zip(arrays) {
return arrays[0].map((_,i) => {
return arrays.map((array) => {return array[i]})
});
}
var xy_1 = zip([x1,y1]);
var xy_2 = zip([x2,y2]);
var newPolygon = [] //creates a empty list where we will append the points to create the polygon
for(var i = 0; i < xy_1.length; i++)
newPolygon.push([xy_1[i][0],xy_1[i][1]]) //append all xy points for curve 1
for(var i = xy_2.length - 1; i >= 0; i--)
newPolygon.push([xy_2[i][0],xy_2[i][1]]) //append all xy points for curve 2 in the reverse order (from last point to first point)
console.log(newPolygon)
Then using the unkink() function from turf.js you can simplify the self-intersecting polygon into simple polygons and then find area.
NOTE: The area is calculated in Cartesian form, as turf.area gives different area.
const line_non_simple = turf.polygon([some_intersecting_polygon_coords])
var result = turf.unkinkPolygon(line_non_simple);
var A_modelArea = []
function findModelArea(multiCoords){
//Split multicoords to x, y
var xNew = []
var yNew = []
for(var i = 0; i < multiCoords.length; i++ ){
xNew.push(multiCoords[i][0]);
yNew.push(multiCoords[i][1])
}
//Finds the area using the x, y
var avg_sum = []
for(var i = 0; i < multiCoords.length -1; i++ ){
avg_sum.push(xNew[i]*yNew[i+1]-xNew[i+1]*yNew[i])
}
var avg_area = Math.abs(0.5*(avg_sum.reduce((a, b) => a + b)))
A_modelArea.push(avg_area);
}
result.features.map(i => findModelArea(i.geometry.coordinates[0]))
console.log(A_modelArea.reduce((a, b) => a + b))

I'm working on this self exploration which I want to show a chart that shows how many anime that have comedy genre or fantasy genre. The data for my chart is going to be an external json file (anime.json) on my computer and it's not yet contain the total of how many anime that have comedy or fantasy genre, so I need to do some loop to know that. I try this to make it happen by trying with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let data;
$.getJSON("anime.json", function(json){
data = json;
});
let comedy = 0;
let fantasy= 0;
for (i = 0; i < data.length; i++)
{
let genres = data[i]['genres']
for (j = 0; j < genress.length; j++)
{
let value = genres[j].trim()
if (value.toLowerCase() == 'comedy')
{
comedy = comedy +1;
}
if (value.toLowerCase() == 'fantasy')
{
fantasy = fantasy + 1;
}
}
}
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Comedy', 'Super Natural'],
datasets:[{
label : 'Genre',
data: [
comedy,
superNatural
],
}]
},
options : {},
});
</script>
</body>
</html>
But when I open this html on my browser, It came up empty so I'm wondering what is the correct way to do it. And this is my json file (and I have like 25 or 30 of them):
[
{
"cover_title": "Haikyuu!! TO THE TOP",
"cover_studio": "Production I.G",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx106625-UR22wB2NuNVi.png",
"format": "TV",
"duration": "84%",
"description": "The fourth season of Haikyuu!!\n\nThe Karasuno High School Volleyball Club finally won their way into the nationals after an intense battle for the Miyagi Prefecture Spring Tournament qualifiers. As they were preparing for the nationals, Kageyama is invited to go to All-Japan Youth Training Camp. At the same time, Tsukishima is invited to go to a special rookie select training camp for first-years in Miyagi Prefecture. Hinata feels panic that he\u2019s being left behind as one of the first-years and then decides to show up at the Miyagi Prefecture rookie select training camp anyway...\n\n(Source: Crunchyroll)",
"genres": [
"Comedy ",
" Drama ",
" Sports"
]
},
{
"cover_title": "Eizouken ni wa Te wo Dasu na!",
"cover_studio": "Science SARU",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx109298-YvjfI88hX76T.png",
"format": "TV",
"duration": "79%",
"description": "First year high schooler Midori Asakusa loves anime so much, she insists that \"concept is everything\" in animation. Though she draws a variety of ideas in her sketchbook, she hasn't taken the first step to creating anime, insisting that she can't do it alone. The producer-type Sayaka Kanamori is the first to notice Asakusa's genius. Then, when it becomes clear that their classmate, charismatic fashion model Tsubame Mizusaki, really wants to be an animator, they create an animation club to realize the \"ultimate world\" that exists in their minds.\n\n(Source: Crunchyroll)",
"genres": [
"Adventure ",
" Comedy"
]
},
{
"cover_title": "Made in Abyss: Fukaki Tamashii no Reimei",
"cover_studio": "Kinema Citrus",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx100643-fPH9OgEKKvcI.jpg",
"format": "Movie",
"duration": "78%",
"description": "Dawn of the Deep Soul continues the epic adventure of plucky Riko and Reg who are joined by their new friend Nanachi. Together they descend into the Abyss\u2019 treacherous fifth layer, the Sea of Corpses, and encounter the mysterious Bondrewd, a legendary White Whistle whose shadow looms over Nanachi\u2019s troubled past. Bondrewd is ingratiatingly hospitable, but the brave adventurers know things are not always as they seem in the enigmatic Abyss...\n\n(Source: Sentai Filmworks)",
"genres": [
"Adventure ",
" Fantasy ",
" Sci-Fi ",
" Drama"
]
}]
Thank you!

Your code seems to be fine, the only thing I can see is you are not handling the callback properly. The code you have written after $.getJSON should be placed inside the callback function. As because of the async behavior your data is set after other codes are executed. If you open console you may see error as cannot read property length of undefined as initially, the data is undefined.
Below snippet should fix your problem.
<script>
$.getJSON("anime.json", function (json) {
const data = json;
let comedy = 0;
let fantasy = 0;
for (i = 0; i < data.length; i++) {
let genres = data[i]["genres"];
for (j = 0; j < genress.length; j++) {
let value = genres[j].trim();
if (value.toLowerCase() == "comedy") {
comedy = comedy + 1;
}
if (value.toLowerCase() == "fantasy") {
fantasy = fantasy + 1;
}
}
}
let myChart = document.getElementById("myChart").getContext("2d");
let massPopChart = new Chart(myChart, {
type: "bar",
data: {
labels: ["Comedy", "Super Natural"],
datasets: [
{
label: "Genre",
data: [comedy, superNatural],
},
],
},
options: {},
});
});
</script>

I am working on Jquery project using Leaflet map . My project is getting data json coordinates for flights position . My code below is working fine , but the problem is l have repeat markers on map while data is updating . l did some steps to remove previous markers position then shows new markers position, but l have error 'types' can only be used in a .ts file.
markers repeated on map while data is updating
My code
$(document).ready(function () {
var heading ;
coords: L.Marker[]
var type ;
// map initializing
var coords = [33,44]; // the geographic center of our map
var zoomLevel = 6 // the map scale.
var map = L.map('map').setView(coords, zoomLevel);
L.tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
attribution: 'Map data ©',
maxZoom: 18
}).addTo(map);
// Aircraft data
setInterval(function(){
$.ajax('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
type: 'GET',
dataType: 'jsonp',
timeout: 5000
}).done(function (data, textStatus, jqXHR) {
// Error is here ------------ under marker //
coords ? coords.forEach((marker:marker) => {
marker.remove();
}) : '';
coords = [];
Object.keys(data)
.map(key => data[key])
.map((position) => ({
lat: position[1],
lng: position[2],
callSign: position[13],
heading: position[3],
AircraftType: position[8]
})).filter(position => position.lat && position.lng && position.callSign
&& position.heading
&& position.AircraftType).forEach(i => {
console.log(i.lat, i.lng, i.heading)
coords.push( new L.Marker([i.lat, i.lng], {
icon: new L.DivIcon({
html: ` <div style="width:120px;";>
<div class="temp-${i.heading} ${type}"></div>
<span style="color:white;background-color: midnightblue;margin: 4px;padding: 4px;border-radius: 3px;">
${i.callSign}
</span
></div>`
})
}).addTo(marker))
})
},5000)
});

Looks like you are using a type here:
coords ? coords.forEach((marker:marker) => {
The first marker is your variable and the second one after the colon is the type used in TypeScrypt. Try removing the colon and the marker there.
coords ? coords.forEach((marker) => {

I'm new to programming in general and workig with p5.js and Leaflet.
I am trying to draw multiple circles on a map with Leaflet.
I have the coordinates of the capitals of all the countries in the world in a 2D-array.
I am looping through the array to create a circle marker for each row of coordinates. It works so far, but the problem is, that i really only get one circle object, called "circle" with only one pair of coordinates.
My Question: How can i create a new object with a different name for every loop, so every circle is really an individual object, that can handle events individually?
Here is the code so far:
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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
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);
});
}
Any suggestions, how to get a grasp on that? Can I maybe change the constructor somehow to add a different name-index for each row-index or something?
Sorry for the messy code ^^ I am open to edit-suggestions as well.
Cheers!

If you want to keep a reference to each circle, you can either add them to an array or a dict. I would use an array since you don't have anything to distinguish each circle like a string name.
Here is how I would edit the code.
Remember to also declare as var i or let i the variables inside the loops.
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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
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);
});
}
}

I am using Google Map to show some places and users in it via the info window.
Google Map Script:
<script>
var markers = [
['<p>New York</p> <p>More information</p>', 40.769090, -74.002740],
['<p>Washington, Finland</p> <p>More information</p>', 38.908127, -77.034863],
];
function initializeMaps() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(40.769090, -74.002740),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var image = 'img/logos.png';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}}</script>
The Script for Map Info window
<script>
var success = function(data) {
$(".ID").append(data.sessions[0].ID);
$(".Users").append(data.sessions[0].Users);
$.each(data.sessions[0].Location, function(i, value){
$(".Location").append('<li>' + value.name + '</li>');
})
}
$.getJSON("sample.json", success);
</script>
The JSON file:
{"sessions":[
{
"ID":"123",
"Users":"4",
"Location":
{ "New York": [
{ "id": 1, "name": "Mat" },
{ "id": 2, "name": "Cat" }
],
"Washington": [
{ "id": 1, "name": "Rat" },
{ "id": 2, "name": "Sat" }
]
}
},
{
"ID":"456",
"Users":"1",
"Location":
{ "New York": [
{ "id": 1, "name": "Bat" }
]
}
}]}
The HTML:
<div id="map_canvas"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">More Details</h3>
</div>
<div class="modal-body">
<p class="ID">ID</p>
<ul class="Location"></ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
The problem I am facing is to show a specific user in its respective place.
For example when I click new york in the marker, it should show me the info window with two sessions and its details (according to the JSON file). I am not sure how to deal with marker ID and Nested JSON. Please help.

There are a few problems in your yode you have to fix.
First:
<script>
var success = function(data) {
$(".ID").append(data.sessions[0].ID);
$(".Users").append(data.sessions[0].Users);
$.each(data.sessions[0].Location, function(i, value){
$(".Location").append('<li>' + value.name + '</li>');
})
}
$.getJSON("sample.json", success);
</script>
That Script is loading when calling the page. So it puts the values for the modal in it at the beginning. So there are always the same information in it.
Good way should be to load the JSON File in the beginning and write it in a global variable.
When pushing the "More Information" button in your marker, you should call a javascript function with an id of the pushed city as parameter (not name, they aren't unique).
You have to put that id instead of the city name in your json.
Now the javascript function, which is called after pushing the "more information" button, should go in an iterative way (for each oder for) over the different sessions in your json and should look for an Location with the matching id. When the id matches, append the data to the model.
The usage of nested JSON is really easy.
When you want to get the information of Mat in New york in the first session, you have to use the following code:
data.sessions[0].Location.NewYork[0]
Have a look, that you better write the identifiers without a space.
So you can write a for construct like :
for(var i = 0; i<data.sessions.length;i++){
var locations = data.sessions[i].Location;
if ('Washington' in locations) {
//Code to add it in your city information window
console.log(locations.Washington);
}
}
the variable id is the passed parameter of the clicked marker.
You also should check your whole code, there are a few parts you should better change (The model won't really work with more than 1 Session)