Related
Wondered if somebody could help me with some JavaScript.
I have a json file which looks similar to the one below, although this is a cut down version of the original one which is considerably larger. I'm attempting to grab some coordinates from it and use them to outline specific areas on a google map to which I set myself up a fiddle to test with:
https://jsfiddle.net/pork1977/up8rnf6d/
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"LEVEL1_COD": 1,
"LEVEL1_NAM": "EUROPE"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
24.128105619999872,
34.858005329767494
],
[
24.128505619999856,
34.808905329767484
],
[
24.044605619999857,
34.850005329767484
],
[
24.074605619999858,
34.868605329767476
],
[
20.819105619999874,
80.719105329767487
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"LEVEL1_COD": 2,
"LEVEL1_NAM": "AFRICA"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
32.954405619999847,
-26.058594670232509
],
[
32.895205619999871,
-26.040794670232515
],
[
32.980505619999889,
-25.972794670232517
],
[
32.982705619999848,
-25.98359467023252
],
[
32.954405619999847,
-26.058594670232509
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"LEVEL1_COD": 3,
"LEVEL1_NAM": "AUSTRALASIA"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
169.185405619999841,
-52.576994670232516
],
[
169.028205619999852,
-52.559194670232515
],
[
169.000705619999877,
-52.507194670232515
],
[
169.205205619999873,
-52.441394670232512
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"LEVEL1_COD": 4,
"LEVEL1_NAM": "ASIA-TROPICAL"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
96.914105619999845,
-12.198094670232521
],
[
96.902405619999882,
-12.199994670232513
],
[
96.914705619999864,
-12.151994670232511
],
[
96.924405619999874,
-12.182794670232511
],
[
96.914105619999845,
-12.198094670232521
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"LEVEL1_COD": 5,
"LEVEL1_NAM": "SOUTHERN AMERICA"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-67.212794380000133,
-55.893594670232517
],
[
-67.246994380000132,
-55.894994670232514
],
[
-67.41389438000013,
-55.832194670232518
],
[
-67.246994380000132,
-55.828094670232517
]
]
]
]
}
}
]
}
I'm attempting to filter some values on this. What I'm trying to do is get the "coordinates" when I specify a value for the LEVEL1_COD key in the filter.
I've managed to do this by running the below, and in this example it shows me the coordinates for EUROPE as this has it's LEVEL1_COD value set to 1. Note: the json variable here is using the full blown version of my snippet above.
var json = JSON.parse($.getJSON({'url': "https://raw.githubusercontent.com/tdwg/wgsrpd/master/geojson/level1.geojson", 'async': false}).responseText);
var coords = json.features.filter(function (el) {
return (el.properties.LEVEL1_COD == "1");
})[0].geometry.coordinates
console.log(coords);
Console.log shows me:
[ [ [ [ 24.128105619999872, 34.858005329767494 ], [
24.128505619999856, 34.808905329767484 ], [ 24.044605619999857, 34.850005329767484 ], [ 24.074605619999858, 34.868605329767476 ], [ 20.819105619999874, 80.719105329767487 ] ] ] ]
What I can't figure out, is how to change this from an 'equals' to a 'contains' type of filter.
For example, if I had a list of LEVEL1_COD values of say 1,2,5 and I wanted to filter on those values so I could see each set of coordinates, how would you go about doing that? I'd like to get the areas outlined on the map for each of these areas.
I'm sure the line which needs tweaking is:
return (el.properties.LEVEL1_COD == "1");
But after trying all sorts of things I can't get it to return more than one set. Do you need to loop through each item to do this? or is there a smarter way? Speed is somewhat important since the json files I'll be using are quite large.
Thanks
Paul
If you are looking to get more than one matching elements from the data based on the provided input(multiple values i.e., an array) Array.some can be used.
Below I've simulated few examples, hope this is what you are looking for
let data = {type:'FeatureCollection',features:[{type:'Feature',properties:{LEVEL1_COD:1,LEVEL1_NAM:'EUROPE',},geometry:{type:'MultiPolygon',coordinates:[[[[24.128105619999872,34.858005329767494],[24.128505619999856,34.808905329767484],[24.044605619999857,34.850005329767484],[24.074605619999858,34.868605329767476],[20.819105619999874,80.719105329767487],],],],},},{type:'Feature',properties:{LEVEL1_COD:2,LEVEL1_NAM:'AFRICA',},geometry:{type:'MultiPolygon',coordinates:[[[[32.954405619999847,-26.058594670232509],[32.895205619999871,-26.040794670232515],[32.980505619999889,-25.972794670232517],[32.982705619999848,-25.98359467023252],[32.954405619999847,-26.058594670232509],],],],},},{type:'Feature',properties:{LEVEL1_COD:3,LEVEL1_NAM:'AUSTRALASIA',},geometry:{type:'MultiPolygon',coordinates:[[[[169.185405619999841,-52.576994670232516],[169.028205619999852,-52.559194670232515],[169.000705619999877,-52.507194670232515],[169.205205619999873,-52.441394670232512],],],],},},{type:'Feature',properties:{LEVEL1_COD:4,LEVEL1_NAM:'ASIA-TROPICAL',},geometry:{type:'MultiPolygon',coordinates:[[[[96.914105619999845,-12.198094670232521],[96.902405619999882,-12.199994670232513],[96.914705619999864,-12.151994670232511],[96.924405619999874,-12.182794670232511],[96.914105619999845,-12.198094670232521],],],],},},{type:'Feature',properties:{LEVEL1_COD:5,LEVEL1_NAM:'SOUTHERN AMERICA',},geometry:{type:'MultiPolygon',coordinates:[[[[-67.212794380000133,-55.893594670232517],[-67.246994380000132,-55.894994670232514],[-67.41389438000013,-55.832194670232518],[-67.246994380000132,-55.828094670232517]]]]}}]};
const getFilteredData = (data, input) =>
data.features.filter(feature => {
return input.some(i => i === feature.properties.LEVEL1_COD);
});
let input = [1];
let filterdData = getFilteredData(data, input);
console.log(filterdData);
input = [1, 2, 5];
filterdData = getFilteredData(data, input);
console.log(filterdData);
input = [1, 7];
filterdData = getFilteredData(data, input);
console.log(filterdData);
.as-console-wrapper {
max-height: 100% !important;
}
It seems like you are populating your mapbox. You could use the package's filter
this.map.setFilter('YOUR_LAYER', ['==', 'LEVEL1_COD', 'YOUR_VALUE']);
I am trying to get a subset of Geojson Data by property.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ -115.5578333,32.9646667 ]
},
"properties": {
"Year1979_03":2.92606854,
"Year1979_06":2.963032273,
"Year1979_09":2.968127935
}
}]
If a user chooses year "Year1979_03 then then it should return
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ -115.5578333,32.9646667 ]
},
"properties": {
"Year1979_03":2.92606854,
}
}]
Not sure if I understand your question correctly, but if you have a user input and you have it in a variable:
let userInput = "Year1979_03"
and you have the returned data in its original form
let originalData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ -115.5578333,32.9646667 ]
},
"properties": {
"Year1979_03":2.92606854,
"Year1979_06":2.963032273,
"Year1979_09":2.968127935
}
}
]
}
then you can use es6 spread operator to create the object you wanted to create:
let reformedData = {
...originalData,
"features": [
{
...originalData.features[0],
"properties":
{
[userInput]: originalData.features[0].properties[userInput]
}
}]
}
Above, I use the spread operator to retrieve all the keys and values I want to keep from the originalData object, but specify the ones I want to change/replace. This would bring you the object you wanted.
I am working on something for checking what is the max value and whats is the min value. For this I am using Math.max.apply() and Math.min.apply().
Before I check that I convert an Object out of GeoJson code called from and to.
That looks like this:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
6.338356,
52.790868
],
[
6.378572,
52.648089
],
[
6.10522,
52.663572
],
[
6.089325,
52.798539
],
[
6.338356,
52.790868
]
]
]
},
"properties": {
"name": "DiggitTwoOne",
"regioFacetId": "tcm:106-353682-1024",
"level": 3,
"from": "10",
"to": "12"
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
6.105498,
52.663816
],
[
6.378605,
52.648187
],
[
6.417051,
52.520692
],
[
6.173867,
52.509454
],
[
6.105498,
52.663816
]
]
]
},
"properties": {
"name": "DiggitTwoTwo",
"regioFacetId": "tcm:106-353682-1024",
"level": 3,
"from": "13",
"to": "15"
}
}
]
}
For now the javascript code looks like this:
var from = event.feature.getProperty("from");
var to = event.feature.getProperty("to");
var mergeObjects = JSON.parse(from,to);
console.log(Math.max.apply(Math,mergeObjects));
console.log(Math.min.apply(Math, mergeObjects));
When I run the javascript code it gives an error like this:
CreateListFromArrayLike called on non-object.
I am using the Objects from and to.
Is there something I did wrong or am I getting it wrong of using it like this.
Your problem is that apply accepts an array and you're not passing it that:
var from = event.feature.getProperty("from"),
to = event.feature.getProperty("to"),
numArr = [from, to];
Math.max.apply(Math, numArr);
Math.min.apply(Math, numArr);
Is this what you're looking for?
I have the following geoJson polygons:
{"type": "Feature","geometry":{"type":"MultiPolygon", "coordinates":[[[[103.76772700000001,1.47063],[103.76772700000001,1.4795775862068967],[103.758794,1.4795775862068967],[103.758794,1.47063],[103.76772700000001,1.47063]]]]},"properties": {"number":"01"}},
{"type": "Feature","geometry":{"type":"MultiPolygon", "coordinates":[[[[104.00891800000001,1.47063],[104.00891800000001,1.4795775862068967],[103.99998500000001,1.4795775862068967],[103.99998500000001,1.47063],[104.00891800000001,1.47063]]]]},"properties": {"number":"03"}}
But when I validate this in geojson validator it throws an EOF error. But when I try each separately it validates as a eligible geoJSON. So I tried with this too.
"type":"FeatureCollection","features":[
{"type": "Feature","geometry":{"type":"MultiPolygon", "coordinates":[[[[103.76772700000001,1.47063],[103.76772700000001,1.4795775862068967],[103.758794,1.4795775862068967],[103.758794,1.47063],[103.76772700000001,1.47063]]]]},"properties": {"number":"01"}},
{"type": "Feature","geometry":{"type":"MultiPolygon", "coordinates":[[[[104.00891800000001,1.47063],[104.00891800000001,1.4795775862068967],[103.99998500000001,1.4795775862068967],[103.99998500000001,1.47063],[104.00891800000001,1.47063]]]]},"properties": {"number":"03"}}
]
But still throwing an EOF error. Any help is appreciated.
It should be an JSON object. You are missing the { and }.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[103.76772700000001, 1.47063],
[103.76772700000001, 1.4795775862068967],
[103.758794, 1.4795775862068967],
[103.758794, 1.47063],
[103.76772700000001, 1.47063]
]
]
]
},
"properties": {
"number": "01"
}
},
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[104.00891800000001, 1.47063],
[104.00891800000001, 1.4795775862068967],
[103.99998500000001, 1.4795775862068967],
[103.99998500000001, 1.47063],
[104.00891800000001, 1.47063]
]
]
]
},
"properties": {
"number": "03"
}
}
]
}
I've a problem with a query matching items inside a BoundingBox.
How it's possible to match all items of type 2dsphere (GEO JSON)?
In this case I only got the data of type Point but the items of type LineString won't appear inside the result.
The schema definition looks like the following example:
/**
* Media location values (Point, LineString, Polygon)
* #property location
* #type {Object}
*/
location:{
"type":Object,
"index":"2dsphere"
},
I've e.g. this items in it:
[
{
"_account": "52796da308d618090b000001",
"_id": "5284e5798a1c039735000001",
"location": {
"coordinates": [
8.663705555555556,
50.10165277777778
],
"type": "Point"
},
"name": "Foto.JPG",
"preview": "/img/thumbs/13719-3zavxm.JPG",
"type": "image/jpeg",
"added": "2013-11-14T15:00:09.113Z",
"latlng": [ ],
"shares": [ ],
"shared": false,
"tags": [ ]
},
{
"_account": "52796da308d618090b000001",
"name": "Filtererd_Track.kml",
"type": "application/vnd.google-earth.kml+xml",
"_id": "5284e5c48a1c039735000002",
"added": "2013-11-14T15:01:24.280Z",
"latlng": [ ],
"shares": [ ],
"shared": false,
"tags": [ ]
},
{
"_account": "52796da308d618090b000001",
"_id": "5284e5c48a1c039735000003",
"location": {
"coordinates": [
[
9.49653,
50.94791
],
[
9.49731,
50.94811
],
[
9.49744,
50.94812
],
[
9.49755,
50.94808
],
[
9.4991,
50.94579
],
[
9.49969,
50.94545
],
[
9.50037,
50.94525
],
[
9.50136,
50.9452
],
[
9.50851,
50.98557
]
],
"type": "LineString"
},
"name": "test 2.gpx",
"preview": "/img/thumbs/13719-14rvt8w.png",
"type": "application/gpx+xml",
"added": "2013-11-14T15:01:24.529Z",
"latlng": [ ],
"shares": [ ],
"shared": false,
"tags": [ ]
}
]
The query to fetch the items looks like the following example but it does not match LineStrings / Polygons....
Think it's because of the subarrays but don't know how to include this in the query.
{
{
"location": {
"$geoWithin": {
"$box": [
[
-39.375,
36.73888412439431
],
[
76.640625,
56.897003921272606
]
]
}
}
}
}
I found a way to get everything in a bounding box by using $geoIntersects and create a Polygon from Bounding Box.
Like example below.
{
"location": {
"$geoIntersects": {
"$geometry": {
"type": "Polygon",
"coordinates": [
[
[
5.372314453125,
52.288322586002984
],
[
12.623291015625,
52.288322586002984
],
[
12.623291015625,
49.67829251994456
],
[
5.372314453125,
49.67829251994456
],
[
5.372314453125,
52.288322586002984
]
]
]
}
}
}
]
}