Related
I am trying to plot polylines using response data from ESRI ArcGiS.
But instead of geo co-ordinates, what i am receive are Map Co-ordinates, which I cannot find how to implement into my maps.
I am using Mapbox Open street maps, in order to display the map as well as the polygon.
The below information is the initial part of the response.
"results": [
{
"paramName": "Output_Feature_Class",
"dataType": "GPFeatureRecordSetLayer",
"value": {
"displayFieldName": "",
"geometryType": "esriGeometryPolyline",
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
},
While the geometry paths are.
"geometry": {
"paths": [
[
[
-9983578,
4174731
],
[
-9983584,
4174710
],
[
-9983598,
4174682
],
[
-9983612,
4174652
],
[
-9983619,
4174624
],
[
-9983591,
4174616
],
[
-9983561,
4174603
],
[
-9983534,
4174581
],
[
-9983518,
4174553
],
[
-9983513,
4174524
],
[
-9983510,
4174505
],
[
-9983510,
4174463
],
[
-9983516,
4174365
],
[
-9983519,
4174252
],
[
-9983526,
4174095
],
[
-9983390,
4174093
]
],
I have been reading on the Mapbox documentation, and couldn't find any info on map co-ordinates.
Can help in pointing me towards using map coordinates, and how they are to be used in plotting ploylines
I am trying to do something similar to this: https://directmail.taradel.com/step1-target.aspx
I have narrowed down to using is a Canvas overlay on top of the map, for the interim, but I am not sure on its scalability. Would appreciate your opinion here
https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/
I think I found an avenue I could explore.
I referred to this link which told me that I should convert the map co-ordinates to geo co-ordinates,
MapBox ESRI Data Layer
And the theoretic behind it is here : https://gis.stackexchange.com/questions/9442/arcgis-coordinate-system
I will let you all know, how it goes.
I am trying to parse the following JSON payload:
{
"results":[
[
298.648132,
280.68692,
356.54184,
388.085541,
183.491806,
-484.676086,
-468.069916,
-446.741699
],
[
299.641846,
285.005798,
358.563812,
389.283997,
212.144806,
-485.533844,
-469.071533,
-447.885406
],
[
302.24469,
291.76059,
362.658936,
392.376129,
217.732513,
-484.816711,
-468.566711,
-447.615082
],
[
303.058899,
297.929199,
365.46994,
393.894928,
213.591797,
-486.055756,
-469.872986,
-449.343323
],
[
304.604095,
304.826233,
369.112122,
396.274597,
206.882492,
-486.385498,
-470.249512,
-450.089935
],
[
305.541901,
306.31842,
370.016907,
396.985413,
200.299408,
-486.345032,
-470.176208,
-450.01059
],
[
305.137024,
306.015381,
369.381042,
396.26059,
196.422821,
-487.490143,
-471.321533,
-451.191711
],
[
306.182373,
307.574707,
370.42627,
397.127747,
206.874603,
-487.188477,
-471.038483,
-450.869781
],
[
307.108887,
309.183777,
371.413666,
397.890198,
234.509079,
-486.957367,
-470.937103,
-450.646393
],
[
308.208923,
310.277588,
372.322968,
398.777618,
244.5168,
-486.2995,
-470.352631,
-449.89325
],
[
308.676208,
310.526123,
372.360626,
398.743317,
250.976288,
-486.666687,
-470.868408,
-450.324463
],
[
308.910583,
310.629242,
372.255676,
398.59491,
252.538498,
-487.001068,
-471.305817,
-450.616699
]
],
"columns":[
"5bb6a5d20ff4c313aab7241c.value.value",
"5bb6a5d30ff4c313aab72421.value.value",
"5bb6a5d30ff4c313aab72425.value.value",
"5bb6a5d30ff4c313aab72426.value.value",
"5bb6a5d30ff4c313091fe079.value.value",
"5bb6a5d30ff4c313091fe07b.value.value",
"5bb6a5d30ff4c313091fe07c.value.value",
"5bb6a5d40ff4c313091fe07f.value.value"
]
}
I am only interested in the "results" section. I will end up plotting these values.
I am proficient in C++, but new to JavaScript.
I've found plenty of examples with typical JSON strings, but I haven't found anything that works for this yet.
Thanks for the help.
Try the JSON.parse() function:
const payload = // your json payload
const json = JSON.parse(payload);
const results = json.results;
If you can copy-paste your json to your JS code directly then try
const payload = {"results": [ ... } // your json
const results = payload.results;
const payload ={"results":[[298.648132,280.68692,356.54184,388.085541,183.491806,-484.676086,-468.069916,-446.741699],
[299.641846,285.005798,358.563812,389.283997,212.144806,-485.533844,-469.071533,-447.885406],
[302.24469,291.76059,362.658936,392.376129,217.732513,-484.816711,-468.566711,-447.615082],
[303.058899,297.929199,365.46994,393.894928,213.591797,-486.055756,-469.872986,-449.343323],
[304.604095,304.826233,369.112122,396.274597,206.882492,-486.385498,-470.249512,-450.089935],
[305.541901,306.31842,370.016907,396.985413,200.299408,-486.345032,-470.176208,-450.01059],
[305.137024,306.015381,369.381042,396.26059,196.422821,-487.490143,-471.321533,-451.191711],
[306.182373,307.574707,370.42627,397.127747,206.874603,-487.188477,-471.038483,-450.869781],
[307.108887,309.183777,371.413666,397.890198,234.509079,-486.957367,-470.937103,-450.646393],
[308.208923,310.277588,372.322968,398.777618,244.5168,-486.2995,-470.352631,-449.89325],
[308.676208,310.526123,372.360626,398.743317,250.976288,-486.666687,-470.868408,-450.324463],
[308.910583,310.629242,372.255676,398.59491,252.538498,-487.001068,-471.305817,-450.616699]],
"columns":["5bb6a5d20ff4c313aab7241c.value.value","5bb6a5d30ff4c313aab72421.value.value",
"5bb6a5d30ff4c313aab72425.value.value","5bb6a5d30ff4c313aab72426.value.value",
"5bb6a5d30ff4c313091fe079.value.value","5bb6a5d30ff4c313091fe07b.value.value",
"5bb6a5d30ff4c313091fe07c.value.value","5bb6a5d40ff4c313091fe07f.value.value"]}
const results = payload.results;
console.log(results);
Lets say that i have a LineString (A car route):
let lineCoords = [
[ 10.964832305908203, 41.004681939880314 ],
[ 10.977363586425781, 40.99096148527727 ],
[ 10.983200073242188, 40.97075154073346 ],
[ 11.02834701538086, 40.98372150040732 ],
[ 11.02508544921875, 41.00716631272605 ],
];
And a another LineString (The stops that i have to make)
let arrayOfPoints = [
[ 10.964832305908203, 41.004681939880314 ],
[ 10.994186401367188, 41.01947819666632 ],
[ 10.977363586425781, 40.99096148527727 ],
[ 10.983200073242188, 40.97075154073346 ],
[ 11.02508544921875, 41.00716631272605 ],
[ 10.964832305908203, 41.004681939880314 ],
[ 11.02834701538086, 40.98372150040732 ],
];
Now i wanna sort arrayOfPoints based on lineCoords
How can i make it?
Can Turf help?
We have on our project a JSON file made by another team that helped to create dynamic SVG with binding. The problem with the JSON file is it contains duplicate and unoptimized paths.
I've decided to make a NodeJS script that scan the paths contained into the file and that optimize it.
A sample of an unoptimized path:
"paths": [ "M59245.1734326687,2320.0L59266.994415716,2320.0L59266.994415716,2320.0L59306.410931336,2320.0L59306.410931336,2320.0L59345.827446956,2320.0L59345.827446956,2320.0L59385.243962576,2320.0L59385.243962576,2320.0L59424.660478196,2320.0L59424.660478196,2320.0L59464.076993816,2320.0L59464.076993816,2320.0L59503.493509436,2320.0L59503.493509436,2320.0L59542.910025056,2320.0L59542.910025056,2320.0L59582.326540676,2320.0L59582.326540676,2320.0L59621.743056296,2320.0L59621.743056296,2320.0L59633.0477129758,2320.0L59633.0477129758,2320.0L59661.159571916,2320.0L59661.159571916,2320.0L59700.576087536,2320.0L59700.576087536,2320.0L59739.992603156,2320.0L59739.992603156,2320.0L59779.409118776,2320.0L59779.409118776,2320.0L59818.825634396,2320.0L59818.825634396,2320.0L59858.242150016,2320.0L59858.242150016,2320.0L59897.658665636,2320.0L59897.658665636,2320.0L59937.075181256,2320.0L59937.075181256,2320.0L59976.491696876,2320.0L59976.491696876,2320.0L60015.908212496,2320.0L60015.908212496,2320.0L60030.5396230941,2320.0L60030.5396230941,2320.0L60055.324728116,2320.0L60055.324728116,2320.0L60094.741243736,2320.0L60094.741243736,2320.0L60134.157759356,2320.0L60134.157759356,2320.0L60173.574274976,2320.0L60173.574274976,2320.0L60212.990790596,2320.0L60212.990790596,2320.0L60252.407306216,2320.0L60252.407306216,2320.0L60291.823821836,2320.0L60291.823821836,2320.0L60331.240337456,2320.0L60331.240337456,2320.0L60370.656853076,2320.0L60370.656853076,2320.0L60410.073368696,2320.0L60410.073368696,2320.0L60428.0157666062,2320.0M60428.0,2320.0L60428.0044472058,2319.99990189987L60428.0044472058,2319.99990189987" ]
Path without duplicates (half the length!):
"paths": [ "M59245.1734326687,2320L59266.994415716,2320,59306.410931336,2320,59345.827446956,2320,59385.243962576,2320,59424.660478196,2320,59464.076993816,2320,59503.493509436,2320,59542.910025056,2320,59582.326540676,2320,59621.743056296,2320,59633.0477129758,2320,59661.159571916,2320,59700.576087536,2320,59739.992603156,2320,59779.409118776,2320,59818.825634396,2320,59858.242150016,2320,59897.658665636,2320,59937.075181256,2320,59976.491696876,2320,60015.908212496,2320,60030.5396230941,2320,60055.324728116,2320,60094.741243736,2320,60134.157759356,2320,60173.574274976,2320,60212.990790596,2320,60252.407306216,2320,60291.823821836,2320,60331.240337456,2320,60370.656853076,2320,60410.073368696,2320,60428.0157666062,2320M60428,2320L60428.0044472058,2319.99990189987" ]
After analyzing results, I've come to a conclusion that I can do simplification of paths to reduce useles lines. So I've decided to do also a simplification of each paths using npm package simplify-path. It works fine:
Not simplified:
[ [ [ 59245.1734326687, 2320 ] ], [ [ 59266.994415716, 2320 ], [ 59306.410931336, 2320 ], [ 59345.827446956, 2320 ], [ 59385.243962576, 2320 ], [ 59424.660478196, 2320 ], [ 59464.076993816, 2320 ], [ 59503.493509436, 2320 ], [ 59542.910025056, 2320 ], [ 59582.326540676, 2320 ], [ 59621.743056296, 2320 ], [ 59633.0477129758, 2320 ], [ 59661.159571916, 2320 ], [ 59700.576087536, 2320 ], [ 59739.992603156, 2320 ], [ 59779.409118776, 2320 ], [ 59818.825634396, 2320 ], [ 59858.242150016, 2320 ], [ 59897.658665636, 2320 ], [ 59937.075181256, 2320 ], [ 59976.491696876, 2320 ], [ 60015.908212496, 2320 ], [ 60030.5396230941, 2320 ], [ 60055.324728116, 2320 ], [ 60094.741243736, 2320 ], [ 60134.157759356, 2320 ], [ 60173.574274976, 2320 ], [ 60212.990790596, 2320 ], [ 60252.407306216, 2320 ], [ 60291.823821836, 2320 ], [ 60331.240337456, 2320 ], [ 60370.656853076, 2320 ], [ 60410.073368696, 2320 ], [ 60428.0157666062, 2320 ] ], [ [ 60428, 2320 ] ], [ [ 60428.0044472058, 2319.99990189987 ] ] ]
Simplified:
[ 59245.1734326687, 2320, 60428.0044472058, 2319.99990189987 ]
How can I convert back to SVG Path the simplified array of points? Is there any API to this?
I drop a part from the code where I simplify SVG Path (except for the RegEx, the code is not from me!):
// Parse SVG Path to array.
var commands = pathArrays[i].paths[j].split(/(?=[LMC])/);
// Split the Path array into a Points array.
var pointArrays = commands.map(function(d){
var pointsArray = d.slice(1, d.length).split(/[\s,-]+/);
if (pointsArray[0] == '')
pointsArray.shift();
var pairsArray = [];
for(var i = 0; i < pointsArray.length; i += 2){
pairsArray.push([+pointsArray[i], +pointsArray[i+1]]);
}
return pairsArray;
});
// Call simplify method from npm package.
var simplifyArray = simplify(pointArrays, 10);
// ==> I want to convert array of points to SVG Path <==
Ya if you're literally not doing anything with curves etc, well then you just described a polygon. Which maybe explains why I don't see any commands in the non/simplified examples at the bottom? In which case your task becomes infinitely easier since you don't need to join on commands and just read off the points.
If that's the case, you could do something real simple like this quickie PoC I threw together. Hope it helps, or maybe elaborate more and we'll take another stab. I'm intrigued by the challenge. :)
var geometry = [
[
'109,141',
'59.073,97.825',
'9.146,54.65',
'71.5,33',
'133.854,11.35',
'121.427,76.175'
],
[
'133.989,130.188',
'86.736,114.757',
'47.501,145.276',
'47.272,95.175',
'6.275,66.815',
'53.385,51.282',
'67.284,3.237',
'96.629,43.738',
'146.216,42.404',
'117.242,82.968'
],
[
'8,80',
'58,144',
'143,49',
'127,6',
'60,112',
'35,63'
]
],
translate = 0,
create = function() {
for (i=0,r=geometry.length;i<r;i++) {
var polygon = geometry[i].join(),
colors = '#'+(Math.random()*0xFFFFFF<<0).toString(16),
shape = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
shape.setAttribute("points", polygon);
shape.setAttribute("fill", colors);
shape.setAttribute("transform", "translate(" + translate + ",0)");
translate += 150;
document.getElementById("shapes").appendChild(shape);
}
};
create();
<svg id="shapes"
width="450"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve">
</svg>
....and a CODEPEN to tinker with.
The following should do the job:
path = 'M' + simplifyArray.join(',');
So i have this json coming back from my server:
[
[
"formatted_sum_fees",
"£6.00"
],
[
"formatted_price",
"£60.00"
],
[
"formatted_sum_fees",
"£8.00"
],
[
"formatted_price",
"£120.00"
],
[
"formatted_price",
"£240.00"
],
[
"formatted_sum_fees",
"£3.20"
],
[
"formatted_sum_fees",
"£2.86"
],
[
"formatted_sum_fees",
"£2.50"
],
[
"ticket_desc",
"Later Owl Ticket"
],
[
"ticket_desc",
"Later Owl Ticket+Collector Ticket @ extra £4.95 per ticket"
],
[
"ticket_desc",
"Later Owl + Chance For VIP Upgrade"
],
[
"ticket_desc",
"VIP Ticket"
],
[
"ticket_desc",
"VIP Ticket + Collector Ticket @ extra £4.95 per ticket"
],
[
"ticket_desc",
"Skydeck Package"
],
[
"ticket_desc",
"5 Person Skydeck Table"
],
[
"ticket_desc",
"7 Person Skydeck Table"
],
[
"ticket_desc",
"10 Person Skydeck Table"
]
]
Now what im wanting is my ajax call to put these into a table. The first fees and price goes with the first ticket_desc. Each and everytime! The code i have the append to table code. ITs getting the price, fees and description into vars. How do i go about doing this?
This is how i was attempting to do this
success: function(json) {
for (var i = 0; i < json.length; i++) {
var section = json[i][0];
if (section == "ticket_desc") {
var ticket = json[i][1];
debugger;
}
However i ran into issues where the ticket_desc isn't matching up, However i didnt think it would work!
Thanks
Sam
It's not exactly clear to me what the eventual data format is supposed to be, and there are probably many different ways of processing your json, but let's try:
I'd prefer an array of objects that have a description and fee property. For example:
var ticket = {
description: "Later Owl Ticket",
fee: "£6.00"
};
Now, if I understand your data correctly, the order of the array in the json determines the matches between fees and descriptions.
If this is the case, and you can be certain there are no missing values, a straightforward solution could be:
var nrOfTickets = json.length / 2;
var fees = json.slice(0, nrOfTickets); // First half
var descriptions = json.slice(nrOfTickets); // Second half
var tickets = descriptions.map(function(descrArr, index) {
var feeArr = fees[index];
return {
description: descrArr[1],
fee: feeArr[1]
};
});
If you want to make it shorter, you could do:
var tickets = [];
for (var i = 0, l = json.length / 2; i < l; i += 1) {
tickets.push({
fee: json[i][1],
description: json[i+l][1]
});
};
If the fees and descriptions are scrambled, you can sort them like so:
var descriptions = [],
fees = [];
json.forEach(function(arr) {
if (arr[1] === "ticket_desc") {
descriptions.push(arr);
} else {
fees.push(arr)
};
});