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);
});
}
}
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 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 tried to convert this SVG image Stockholm City border SVG (Stockholm City border) to Google map Polygon.
But final polygon is not ok. There is the code:
var width = 735, // width of SVG
height = 682; // height of SVG
function toLongitude(x) {
return x / height + 18.0780778;
}
function toLatitude(y) {
return y / width + 59.3325755;
}
function onLoad() {
// The SVG path;
var path = "M735.4,682.4 l0-1.2-0.2-2,0-2.5l1.5-2.9,0.3-6,1.3-9l0.9-2.8,0.1-5.8,0.7-8.8 l0.6-3.3,0.3-6.8,0.9-10.2l0.4-2.4-0.5-4.9,0.8-7.2l-0.6-3.1,0.7-5.7,2.7-8.1l0.4-0.5,0.6-1.2,0.9-1.9l-2.8,0.2-5.2,0.2-7.7,0.6 l-4.1,0.7-8.2,1.4-12.2,2.5l-0.8,0.2-2.1,0.4-2.7,0l-1-0.7-2.2,0-2.8-0.4l-1.8-2.1-3.6-3.9-4.9-5.9l-0.8-1.2-2.3-2.1-2.3-3.9 l0-1.2-1.1-2.5-1.6-3.4l-2-0.9-3.9-1.8-5.8-2.7l1-3.2-2-6.3,0-9.5l-2.7-3.5-2-7.5-2.1-11.4l1.5-1.2,0.6-2.7,0.7-4.1 l0.1-1.4,0-2.9,0-4.1l-9-2.7-17.7-5.3-26.3-7.9l-0.3-0.1-0.5-0.5-0.8-0.7l-0.7-3.6,0.7-7.3-0.8-10.7l0.4-1,0.8-2,1.2-3 l-0.1-0.1-0.6-0.4-0.6-0.6l0.5-2.9,1.2-5.8,2.2-8.4l-1.8-2.5-3.5-4.8-5.2-7.1l-0.7-1-1.5-1.9-2.3-2.9l-0.9-1-2-1.9-2.5-3.1 l-0.5-1.3-1.8-1.5-2.7-2.3l-4.1-3.7-7.8-7.7-12.4-10.8l-2-1.4-3.6-3.3-5.5-5l-2.1-1.8-3.9-3.9-6.4-5.3l-1.4-0.8-2.7-2.3-3.4-3.7 l-1.6-3.3-2.5-6.9-3.8-10.4l-0.6-1.5-0.6-3.1-0.8-4.2l4.7-6,8.4-12.1,12.5-17.8l0.3-0.5,0.6-1,0.9-1.8l-1.1,0.2-1.8,0.4-2.5,0.6 l-1.5,0.3-2.7-0.6-4.1-0.6l-2.9-0.1-5.9-0.1-8.8,0l-0.6,0-1.3,0.5-1.8,0.7l-2.8-1.4-6.4-1.1-9.1-3.4l1.1-0.7,1.8-1.2,2.7-1.8 l0-0.6,0-1.3,0-2.5l0.5-0.4,1.3-1.1,2-1.6l-0.4-2.1-1-4.2-1.2-6.3l-0.2-2.3,0-4.7,0-6.7l-0.9-1.3-1.6-2.3-2.4-3.2 l-0.7-0.9-1.2-2.1-2.1-2.5l-2.5-1-2.8-2.9-3-4.8l-0.8-1.3-3.4-0.9-2.7-3.4l1.9-1,2.1-4,4.8-4.6l0.7-2.3,1.3-4.4,1.9-6.5 l1.7,0,3.1,0,4.6,0l2.2,0.1,4.3,0,6.3-0.7l1.4-0.4,2.8-1.1,4.2-1.3l1.2-0.1,2.6-0.3,3.9,0.3l1,0.4,2.4,0.4,3.4,0.1 l2.7-0.8,5.2-1.9,6.9-3.6l1.4-0.3,2.6-0.3,3.7-0.7l1.2-0.6,2.6,0.4,3.8-0.6l0.5-0.4,2-0.5,2.3-0.1l1.4,1.3,3.2,0.2,4.7,1.1 l1.3,0.8,3.4,0.5,5.1,0.8l2.6,0.5,5.1,1.3,7.7,2l4.7-2.7,10.4-4,14.5-7.7l0-0.8-0.2-1.4,0-1.9l1.5-3.4,2.6-6.9,3.9-10.4 l0.4-1,0.4-1.8,0.4-2.1l-1.4-2.4-2.5-4.3-3.7-6.2l0-4.4,0-8.9,0-13.3l-5.1-4.7-10.1-9.3-15.2-13.9l-4.2-3.9-8.3-7.8-13-11.2 l-0.5-0.4-1.2-0.7-1.8-1l-1-0.5-2.1-0.9-3-1.5l-4.1-2.4-8.2-4.6-12.4-6.7l-1-0.5-2-1.2-2.8-1.9l-1.9-1.6-2.9-3.8-4.2-5.8 l-4.2-6-8.5-12-12.5-18.3l-0.8-1.2-1.8-2.2-2.7-3.3l-0.4-2.6-0.7-5-1.1-7.5l-0.6-1-1-2.1-1.7-3l-3.1-3.6-6.2-7.1-9.4-10.7 l-2.2-2.5-4.7-4.9-6.7-7.6l-1-1.4-2.2-2.6-3.5-3.7l-1.4-1.2-3.5-1.2-5.2-1.5l-4.5-0.8-8.9-2.5-13.5-2.8l-0.7-1.3-2.3-0.3-3.3-0.9 l-1-0.7-2.2-1.1-3.2-1.8l-1.1-0.8-2.1-1.9-3.2-2.7l-1.9-1.4-4-2.7-6.1-4.1l-2.6-0.2-5.5-0.2-8.3-0.8l-1.3-0.3-2.5-0.4-3.8-0.6 l-1.4-0.2-2.8-0.7-4.1-0.6l-3.6,0.1-7.1-1.2-10.7-0.7l-0.2,0-0.5,0-0.7,0l-4.3-0.9-5.5-0.9-8.6,0l-1.1,0.3-2.2,0.6-3.4,1 l-0.4,1-1.6,2.3-0.7,3.4l0.9,1.2,0.2,2.3,0.6,3.4l-2.2,1.7-4.7,2.2-7.2,2.5l-0.2,1-0.4,2-0.7,3.1l2.3,3.8,4.1,8.2,7.1,12 l0.4,0.6,0.5,1.4,0.8,2.1l1.6,4.8,3.5,9.5,5,14.3l1.1,3.4,3.1,6.8,2.3,10.6l-0.7,2.5-3.8,2.8-4.9,4.6l-0.4,2.9-0.7,5.6-1.1,8.5 l-1.9,0.8-0.2,4.7-4,4.2l-0.4-0.9-0.9-1.7-1.4-2.9l-0.7,0.3-1.5,0.4-2.1,0.8l-2.3,1.5-4.3,3.4-6.7,4.7l-2.8,1.5-4.9,3.7-6.9,5.9 l-1.8,2-3.3,4.2-5,5.8l-0.4,2-0.9,3.7-1,5.4l-0.2,1.9,0.2,3.9-0.1,5.7l-0.2,1.3-1,2.5-1.4,3.5l-0.9-0.3-1.4-0.5-2-0.6 l-2-0.1-3.9,0-5.9,0l-2.8-0.1-5.2-0.9-7.1-2.6l-4.4-0.7-8.7-0.8-12.8-2.2l-1.6,0.7-3.1,1.4-4.7,2.1l-1.5,0.6-2.9,1.9-4.9,1.3 l-0.6-0.6-1.1-1.3-1.8-1.6l-2.7-1.4-4.8-3.5-7.1-5.3l-4-3.2-8.4-5.6-13.4-7.2l-1-0.3-2.1-0.7-2.6-1.5l-1.6-2.3-2.9-4.8-4.3-7.2 l-1.2-0.6-2.1-1.4-3.1-2.2l-1.1-0.8-2.3-1.5-3.3-2.4l-3.1-3-6.1-6-9.1-9.1l-0.6-0.7-1-1.7-1.2-2.6l-1.3-4.9-3.5-9.5-5.9-14 l-0.7-1.2-1.9-2.3-2.1-3.6l-0.3-2.1-1.6-3.3-3-4.6l-1.2-1.1-2.5-2.2-3.6-3.4l-1.1-1.2-2.7-2-3.8-3.2l-1-1.1-2.4-1.9-3.7-2.9 l0.3-0.3,0.5-0.5,0.8-0.9l-2.7-1.4-5.2-2.8-7.9-4.3l-0.4-1.1-0.7-2.3-1.1-3.5l-0.8-1.1-1.5-2.2-2.5-3.1l-1-0.9-2.1-1.8-3.3-2.4 l-2.1-1.1-3.9-2.6-6.3-3.1l-3.8-0.7-7.3-1.8-9.4-5.2l-0.3-0.6-1.3-0.8-2.2-1.4l0.6-1,1.2-2,1.7-2.9l-0.5-1-1.1-1.9-1.5-2.7 l2.4-6.3,2.4-6.4,6.8-9.1l0.3-0.2,0.7-0.1,1-0.3l1.8-1.5,3.4-2.9,3.5-5.4l0.1-2,0.7-4,1.4-5.8l0.6-1.5,1.6-2.7,2.6-4.3 l0.6,0,1.4,0,1.6,0l1.8-1,3.1-1.7,4.5-2.4l0.1-0.2,0-0.6,0.2-0.8l4.4-4.3,6.7-9.6,8-15.2l0.7-3,1.5-5.9,3.2-8.6 l1-1.6,2.2-3.2,3.1-4.9l0.7-1.4,1.8-2.5,3.3-3.3l2.7-1.4,5.4-2.8,7.9-4.1l1.1,0.4,2,1.3,3.2,0.3l0-0.7,0-1.4,0-2.1 l3.5-1.6,6.9-3.1,10.6-4.7l0.6,0.8,1.1,1.4,1.7,2l0.3,0.3,0.9,0.4,1.4,0.5l-5.6-5.6-11.5-10.7-17.3-15.8l-0.1-0.1-0.2-0.2-0.3-0.2 l-2.8-1.8-5.5-3.8-8-6l-1.6-1.4-3.7-2.3-5.3-3.8l-2.6-2.4-6-3.8-8.9-5.7l-6.1-4.1-11.7-8.6-17.2-13.2l-0.9-0.7-1.9-1.3-2.8-1.9 l-0.6,0.5-1.2,1-1.9,1.6l-4.2-3.5-7.3-7.6-10.2-11.8l-1.3-1.9-2.9-3.9-2.2-6.5l-2.6-2-5-4-7.7-6.1l0.6-1.9,1-3.9,1.8-5.8 l1.3-3.2,1.6-6.8,3.6-9.8l0.7-1.1,0.6-2.6,0.9-4l-1.9-1.6-3.7-3.1-5.3-4.4l-1.6,0-2.8,0-4.1,0l-0.3-0.3-0.7-0.6-1.1-1 l0-0.6,0-1.3,0-1.7l-1.3-2.4-3.7-2.5-5.8-3.2l-0.1,0.4-0.2,0.7-0.4,1.2l-1.8-0.2-3.5-0.5-4.9-1.7l0-1.2,0-2.3,0-3.4 l-0.6-0.9-1.2-1.7-1.7-2.4l-1.4,0-2.6,0-3.9,0l-2.1,2.2-4.3,4.4-6.4,6.7l-0.2,0.2-0.3,0.6-0.5,0.8l-1.7,2.6-2.6,5.3-2.2,8.3 l0.2,1.9-0.5,3.4-2,4.6l-0.6,0.5-1.4,0.9-2.1,1.4l0.2,0.1,0.4,0.3,0.5,0.4l-0.3,1.5-0.7,2.9-1.1,4.6l0.9,0.6,1.7,1.3,2.4,1.8 l0,0.9,0,1.6,0,2l2.1,2.4,4,4.7,5.9,7l-1.9,1.4-3.6,2.7-5.3,4l0.9,0.9,1.7,1.6,2.3,2.4l0.8,0.8,1.5,1.7,2.3,2.6 l-0.4,1.9,0.5,3.8,0.6,5.7l0.3,4.7,2.4,8.8,5.2,12.6l0,0.6,0,1.1,0,2l-0.7,0.5-1.5,1.1-2.4,1.8l-0.2,2-0.2,4-0.6,5.9 l-0.3,1.3-0.6,2.6-1.6,3.8l-1.8,2.2-3.7,4.4-4.7,7l-1,2.4-2.7,4.3-4.5,6l-3.2,3.1-7.4,5.2-11.5,7.2l-1.2,0.6-2.6,0.7-3.8,1.5 l-1.6,1-3.4,1.3-4.8,0.1l-1.6,1.4-3,2.7-4.4,4l1.3,2.6,3.8,4.6,6.1,6.7l1.2,1.1,2.2,2.2,1.8,4.4l-1,0.8-2.7,1.7-3.5,2.9 l-0.9,1.5-2.5,2.4-3.6,3.9l-1.2-0.7-2-2.4-3.5-1.6l-0.9,2.3-1.5,4.6-2.7,6.6l-1.3,2.2-2.8,4.3-4.7,6l-1.6,1.5-3,3.1-4.3,4.8 l-1.6,0.2-3.3,0.4-4.8,0.8l-2.7,0.7-5.4,1.2-7.3,3.4l-1.2,1.4-2.5,2.8-4.2,3.8l-3.9,2.3-6.6,5.6-9.3,9l-1.7,2-2.7,4.5-4.5,5.8 l-4.2,0.7-7.9,0.9-11.6,1l-3.9,0.1-7.3-1.7-11.1-1.5l0-1.3-0.4-2.7,0.1-3.5l0.9-1.3,0.4-2.6,0.6-3.8l0.2-1.3,0.6-2.5,0.7-3.8 l0.2-1.7,0.3-3.4,0.6-5.2l0.8-3.9,0.7-7.9,1-11.6l-0.6-0.6-1.3-0.9-1.5-1.4l-1.6-3.5-3.8-6.5-6.5-9.4l-0.7-0.8-1.4-1.8-1.7-2.7 l-0.9-3-0.8-3-3.6-5l0,1.9-1.7,1.8-2.9,2l-0.3,1.6-1.8,2.2-2.6,3.2l-0.9,1-1.6,2.1-2.6,3l-1.9,1.8-3.9,3.5-6.1,5.1 l-3.7,2.7-7,5.8-10.6,8.8l-0.4,0-0.9,0-1,0l-9.2-7.2-18.2-14.2-27.3-21.3l-8.4,6-16.6,11.8-24.7,17.6l0.2,0.4,0.4,0.9,0.5,1.4 l0.5,3,1.4,5.8,4.2,7.9l2.8,2.1,5.4,4.4,8.1,6.7l0.3,0.3,0.9,0.3,1.2,0.6l2.5,2.5,5.5,4.4,7.2,7.7l2.7,5.1,5.4,10.1,8,15.2 l1.7,3.4,3.6,6.7,5.4,10.1l1.4,2.6,2.6,5.3,4.2,8.5l-0.5,2.7,0.9,6-0.7,9.3l-0.2,0.3,0.1,0.8,0.2,1.2l1.1,3.3,2.3,6.6,3.4,9.9 l1.3,3.8,2.5,7.6,3.7,11.4l0.6,1.7,1.2,3.4,1.8,5.2l0.8-0.1,1.7,0.1,2.4-0.2l2.6-1.2,5.6-1,8.1-2.5l4.8-0.5,9.3-2.4,13.9-3.4 l1.5-0.3,2.9-0.8,4.2-0.6l4.5,3.6,8.9,7,13.2,10.4l-0.1,1.1,0.3,2,0.6,2.9l1.5,4.2,5.5,6.5,8.2,9.4l3.8-1.1,7.5-1.9,10.9-3.2 l2.5-1,4.2-0.4,6,1.1l1.5,1.3,3,2.6,4.7,3.6l2.8,1.7,5.4,3.8,8.2,5.5l2.5,1.6,4.8,3.4,7.3,4.9l2.2,1.3,4.5,2.9,5.9,4.8 l1.5,2.1,3.6,3.7,5.2,5.7l2.3,2.9,5.1,5.5,7.5,8.4l0.4,0.5,1.1,1.3,1.6,1.2l1.9-0.1,3.1,1.3,4.9,1.6l1.7,0.2,3.7,1,4.4,3.1 l0.5,1.4,1.7,2.5,2.8,4.1l4.4,1.1,8.4,3.4,11.2,6.9l2.6-0.8,4.9-1.5,7.2-2.2l5.9,5.4,11.7,10.8,17.5,16.1l0.6,0.6,1.1,1.3,1.8,1.6 l6.1,2.5,11.1,6.5,16.5,9.9l3,1.8,5.8,3.9,8.9,5.7l4.1,2.4,8.3,4.5,12.4,6.8l2.8,1.6,5.6,3,8,5l4,3.2,7.5,7,11.7,10 l3.9,2.9,6.3,6.9,9.2,10.6l-1.2,5.7-5.3,9.2-9.6,11.9l-4.6,0.7-8.6,1.3-12.6,1.9l-1,1.6-1.7,3.5-3.1,4.8l-1.5,1.4-3.7,2.1-5.4,3.1 l-1.6,0-3.1,0-4.6,0l-1.5,0-2.9,0-4,0l-1.2,0.8-2,1.5-2.8,2l-2.6,1.7-5.6,2.8-8.4,4.1l-2,0.9-3.9,1.7-6.1,2 l-1.7,0.2-3.6,0.5-4.9,1.4l-2.3,1.7-4.7,3.4-6.1,6l-1.7,3.3-3.3,4.5-6.7,6.1l-2.5,1.2-5.2,2.1-7.6,3.6l-1.5,1-3.6,1.3-5.8,2.2 l-0.5,0.7-1.5,1.5-2.4,2.6l-1.8,2.2-2.6,4.7-3.5,7.1l-1.2,3-2.6,4.5-5.2,4.8l-4,0.5-8,1.2-12,2l-4.1,0.7-8.2,1.5-12.3,2.3 l-0.3,3.8,1.2,7.5,0.7,11.3l0,0.3,0.4,0.6,0.4,0.8l0.1,2.2,0.5,4.5,0,6.5l-0.8,2.8-2.3,5.4-3.5,8.1l-0.6,1.3-1,2.5-1.5,3.8 l2,0.8,3.7,1.7,5.6,2.2l1.9,0.5,3.6,1.4,5.4,2.1l1.4,3.4,2.8,6.9,4,9.6l1.6,1.3,2.7,2.1,3.8,2.9l2.8-1.2,5-3,6.8-4.8 l2.7,0,5.2,0,7.6,0l0.1,0,0.2,0.1,0.4,0.3l0,0.9,0,1.9,0,3l1.9,0,3.7,0,5.4,0l0.4,1.7,0.8,3.2,1.2,4.7l2,0,3.7,0,5.5,0 l1.7-2.5,4.8-3,7.6-3.3l2.6-0.2,5.1-0.4,7.1-1.7l2.6-3.1,3.9-6.5,5.1-10l0.9-2.5,1.5-5,2.5-7.5l0.9-2.1,1.7-4.3,2.6-6.7 l0.1-0.1,0.3-0.5,0.6-0.5l2.2-0.5,3.4-1.9,4.6-3.5l3.5-4.7,8-8.4,13.8-10.8l2.7-1.1,5.4-2.2,8-3.4l3.2-1.4,6.2-3.1,9.4-4.4 l2.9-1.2,5.7-2.5,8.6-3.8l0.7-0.3,1.4-0.4,2-0.5l1.4,2.1-2.3,2.8-0.8,4.7l0.9-0.3,1.9-0.5,2.8-0.8l0.6,0.4,1,0.8,1.5,1.2 l-0.4,0.9-0.7,1.7-0.9,2.4l2.5,3.4,6.5,5.1,9.5,7.6l0.1,2.1,0.4,3.9,0.6,5.7l0.3,2.8-0.3,5.7-0.6,8.5l-1.4,1.3-0.1,3.1-0.8,4.4 l-0.8,1.5-0.6,3-0.6,3.9l0.8,1.8,1.3,3,2,4.6l4.5,1,4.8,5.1,6.3,8.3l1.7,0.3,2.5,1.5,3.1,2.7l0.4,0.1,0.7,0.2,1,0.3 l2.8,1,5,2.9,7.7,4.3l1.2,0.6,2.1,1.2,2.8,2.3l1.3,1.8,3,3.3,5.1,4.4l2.7,1.5,5.2,3.2,8,5l2,0,4.4,0,6.7,0l0.7,0,1.4,0,2.1,0.2 l2,0.7,4.1,1.3,6,2.1l5.6,2.3,11,4.9,16.7,7l4.1,1.5,6.7,4.6,10.5,6.8l1.7,0,3.7,0,5.8,0l0.7,0.8,1.4,1.6,2.3,2.7l0.5,0,1.3,0,2.3,0 l0,2.8,1.2,5.1,3.5,6.9l2.9,2.3,5.7,4.8,8.6,7.2l0.5,0.5,1,1,1.6,1.4l0.3,0.3,0.7,0.7,1.1,0.7l3,0.5,5.4,2.2,8.2,3.2 l5.8,2.1,11.4,4.6,17.1,7.1l1.1,0.5,2.1,0.8,3.5,0.5l0.9-1.1,1.9-2.2,3.1-3.7l5.5,5.9,10.7,11.5,16,17.1l-0.4,0.4-0.9,0.8-1.4,1.3 l1,2.1-1.4,4.2-0.3,6.6l1.2-0.6,2.2-1.2,3.2-1.7l0.1-1,0.2-1.8,0.3-2.6l0.7,0,1.2,0,1.9,0l0.3,0.6,0.6,1.3,1.1,1.9 l2.4,2.4,3.9,5.3,5.8,7.9l2.5,3.4,4.3,7.6,9.4,8.8l0.2,0,0.3,0.3,0.5,0.5l1.8,1.3,4.1,2.4,6.2,2.5l2.9,0.1,5.6,0.9,8.1,0.9 l8.7,3.8,17.1,7.5,26.1,9.5l0.5-1.8,0.9-3.3,1.2-4.5l5.5-2.5,10.7-4.9,15.9-7.3l0.4-1.2,0.8-2.5,1-3.4l1.1-0.5,1.8-0.8,2.5-1.1 l0.8-0.3,1.7-0.6,2.2-0.8l0.4-0.8,0.7-1.4,1-1.9l-1.2-1.9-1.3-4.3-2.9-6.1l-0.6-0.7-0.9-1.9-0.7-2.7l0.5-2.2,1.5-4.4,2.1-6.6 l0.3-1,0.3-2,1.5-2.2l1.3,0.6,2.6,1.1,4,1.7l0.8-0.9,1.5-1.7,2-2.4l0.6,0.4,1,0.6,1.3,0.8l2.1-1.5,4-2.9,5.7-4.2 l2.4,1.3,4.5,2.3,6.5,3.5l3.4,1.9,7,3.6,10.3,5.6l3.1,1.9,6.5,3,9.9,4.4l3.3,1.3,6.9,2.1,10.3,3.4l3.3,1.3,6.9,2.2,10.3,3.4 l4.9,1.7,9.7,3.5,14.7,4.9l0.3,0.8,0.6,1.6,0.9,2.4l0.3,1.2,1.2,1.8,2.4,2.2l4.6,1.7,9.3,3.4,13.9,5.1 C731.8,681.6,733.4,681.9,735.4,682.4z";
var points = path.match(/(\d+)/g);
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(59.3325755, 18.0780778),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Map polygon coordinates
var polyCoordinates = [];
for (var i = 0; i < points.length; i += 2) {
var longitude = toLongitude(parseInt(points[i])),
latitude = toLatitude(parseInt(points[i + 1]));
console.log(latitude + ', ' + longitude);
polyCoordinates.push(new google.maps.LatLng(latitude, longitude));
}
var polygon = new google.maps.Polygon({
paths: polyCoordinates,
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#ffff99',
fillOpacity: 0.85
});
polygon.setMap(map);
}
#map{
height: 100 %;
}
html, body{
height: 100 %;
margin : 0;
padding : 0;
}
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=onLoad" async defer></script>
</body>
From SVG image I extracted path from path id="City_border", remove absolute coordinates from the start and end of SVG path and replace "c" with "l" (curve to lines).
But I did something wrong.
Any idea?
Your code seems not ok with polygon , Try out this points:
<!DOCTYPE html>
<html>
<body>
<svg height="1000" width="1000">
<polygon points="735.400 682.400, 735.400 679.900, 736.700 670.900, 737.400 662.100, 738.300 651.900, 739.100 644.700, 741.800 636.600, 742.700 634.700, 735.000 635.300, 722.800 637.800, 720.100 637.800, 717.300 637.400, 712.400 631.500, 710.100 627.600, 708.500 624.200, 702.700 621.500, 702.700 612.000, 700.600 600.600, 701.300 596.500, 701.300 592.400, 675.000 584.500, 674.200 583.800, 673.400 573.100, 674.600 570.100, 674.000 569.500, 676.200 561.100, 671.000 554.000, 668.700 551.100, 666.200 548.000, 663.500 545.700, 651.100 534.900, 645.600 529.900, 639.200 524.600, 635.800 520.900, 632.000 510.500, 631.200 506.300, 643.700 488.500, 644.600 486.700, 642.100 487.300, 638.000 486.700, 629.200 486.700, 627.400 487.400, 618.300 484.000, 621.000 482.200, 621.000 479.700, 623.000 478.100, 621.800 471.800, 621.800 465.100, 619.400 461.900, 617.300 459.400, 614.300 454.600, 611.600 451.200, 616.400 446.600, 618.300 440.100, 622.900 440.100, 629.200 439.400, 633.400 438.100, 637.300 438.400, 640.700 438.500, 647.600 434.900, 651.300 434.200, 655.100 433.600, 657.400 433.500, 662.100 434.600, 667.200 435.400, 674.900 437.400, 689.400 429.700, 689.400 427.800, 693.300 417.400, 693.700 415.300, 690.000 409.100, 690.000 395.800, 674.800 381.900, 661.800 370.700, 660.000 369.700, 657.000 368.200, 644.600 361.500, 641.800 359.600, 637.600 353.800, 625.100 335.500, 622.400 332.200, 621.300 324.700, 619.600 321.700, 610.200 311.000, 603.500 303.400, 600.000 299.700, 594.800 298.200, 581.300 295.400, 578.000 294.500, 574.800 292.700, 571.600 290.000, 565.500 285.900, 557.200 285.100, 553.400 284.500, 549.300 283.900, 538.600 283.200, 537.900 283.200, 529.300 283.200, 525.900 284.200, 525.200 287.600, 525.800 291.000, 518.600 293.500, 517.900 296.600, 525.000 308.600, 525.800 310.700, 530.800 325.000, 533.100 335.600, 528.200 340.200, 527.100 348.700, 523.100 352.900, 521.700 350.000, 519.600 350.800, 512.900 355.500, 506.000 361.400, 501.000 367.200, 500.000 372.600, 499.900 378.300, 498.500 381.800, 496.500 381.200, 490.600 381.200, 483.500 378.600, 470.700 376.400, 466.000 378.500, 461.100 379.800, 459.300 378.200, 452.200 372.900, 438.800 365.700, 436.200 364.200, 431.900 357.000, 428.800 354.800, 425.500 352.400, 416.400 343.300, 415.200 340.700, 409.300 326.700, 407.200 323.100, 404.200 318.500, 400.600 315.100, 396.800 311.900, 393.100 309.000, 393.900 308.100, 386.000 303.800, 384.900 300.300, 382.400 297.200, 379.100 294.800, 372.800 291.700, 363.400 286.500, 361.200 285.100, 362.900 282.200, 361.400 279.500, 368.200 270.400, 369.200 270.100, 372.700 264.700, 374.100 258.900, 376.700 254.600, 378.300 254.600, 382.800 252.200, 383.000 251.400, 391.000 236.200, 394.200 227.600, 397.300 222.700, 400.600 219.400, 408.500 215.300, 411.700 215.600, 411.700 213.500, 422.300 208.800, 424.000 210.800, 425.400 211.300, 408.100 195.500, 407.800 195.300, 399.800 189.300, 394.500 185.500, 385.600 179.800, 368.400 166.600, 365.600 164.700, 363.700 166.300, 353.500 154.500, 351.300 148.000, 343.600 141.900, 345.400 136.100, 349.000 126.300, 349.900 122.300, 344.600 117.900, 340.500 117.900, 339.400 116.900, 339.400 115.200, 333.600 112.000, 333.200 113.200, 328.300 111.500, 328.300 108.100, 326.600 105.700, 322.700 105.700, 316.300 112.400, 315.800 113.200, 313.600 121.500, 311.600 126.100, 309.500 127.500, 310.000 127.900, 308.900 132.500, 311.300 134.300, 311.300 136.300, 317.200 143.300, 311.900 147.300, 314.200 149.700, 316.500 152.300, 317.100 158.000, 322.300 170.600, 322.300 172.600, 319.900 174.400, 319.300 180.300, 317.700 184.100, 313.000 191.100, 308.500 197.100, 297.000 204.300, 293.200 205.800, 288.400 205.900, 284.000 209.900, 290.100 216.600, 291.900 221.000, 288.400 223.900, 284.800 227.800, 281.300 226.200, 278.600 232.800, 273.900 238.800, 269.600 243.600, 264.800 244.400, 257.500 247.800, 253.300 251.600, 244.000 260.600, 239.500 266.400, 227.900 267.400, 216.800 265.900, 216.900 262.400, 217.500 258.600, 218.200 254.800, 218.800 249.600, 219.800 238.000, 218.300 236.600, 211.800 227.200, 210.100 224.500, 206.500 219.500, 203.600 221.500, 201.000 224.700, 198.400 227.700, 192.300 232.800, 181.700 241.600, 180.700 241.600, 153.400 220.300, 128.700 237.900, 129.200 239.300, 133.400 247.200, 141.500 253.900, 142.700 254.500, 149.900 262.200, 157.900 277.400, 163.300 287.500, 167.500 296.000, 166.800 305.300, 167.000 306.500, 170.400 316.400, 174.100 327.800, 175.900 333.000, 178.300 332.800, 186.400 330.300, 200.300 326.900, 204.500 326.300, 217.700 336.700, 218.300 339.600, 226.500 349.000, 237.400 345.800, 243.400 346.900, 248.100 350.500, 256.300 356.000, 263.600 360.900, 269.500 365.700, 274.700 371.400, 282.200 379.800, 283.800 381.000, 288.700 382.600, 293.100 385.700, 295.900 389.800, 307.100 396.700, 314.300 394.500, 331.800 410.600, 333.600 412.200, 350.100 422.100, 359.000 427.800, 371.400 434.600, 379.400 439.600, 391.100 449.600, 400.300 460.200, 390.700 472.100, 378.100 474.000, 375.000 478.800, 369.600 481.900, 365.000 481.900, 361.000 481.900, 358.200 483.900, 349.800 488.000, 343.700 490.000, 338.800 491.400, 332.700 497.400, 326.000 503.500, 318.400 507.100, 312.600 509.300, 310.200 511.900, 306.700 519.000, 301.500 523.800, 289.500 525.800, 277.200 528.100, 277.900 539.400, 278.300 540.200, 278.300 546.700, 274.800 554.800, 273.300 558.600, 278.900 560.800, 284.300 562.900, 288.300 572.500, 292.100 575.400, 298.900 570.600, 306.500 570.600, 306.900 570.900, 306.900 573.900, 312.300 573.900, 313.500 578.600, 319.000 578.600, 326.600 575.300, 333.700 573.600, 338.800 563.600, 341.300 556.100, 343.900 549.400, 344.500 548.900, 349.100 545.400, 362.900 534.600, 370.900 531.200, 380.300 526.800, 388.900 523.000, 390.900 522.500, 390.100 527.200, 392.900 526.400, 394.400 527.600, 393.500 530.000, 403.000 537.600, 403.600 543.300, 403.000 551.800, 402.200 556.200, 401.600 560.100, 403.600 564.700, 409.900 573.000, 413.000 575.700, 414.000 576.000, 421.700 580.300, 424.500 582.600, 429.600 587.000, 437.600 592.000, 444.300 592.000, 446.400 592.200, 452.400 594.300, 469.100 601.300, 479.600 608.100, 485.400 608.100, 487.700 610.800, 490.000 610.800, 493.500 617.700, 502.100 624.900, 503.700 626.300, 504.800 627.000, 513.000 630.200, 530.100 637.300, 533.600 637.800, 536.700 634.100, 552.700 651.200, 551.300 652.500, 551.000 659.100, 554.200 657.400, 554.500 654.800, 556.400 654.800, 557.500 656.700, 563.300 664.600, 572.700 673.400, 573.200 673.900, 579.400 676.400, 587.500 677.300, 613.600 686.800, 614.800 682.300, 630.700 675.000, 631.700 671.600, 634.200 670.500, 636.400 669.700, 637.400 667.800, 634.500 661.700, 633.800 659.000, 635.900 652.400, 637.400 650.200, 641.400 651.900, 643.400 649.500, 644.700 650.300, 650.400 646.100, 656.900 649.600, 667.200 655.200, 677.100 659.600, 687.400 663.000, 697.700 666.400, 712.400 671.300, 713.300 673.700, 715.700 675.900, 729.600 681.000, 735.400 682.400" style="fill:white;stroke:black;stroke-width:2" />
</svg>
</body>
</html>
I am working with the javascript Google maps API and I am looking to restrict the viewing area of the map to only show PA. I currently have some kml data being used to display the county lines in PA. Now I just need to keep the user within the state of PA. How do I go about setting a restriction on the map in javascript?
I have looked up other posts regarding holes? Like cutting PA out of the map and the rest of the world is a polygon that gets its colored changed and then PA is still the main focus. I have no idea how to implement such a feature though. I am very new with working with Google Maps API.
get a source for the geographic coordinates for the state's boundaries (One source would be http://www.gadm.org).
Invert that polygon (example) and display it on a Google Maps Javascript API v3 map (note that KmlLayer doesn't seem to handle KML with holes, so the example uses a third party KML parser).
Restrict the map to the area of Pennsylvania
proof of concept fiddle
code snippet (state polygon simplified to fit):
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
minZoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.719429, -80.519562),
new google.maps.LatLng(42.267879, -74.690033));
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var geoxml = new geoXML3.parser({
map: map,
zoom: false,
suppressInfoWindows: true,
});
geoxml.parseKmlString(PAstr);
var lastCenter = bounds.getCenter();
var polygon = new google.maps.Polygon({
path: geoxml.docs[0].gpolygons[0].getPaths().getAt(1)
});
google.maps.event.addListener(map, 'center_changed', function() {
var center = map.getCenter();
if (!google.maps.geometry.poly.containsLocation(center, polygon)) {
map.setCenter(lastCenter);
} else {
lastCenter = center;
}
});
});
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var PAstr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.2"><Document><name>United States divisions. Level 1</name><description><![CDATA[GADM boundaries.]]></description><Style id="14"><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>FF6E6E6E</color><fill>1</fill></PolyStyle></Style><Placemark><name>Pennsylvania</name><description><![CDATA[State]]></description><styleUrl>#14</styleUrl><visibility>1</visibility><MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>180,85 90,85 0,85 -90,85 -180,85 -180,0 -180,-85 -90,-85 0,-85 90,-85 180,-85 180,0 180,85</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs><LinearRing><coordinates>-79.7624969482421,42.2678794860841 -79.7633285522461,42.1857109069827 -79.7627868652343,42.0479621887208 -79.7625885009766,42.0206985473635 -79.7624206542968,41.9984512329102 -79.6110916137694,41.99813079834 -79.5225830078124,41.9979400634767 -79.2611694335937,41.9980888366699 -79.1505813598633,41.9985389709475 -79.0634460449219,41.9986991882325 -78.9991912841796,41.998649597168 -78.9788131713866,41.9985809326172 -78.9694213867187,41.998561859131 -78.9465789794921,41.9988212585449 -78.9441986083984,41.9988021850587 -78.922492980957,41.9987907409671 -78.7538909912109,41.9986915588379 -78.7409210205078,41.9986801147462 -78.6284790039062,41.9990615844728 -78.4834060668945,41.9995422363281 -78.3443069458007,41.9997291564943 -78.3060302734375,42.0001220703126 -78.2905731201172,41.9997901916504 -78.2265167236328,41.9998817443848 -78.2086181640624,41.9999809265137 -77.9942932128906,41.9989509582521 -77.9662170410156,41.9988098144534 -77.8686218261718,41.9989204406741 -77.7512664794922,41.9990386962892 -77.7030868530273,41.9990921020507 -77.688362121582,41.9991989135744 -77.6096191406249,41.9997901916504 -77.4394073486328,42.0010490417482 -77.1767425537108,42.000171661377 -77.113296508789,42.0009918212892 -76.965103149414,42.0023117065431 -76.9291076660156,42.0024108886719 -76.9095230102538,42.0024719238282 -76.8965530395507,42.0026092529297 -76.6476364135742,42.001880645752 -76.6334381103514,42.001720428467 -76.5963821411133,42.0013122558594 -76.5618438720703,42.000919342041 -76.55313873291,42.0008316040039 -76.5228729248046,42.0004920959474 -76.4660491943359,41.9998512268067 -76.3826065063476,41.9989204406741 -76.1466979980469,41.9991302490234 -76.1165161132812,41.9991607666016 -76.1060333251953,41.9990615844728 -75.8490295410156,41.9986610412598 -75.7614364624023,41.9986991882325 -75.6029205322266,41.9987716674805 -75.6015090942383,41.9987716674805 -75.5984268188477,41.998779296875 -75.4833908081054,41.9989700317383 -75.3545074462891,41.9991912841799 -75.3483428955078,41.9969100952151 -75.34464263916,41.9946403503418 -75.342788696289,41.9928207397461 -75.3403320312499,41.990089416504 -75.3398513793945,41.9870719909669 -75.3393020629882,41.9847908020022 -75.3391265869141,41.9825401306153 -75.3400497436523,41.9807090759277 -75.3406372070311,41.9798889160156 -75.3413391113281,41.9789199829102 -75.3422088623047,41.9769287109376 -75.3418579101562,41.9753417968751 -75.3410568237305,41.9741287231445 -75.339859008789,41.97274017334 -75.3385162353515,41.9714698791504 -75.3360366821288,41.9706497192384 -75.3342132568359,41.9697189331054 -75.3305130004882,41.9682807922364 -75.3248672485351,41.9647903442383 -75.3203277587889,41.9594917297364 -75.3184585571289,41.9573097229004 -75.3167572021484,41.9553413391113 -75.3143920898437,41.9521217346191 -75.3125839233398,41.9507293701172 -75.310188293457,41.9500885009766 -75.3083724975585,41.9494209289551 -75.3077163696288,41.9491806030273 -75.304588317871,41.9496917724609 -75.3027801513671,41.9505310058594 -75.3003082275391,41.9518890380862 -75.2979278564453,41.9528999328613 -75.2959823608398,41.9532508850098 -75.2941360473633,41.9532508850098 -75.2927932739258,41.9522094726562 -75.2922821044921,41.9514312744141 -75.2916107177733,41.9503707885744 -75.289207458496,41.9482421875001 -75.2855072021483,41.9450607299806 -75.2813873291015,41.9415702819827 -75.2787475585936,41.9391403198243 -75.2776336669922,41.9370803833009 -75.2766876220703,41.9342193603517 -75.2749633789062,41.9305496215821 -75.2750167846679,41.928279876709 -75.2745285034179,41.9246406555176 -75.2734222412109,41.920539855957 -75.2716598510742,41.917781829834 -75.2695770263671,41.9150619506837 -75.2677307128906,41.9123306274414 -75.2671966552733,41.9099311828613 -75.2670593261719,41.9072494506837 -75.2671432495117,41.9046096801758 -75.2677612304687,41.9027900695803 -75.2689971923828,41.9000701904298 -75.2708587646484,41.8982620239258 -75.272102355957,41.8964500427246 -75.2721099853516,41.8937187194824 -75.2706527709961,41.8914184570313 -75.2676696777343,41.8894805908203 -75.2671585083008,41.8892288208007 -75.2639770507812,41.8876686096191 -75.2622680664062,41.886890411377 -75.2609863281249,41.8848915100099 -75.2598571777343,41.881690979004 -75.2592773437499,41.8798713684083 -75.2587890624999,41.8782005310059 -75.2591857910155,41.8761901855469 -75.260513305664,41.8746719360352 -75.2617568969726,41.8733291625977 -75.2625198364257,41.8713111877444 -75.2622528076172,41.8687705993652 -75.2613525390624,41.8673210144044 -75.259147644043,41.8653297424316 -75.2574157714844,41.8646392822266 -75.2536239624023,41.8647804260254 -75.2505264282227,41.8651809692386 -75.2469329833984,41.8659706115725 -75.2445907592773,41.8662109375 -75.2426071166992,41.8664207458499 -75.2376861572266,41.8664093017578 -75.2357330322264,41.8653793334962 -75.2338638305664,41.8644905090333 -75.2334060668945,41.8641014099122 -75.2326965332031,41.8634986877444 -75.2309188842773,41.8623085021973 -75.2278366088867,41.860939025879 -75.2253799438477,41.8604888916016 -75.2229232788085,41.8613891601562 -75.2210159301757,41.86238861084 -75.2178878784179,41.8641510009768 -75.2154922485351,41.8668212890627 -75.2121887207031,41.8685989379884 -75.2116775512695,41.8687400817871 -75.2093276977539,41.8690795898438 -75.2066116333007,41.869400024414 -75.2060089111328,41.8694801330568 -75.2031631469727,41.8695106506348 -75.1974029541016,41.8683319091797 -75.193717956543,41.866970062256 -75.1913299560547,41.8655014038088 -75.1895294189453,41.8641014099122 -75.1876983642578,41.8636207580566 -75.1859283447265,41.8631210327148 -75.1833267211914,41.8638801574709 -75.1811370849609,41.865909576416 -75.1797409057617,41.8680992126466 -75.1787033081054,41.8697204589845 -75.1763229370116,41.8710594177246 -75.1741790771484,41.8717193603516 -75.1717071533203,41.871711730957 -75.1698989868163,41.87073135376 -75.1682815551757,41.8688201904296 -75.1678771972656,41.8659896850586 -75.1674270629882,41.8639793395996 -75.1674880981445,41.8617019653321 -75.1663131713867,41.857780456543 -75.1641082763671,41.8547821044922 -75.16153717041,41.8526992797852 -75.1584930419922,41.8517799377441 -75.1551666259766,41.8512992858887 -75.1511230468749,41.851718902588 -75.1502761840819,41.8518218994142 -75.1477661132812,41.8521194458008 -75.1436614990234,41.8528289794922 -75.1431121826171,41.8526802062989 -75.1409912109374,41.8521003723146 -75.1397628784179,41.8516502380372 -75.1381988525391,41.8508796691895 -75.1354293823242,41.8489799499512 -75.1321105957031,41.8476791381836 -75.1293106079102,41.8470802307131 -75.1259994506836,41.8465995788574 -75.1219177246093,41.8461494445801 -75.1182327270507,41.8452301025391 -75.1157684326172,41.844310760498 -75.1145401000977,41.8429489135742 -75.1144714355469,41.8411598205567 -75.1139068603515,41.8395614624026 -75.1140365600585,41.8359298706057 -75.1139907836914,41.8323020935058 -75.1142272949218,41.8297996520999 -75.1133270263672,41.8275489807129 -75.1118927001953,41.8254890441895 -75.1101303100585,41.8240509033205 -75.1087570190429,41.8229904174806 -75.1078567504883,41.8225402832031 -75.1059036254882,41.8217010498048 -75.1034774780273,41.8202896118166 -75.1004333496094,41.8193321228027 -75.0986175537109,41.8183784484863 -75.0962066650389,41.8165206909181 -75.094367980957,41.8160896301269 -75.0912933349609,41.8152198791504 -75.0907135009766,41.8151817321779 -75.0882568359374,41.8150100708009 -75.0857772827148,41.8154220581054 -75.0833206176757,41.8153686523439 -75.0808563232421,41.8153305053713 -75.077796936035,41.8148193359376 -75.0741424560546,41.813388824463 -75.0729370117186,41.8124504089357 -75.0724029541016,41.810619354248 -75.0722427368163,41.8087615966797 -75.0727081298828,41.8067588806152 -75.0731658935547,41.8056411743165 -75.0741195678711,41.8033218383791 -75.0752029418945,41.8006896972657 -75.0772171020507,41.7992401123047 -75.079116821289,41.7978591918946 -75.0796966552734,41.7974319458009 -75.0821533203124,41.7972412109376 -75.0827102661133,41.7971992492675 -75.0852432250975,41.7972412109376 -75.0857772827148,41.7971687316896 -75.0882720947265,41.7968406677246 -75.0914077758788,41.796112060547 -75.0932464599608,41.7952117919922 -75.0951080322266,41.7938499450684 -75.0969696044921,41.7920417785646 -75.0988311767578,41.7893218994141 -75.099639892578,41.7878494262696 -75.1000671386719,41.7870597839357 -75.101676940918,41.7830200195312 -75.1019668579102,41.7798004150392 -75.1013565063475,41.777069091797 -75.100227355957,41.7745094299316 -75.0971221923828,41.7720298767089 -75.0940093994139,41.7711486816409 -75.0897598266602,41.7714385986329 -75.0842132568359,41.7717895507814 -75.0792694091797,41.7721519470215 -75.0749664306641,41.7716102600099 -75.0700759887694,41.7706108093264 -75.0646286010742,41.7682418823243 -75.0614166259766,41.766040802002 -75.0586929321288,41.762218475342 -75.0560684204102,41.7582702636719 -75.0546874999999,41.7530708312989 -75.0537033081055,41.7478294372559 -75.0538482666015,41.7426109313966 -75.0539474487304,41.7389717102052 -75.0542373657226,41.735149383545 -75.0542526245116,41.730350494385 -75.0530624389648,41.7260589599612 -75.0519332885742,41.7226295471191 -75.0506362915039,41.7196998596192 -75.0500488281249,41.7165222167971 -75.0498580932616,41.7152786254882 -75.0511474609375,41.7134895324707 -75.0536270141602,41.7126312255859 -75.0567169189453,41.7122306823733 -75.0580978393555,41.7124595642091 -75.0592727661132,41.7126502990724 -75.0597610473632,41.7125816345215 -75.063606262207,41.7120208740237 -75.0659408569335,41.7116889953614 -75.0665969848633,41.7115097045898 -75.0679168701172,41.7093200683595 -75.0673294067383,41.7065887451172 -75.0648880004882,41.7038612365723 -75.0618286132812,41.7011184692384 -75.0590820312499,41.6977386474609 -75.0564880371094,41.6940803527832 -75.0561981201172,41.6935806274414 -75.0533981323242,41.6871910095215 -75.053337097168,41.6829299926758 -75.0535507202148,41.6808395385743 -75.0542068481445,41.6785812377932 -75.0561370849609,41.676342010498 -75.057746887207,41.6748390197754 -75.0587463378906,41.6729698181153 -75.0587997436523,41.6712989807132 -75.0571670532226,41.669719696045 -75.0553665161132,41.6674308776856 -75.0547790527343,41.6669197082521 -75.052848815918,41.6634101867678 -75.0517578124999,41.6608200073243 -75.0510711669921,41.6572189331057 -75.0504531860352,41.6529617309572 -75.050308227539,41.6494407653809 -75.0493621826171,41.6412506103517 -75.0487365722656,41.6344490051271 -75.0473098754883,41.6298599243164 -75.0462036132812,41.6262016296387 -75.0450973510741,41.6225509643556 -75.044563293457,41.620719909668 -75.0446166992186,41.6189002990723 -75.0465240478514,41.6171302795413 -75.0496063232422,41.6167297363281 -75.0520629882812,41.6167793273926 -75.0537490844726,41.6175689697267 -75.0568237304686,41.618480682373 -75.0588073730468,41.6169090270997 -75.0604858398438,41.6155700683594 -75.0603561401366,41.6133995056152 -75.0618133544922,41.611270904541 -75.0630111694335,41.6103286743165 -75.0652389526367,41.6099319458008 -75.068260192871,41.6103515625001 -75.0703659057616,41.6103591918948 -75.0728378295897,41.6090087890626 -75.0734558105469,41.6081008911133 -75.0728607177734,41.6053695678712 -75.0710372924804,41.603099822998 -75.0699462890624,41.6019592285157 -75.0679931640625,41.599910736084 -75.0644531249999,41.5961189270021 -75.0612716674804,41.5935287475587 -75.0582122802734,41.5921592712402 -75.0550079345702,41.5905685424805 -75.0524597167969,41.5877189636232 -75.0503692626953,41.5856819152831 -75.0472259521484,41.5821304321292 -75.0461273193359,41.5805091857913 -75.0429687499999,41.5748596191407 -75.0408172607422,41.5710296630861 -75.0388565063476,41.5699310302736 -75.0359497070312,41.5670890808108 -75.0326385498047,41.5656814575196 -75.0293807983398,41.5636405944825 -75.0246658325195,41.5598106384278 -75.0216369628905,41.5562515258789 -75.0191879272461,41.552978515625 -75.0175704956055,41.5498199462893 -75.0167770385742,41.5470695495608 -75.0174026489257,41.5447998046875 -75.0189361572265,41.543312072754 -75.0198287963867,41.5429191589357 -75.0215377807616,41.5417213439944 -75.0229568481445,41.5402908325198 -75.0227890014648,41.5377197265625 -75.0217590332031,41.5352897644044 -75.0199890136718,41.5335197448733 -75.017578125,41.5321121215821 -75.0133361816405,41.5306701660156 -75.0080032348633,41.5277519226074 -75.0055770874023,41.525489807129 -75.0035095214843,41.5229301452636 -75.0022430419921,41.5202293395997 -75.001609802246,41.518180847168 -75.0016632080078,41.5156898498535 -75.0022506713867,41.5145606994629 -75.0029067993163,41.5125198364259 -75.0042266845703,41.5105094909671 -75.0030364990233,41.5091514587403 -75.0025024414062,41.5086212158205 -74.999412536621,41.5081520080569 -74.9963302612304,41.508541107178 -74.991958618164,41.0772590637208 -74.9956970214843,41.076099395752 -74.9993362426758,41.0747184753418 -75.0023803710938,41.0728988647461 -75.0046005249023,41.0712203979494 -75.0061264038086,41.069839477539 -75.0039901733397,40.4113121032716 -75.0009689331055,40.4117393493652 -74.9982070922852,40.4120216369629 -74.9973373413086,40.4120216369629 -74.9956665039062,40.0347900390626 -74.996696472168,40.0338020324708 -75.0004806518555,40.031120300293 -75.0047912597656,40.0286598205568 -75.7875213623046,39.7230796813965 -76.0148086547852,39.7228012084962 -76.13916015625,39.7222785949708 -76.2241516113281,39.7219314575195 -76.8401412963867,39.7205390930176 -76.9962158203124,39.7196922302247 -76.9998092651367,39.7196807861328 -77.1211929321289,39.7194290161132 -77.2151565551757,39.7196121215821 -77.3926773071289,39.7199516296387 -77.4596481323242,39.7204093933106 -77.4674224853514,39.7204818725588 -77.6719360351562,39.7214889526368 -77.9380493164062,39.7240104675295 -78.1007080078125,39.7235412597659 -78.2101516723632,39.7232208251954-78.9146423339844,39.7231597900393 -79.0408172607422,39.7225494384766 -79.3213195800781,39.7221603393555 -79.3889007568359,39.7220687866212 -79.3900909423828,39.721950531006 -79.3912963867188,39.7220306396485 -79.9146881103516,39.7221107482912 -80.1911468505859,39.7216796875001 -80.4243698120117,39.7213516235352 -80.5170516967773,39.7212219238282 -80.5178604125977,39.7543106079103 -80.5192489624023,39.9298896789554 -80.5189361572266,40.1081695556641 -80.5188827514648,40.1618995666504 -80.5187301635742,40.2882804870608 -80.5189819335937,40.4013214111328 -80.2618408203124,42.0687103271484 -80.2473526000976,42.0776519775392 -80.2314605712889,42.0825309753419 -80.2185974121094,42.0859794616699 -80.1485519409179,42.130599975586 -80.1496505737305,42.1269416809083 -80.1514205932617,42.1246299743653 -80.1537933349609,42.1218605041504 -80.011848449707,42.1669502258303 -80.0039520263672,42.1711921691896 -79.7869415283203,42.2569999694825 -79.7752685546875,42.2603797912598 -79.7673492431641,42.2646102905273 -79.7624969482421,42.2678794860841</coordinates></LinearRing></innerBoundaryIs></Polygon></MultiGeometry></Placemark></Document></kml>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script>
function dummy() {}
window.dummy = dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map_canvas"></div>
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>