map a 2d array array to produce leaflet.js markers - javascript

Hi I'm having some trouble generating my markers in leaflet js. I have an object which has multiple entries per year. I want to create a layer group for each year that can be switched on and off. But i've hit a sticking point, I cant quite figure out how to map only the entries that match the parent array. IE 2016 == 2016.year...
My trouble is not being able how to map the second level items. The object is like this:
{
"2016": [
{
"year": 2016,
"latitude": 50.9500019,
"longitude": 6.4836722
},
{
"year": 2016,
"latitude": 50.9500019,
"longitude": 6.4836722
}
],
"2017": [
{
"year": 2017,
"latitude": 50.9500019,
"longitude": 6.4836722
}
]
}
and the code is this:
const getGroupMarkers = (array, groupName) => Object.keys(array).map(function(keys, value){
array[keys].map(createMarkers.bind(groupName));
});
This works to a degree but it returns all the years not just 2016.
Here's a pen of what I'm working on. Line 270 for the function in question.
https://codepen.io/sharperwebdev/pen/gvEQXe?editors=0010
Any help would be greatly appreciated, I'm scratching my head a bit with this one.
Thanks

I managed to do this with bracket notation. array[requiredEntry].map(callback);

Related

How to access an array of objects with tooltip.format() from anychart.js

I am having trouble trying to present an array of objects on the tooltip of an Anychart.js map. I understand that we can access the dataset by doing something like: %[name of property in data set]. My data set has the following form:
{
"country": "Austria",
"id": "AT",
"continent": "Europe",
"songs": [
{
"rank": 33,
"title": "Stuck with U (with Justin Bieber)",
"artists": "Ariana Grande, Justin Bieber",
"album": "Stuck with U",
"explicit": 0,
"duration": "3:48"},
{
"rank": 34,
"title": "Late Night",
"artists": "Luciano",
"album": "Late Night",
"explicit": 0,
"duration": "3:20"
},
... more objects
]
}
}
If I wanted to access the Country property I would simply add it to the tooltip by doing:
tooltip.format("Country: " + {%country});
The issue is when trying to access an array of objects, I have tried different variations and none of them worked. Trying to show the title of every song:
tooltip.format({%songs}.{%title});
tooltip.format({%songs.%title});
tooltip.format({%songs}[{%title}]);
I also saw in the documentation that we can send a function as argument so I tried the following where I would concatenate every title of the collection but did not succeed either:
tooltip.format(function() {
let concatenated = '';
this.songs.forEach(song => {
concatenated += song + ' ';
});
return concatenated;
});
I would really appreciate your help guys.
String tokens do not support nested objects/properties. But you can use the callback function of the formatted to get access to songs. The context prototype includes getData() method provides that. Like this:
series.tooltip().format(function() {
console.log(this.getData('songs'));
return 'tooltip';
});
For details, check the live sample we prepared.
In case any one else is looking for a solution to this answer. I figured out how to loop through an embed array, and call on specific information.
chart.edges().tooltip().format(function () {
var format = ''
var songs = this.getData('songs');
songs.forEach(function (data, builtin, dom) {
format = '<p>'+data['title']+' by '+data['artists']+' </span></p>' + format
});
console.log(format)
return format
});

Geolib and getPreciseLocation through an Array

I have an array and I need to order the data of it by the distance of a specific point.
Knowing that .sort() won't work since I'm dealing with coordinates, I've been using a library called Geolib which has a function called getPreciseLocation() which is exactly what I need, but it doesn't seem to work while iterating through an array.
Here is the array containing the data I will be using.
Data:
[
{
"id": "1",
"Point": "27.1597268, 40.6646601"
},
{
"id": "2",
"Point": "11.1640393, 49.648713"
},
{
"id": "3",
"Point": "26.1539253, 42.6599287"
},
{
"id": "4",
"Point": "21.1597268, 44.6646601"
},
{
"id": "5",
"Point": "10.1640393, 43.648713"
},
{
"id": "6",
"Point": "26.1539253, 61.6599287"
}
]
The code I've been trying to use to iterate through the array.
let DistancesFromUserLocation = [];
this.state.Data.forEach(item => {
DistancesFromUserLocation.push(geolib.getPreciseDistance({latitude: 30.1891168, longitude: 11.6226982}, item.Point))
})
As a disclaimer: I only need to get to receive the distance of each array object to a new array.
I've tried and researched many things and get around the solution, but just about thinking that I am getting to the solution, something would go wrong.
You need to push the generated distance each iteration to DistancesFromUserLocation array.
let DistancesFromUserLocation = [];
this.state.Data.forEach(item => {
// push each distance to `DistancesFromUserLocation`
DistancesFromUserLocation.push(
geolib.getPreciseDistance(
{latitude: 30.1891168, longitude: 11.6226982},
item.Point
);
)
})
Only then you can use the Array.sort().
console.log(DistancesFromUserLocation.sort());
EDIT:
Check my working example here at codesandbox.

scatter plot d3.js freecodecamp pronect having trouble with yscale displaying minutes

I had completed all 14 user stories, except 2, userstory #6 and #12 they are related to each other (about YScale domain and range, and converting it to minutes)
It's been two days I stuck on this, I will share my code
Can anyone tell me what is the bug in my code.
##https://codepen.io/codebrakerk/pen/ZEWOPpz
You need to access "Time" from your dataset.
{
"Time": "36:50",
"Place": 1,
"Seconds": 2210,
"Name": "Marco Pantani",
"Year": 1995,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1995 due to high hematocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
}
I guess the "Seconds" attribute implies the time it took for the person to complete his run. Your time code should run as follows:
(item) => {
let t = item["Time"].split(':');
return new Date(minutes=t[0], seconds=t[1]);
}

Accessing variables in a JSON?

I'm currently working with the Bing Isochrone Api. I set up my http request in Angular using the HTTPClient. This is the example of the data set I get back:
{
"authenticationResultCode": "ValidCredentials",
"brandLogoUri": "http:\/\/dev.virtualearth.net\/Branding\/logo_powered_by.png",
"copyright": "Copyright © 2018 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.",
"resourceSets": [{
"estimatedTotal": 1,
"resources": [{
"__type": "IsochroneResponse:http:\/\/schemas.microsoft.com\/search\/local\/ws\/rest\/v1",
"origin": {
"latitude": 47.640068,
"longitude": -122.129858
},
"polygons": [{
"coordinates": [
[
[48.22848, -122.12867],
[48.22613, -122.10625],
[48.229309, -122.08228],
[48.23733, -122.07666],
[48.24474, -122.05325],
[48.24469, -122.0532],
[48.24424, -122.05386],
[48.23119, -122.06654],
[48.22848, -122.12867]
]
]
}]
}]
}],
"statusCode": 200,
"statusDescription": "OK",
"traceId": "4ed97517798141a1b5bb9df40509f190|CO30305304|7.7.0.0|"
}
I can get to the resourceSets with this
this
.http
.get(`http://dev.virtualearth.net/REST/v1/Routes/Isochrones?waypoint=\
${this.testPointlat},${this.testPointlong}&maxTime=15&timeUnit=Minutes\
&dateTime=2017-11-27T18:00:00-08:00&travelMode=Driving\
&key=$$$$$$$$$$$$$
`).subscribe(
(response) => {
this.driveTimeCoords = response.resourceSets;
console.log(this.driveTimeCoords);
const polygons = this.driveTimeCoords.resources.polygons;
console.log(polygons);
}
);
})
So this.driveTimeCoords gives me an array... My attempt after it doesn't work obviously as it says undefined. Would i do a .foreach with an if or something? I'm probably overthinking this. All I want are the coordinates so I can then .map() them into a geojson featuregroup for leaflet.
Thanks!
Edit:
On console.log this.driveTimeCoords I get
[{…}]0: estimatedTotal: 1resources: [{…}]
Your JSON formatting is off: note how resourceSets, resources and polygons are object arrays, meaning you need to call the array's index to access the data, like so:
this.driveTimeCoords = response.resourceSets[0];
console.log(this.driveTimeCoords);
const polygons = this.driveTimeCoords.resources[0].polygons[0];
console.log(polygons);
To fix this issue, your JSON should be formatted like this:
{
"authenticationResultCode": "ValidCredentials",
"brandLogoUri": "http:\/\/dev.virtualearth.net\/Branding\/logo_powered_by.png",
"copyright": "Copyright © 2018 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.",
"resourceSets": {
"estimatedTotal": 1,
"resources": {
"__type": "IsochroneResponse:http:\/\/schemas.microsoft.com\/search\/local\/ws\/rest\/v1",
"origin": {
"latitude": 47.640068,
"longitude": -122.129858
},
"polygons": {
"coordinates": [
{"latitude": 48.22848, "longitude": -122.12867},
{"latitude": 48.22613, "longitude": -122.10625},
{"latitude": 48.229309, "longitude": -122.08228},
{"latitude": 48.23733, "longitude": -122.07666},
{"latitude": 48.24474, "longitude": -122.05325},
{"latitude": 48.24469, "longitude": -122.0532},
{"latitude": 48.24424, "longitude": -122.05386},
{"latitude": 48.23119, "longitude": -122.06654},
{"latitude": 48.22848, "longitude": -122.12867}
]
}
}
},
"statusCode": 200,
"statusDescription": "OK",
"traceId": "4ed97517798141a1b5bb9df40509f190|CO30305304|7.7.0.0|"
}
I added variable names to the coordinates, for easier comprehension of the data being read.
Judging by your JSON object, it looks like this.driveTimeCoords which is a reference to the resourceSets in your JSON, is an array, which, for every property you seem to want (resource, polygons, coordinates) all successively are arrays as well. Thus, you must do a sequence of nested .map() operations.
Try the following:
var result = this.driveTimeCoords.map((obj)=>{
return obj.resources.map((resource)=>{
return resource.polygon.map((poly)=> poly.coordinates )
})
})
Doing this, makes it so that, if any of those arrays contain multiple references, you'd get them all. Afterwards, you could flatten the array, or simply reference the first one as another guy suggested result[0][0][0]
Seeing as they are arrays, you need to access via thier index:
let json = {
"authenticationResultCode": "ValidCredentials",
"brandLogoUri": "http:\/\/dev.virtualearth.net\/Branding\/logo_powered_by.png",
"copyright": "Copyright © 2018 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.",
"resourceSets": [{
"estimatedTotal": 1,
"resources": [{
"__type": "IsochroneResponse:http:\/\/schemas.microsoft.com\/search\/local\/ws\/rest\/v1",
"origin": {
"latitude": 47.640068,
"longitude": -122.129858
},
"polygons": [{
"coordinates": [
[
[48.22848, -122.12867],
[48.22613, -122.10625],
[48.229309, -122.08228],
[48.23733, -122.07666],
[48.24474, -122.05325],
[48.24469, -122.0532],
[48.24424, -122.05386],
[48.23119, -122.06654],
[48.22848, -122.12867]
]
]
}]
}]
}],
"statusCode": 200,
"statusDescription": "OK",
"traceId": "4ed97517798141a1b5bb9df40509f190|CO30305304|7.7.0.0|"
}
let polys = json['resourceSets'][0].resources[0].polygons;
let o = document.getElementById('output');
o.innerHTML = JSON.stringify(polys);
<div id="output"></div>
With this formating you can acces coordinate with these paths :
.resourceSets[0].resources[0].polygons[0].coordinates[0][0][0] = 48.22848
.resourceSets[0].resources[0].polygons[0].coordinates[0][0][1] = -122.12867
.resourceSets[0].resources[0].polygons[0].coordinates[0][1][0] = 48.22613
.resourceSets[0].resources[0].polygons[0].coordinates[0][1][1] = -122.10625
.resourceSets[0].resources[0].polygons[0].coordinates[0][2][0] = 48.229309
.resourceSets[0].resources[0].polygons[0].coordinates[0][2][1] = -122.08228
.resourceSets[0].resources[0].polygons[0].coordinates[0][3][0] = 48.23733
.resourceSets[0].resources[0].polygons[0].coordinates[0][3][1] = -122.07666
.resourceSets[0].resources[0].polygons[0].coordinates[0][4][0] = 48.24474
.resourceSets[0].resources[0].polygons[0].coordinates[0][4][1] = -122.05325
.resourceSets[0].resources[0].polygons[0].coordinates[0][5][0] = 48.24469
.resourceSets[0].resources[0].polygons[0].coordinates[0][5][1] = -122.0532
.resourceSets[0].resources[0].polygons[0].coordinates[0][6][0] = 48.24424
.resourceSets[0].resources[0].polygons[0].coordinates[0][6][1] = -122.05386
.resourceSets[0].resources[0].polygons[0].coordinates[0][7][0] = 48.23119
.resourceSets[0].resources[0].polygons[0].coordinates[0][7][1] = -122.06654
.resourceSets[0].resources[0].polygons[0].coordinates[0][8][0] = 48.22848
.resourceSets[0].resources[0].polygons[0].coordinates[0][8][1] = -122.12867

search partial match in an array

I have a long Array like this:
var wifiArr = {
"results": {
"fields": [
"Name",
"Address",
"Suburb",
"Latitude",
"Longitude"
],
"rows": [
{
"Name": "7th Brigade Park, Chermside",
"Address": "Delaware St",
"Suburb": "Chermside",
"Latitude": -27.37893,
"Longitude": 153.04461
},
.
. total 55 of those
.
{
"Name": "Annerley Library Wifi",
"Address": "450 Ipswich Road",
"Suburb": "Annerley, 4103",
"Latitude": -27.50942285,
"Longitude": 153.0333218
},
]
}
}
I'm trying to find every 'Name', 'suburb' or 'address' which contains for example 'ann' in it's name and return with the index of those items, relative to 'rows' .. Just so I can access to all details later on by using
var wifis = wifiArr.results.rows;
// returned index
console.log(wifis[index].Latitude);
I tried few different things but none of them worked as I wanted (usually they just give single index). The only thing I can use is plain Javascript and jQuery. No other libraries (as others recommended me before).
I would appreciate all the help, Thanks
So, if you can use jQuery then you can give a try with jQuery.grep. And in your code
arr = jQuery.grep(wifiArr.results.rows, function(row, index) {
return row.Name.indexOf('ann') > -1
|| row.Address.indexOf('ann') > -1
|| row.Suburb.indexOf('ann') > -1;
});
Here is an example http://jsfiddle.net/ry5AC/1/
Also, if you support newer browsers, you can use filter function. Related article on MDN. It is invoked with index argument ;)

Categories