Related
I have a long list of coordinates (sent by a GPS sensor) that represent the movement of an asset.
I'm using leaflet to render the GeoJSON and it works fine if I render the LineString as a single feature, but if I break it down into multiple features (inside a FeatureCollection - to apply a different dynamic color) I start to see "holes" between features.
I'm pretty sure that this is due to the fact that there is actually a "hole" in the data I'm receiving. But why it works as a single LineString feature? Is there a way to fix this?
This is an extract of the GeoJSON (very large object)
there are 3 of the 866 features of the object
{
"type":"Feature",
"properties":{
"type":"traffic",
"color":"#ffa600"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.583125,
45.0485616
],
[
7.5830532999999996,
45.0485816
],
[
7.58299,
45.0486133
],
[
7.582893299999999,
45.0486066
],
[
7.5828682999999995,
45.04859
]
]
}
},
link to bin
https://jsbin.com/nexijajake/edit?html,output
example with single feature
https://jsbin.com/guqihajalu/1/edit?html,output
Actually, there is nothing wrong with rendering. Your data array (in your jsbin link) is an array of linestrings that are not connected with each other. You got a schema like this (imagine each row is a linestring):
[pointA-pointB-pointC]
[pointD-pointE-pointF]
In order for your line to be continuous, the last point of each linestring should exist in the next linestring as first point:
[pointA-pointB-pointC]
[pointC-pointD-pointE-pointF]
This way, your line will be continuous.
For example, the following sample (taken from your jsbin) has a gap:
const data = [
{
"type":"Feature",
"properties":{
"type":"traffic",
"color":"#ffa600"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.583125,
45.0485616
],
[
7.5830532999999996,
45.0485816
],
[
7.58299,
45.0486133
],
[
7.582893299999999,
45.0486066
],
[
7.5828682999999995,
45.04859
]
]
}
},
{
"type":"Feature",
"properties":{
"type":"normal",
"color":"#07e36a"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.582795,
45.0485149
],
[
7.582624999999999,
45.0483233
],
[
7.581984899999999,
45.047521599999996
]
]
}
}
];
The gap is fixed (the first point of the second linestring is the last point of the first linestring):
const data = [
{
"type":"Feature",
"properties":{
"type":"traffic",
"color":"#ffa600"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.583125,
45.0485616
],
[
7.5830532999999996,
45.0485816
],
[
7.58299,
45.0486133
],
[
7.582893299999999,
45.0486066
],
[
7.5828682999999995,
45.04859
]
]
}
},
{
"type":"Feature",
"properties":{
"type":"normal",
"color":"#07e36a"
},
"geometry":{
"type":"LineString",
"coordinates":[
//the first point here is the last of previous linestring
[
7.5828682999999995,
45.04859
],
[
7.582795,
45.0485149
],
[
7.582624999999999,
45.0483233
],
[
7.581984899999999,
45.047521599999996
]
]
}
}
];
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?
I would to edit a code source from English to french. In the database a table has a colum with data enum('Male','Female') that I wish to change into enum('Homme','Femme'). Impossible and I receive a message like data truncated for colum 3.
I find the same information in some java file. When I change it only without change the database I receive the same errors.
What can I do?
this a part of code in lib.js
EmployeeAdapter.method('getFormFields', function() {
var newFields = [];
var tempField, title;
var fields = [
[ "id", {"label":"ID","type":"hidden","validation":""}],
[ "employee_id", {"label":"Employee Number","type":"text","validation":""}],
[ "first_name", {"label":"First Name","type":"text","validation":""}],
[ "middle_name", {"label":"Middle Name","type":"text","validation":"none"}],
[ "last_name", {"label":"Last Name","type":"text","validation":""}],
[ "nationality", {"label":"Nationality","type":"select2","remote-source":["Nationality","id","name"]}],
[ "birthday", {"label":"Date of Birth","type":"date","validation":""}],
[ "gender", {"label":"Gender","type":"select","source":[["Male","Male"],["Female","Female"]]}],
[ "marital_status", {"label":"Marital Status","type":"select","source":[["Married","Married"],["Single","Single"],["Divorced","Divorced"],["Widowed","Widowed"],["Other","Other"]]}],
[ "ethnicity", {"label":"Ethnicity","type":"select2","allow-null":true,"remote-source":["Ethnicity","id","name"]}],
[ "immigration_status", {"label":"Immigration Status","type":"select2","allow-null":true,"remote-source":["ImmigrationStatus","id","name"]}],
[ "ssn_num", {"label":"SSN/NRIC","type":"text","validation":"none"}],
[ "nic_num", {"label":"NIC","type":"text","validation":"none"}],
[ "other_id", {"label":"Other ID","type":"text","validation":"none"}],
[ "driving_license", {"label":"Driving License No","type":"text","validation":"none"}],
[ "employment_status", {"label":"Employment Status","type":"select2","remote-source":["EmploymentStatus","id","name"]}],
[ "job_title", {"label":"Job Title","type":"select2","remote-source":["JobTitle","id","name"]}],
[ "pay_grade", {"label":"Pay Grade","type":"select2","allow-null":true,"remote-source":["PayGrade","id","name"]}],
[ "work_station_id", {"label":"Work Station Id","type":"text","validation":"none"}],
[ "address1", {"label":"Address Line 1","type":"text","validation":"none"}],
[ "address2", {"label":"Address Line 2","type":"text","validation":"none"}],
[ "city", {"label":"City","type":"text","validation":"none"}],
[ "country", {"label":"Country","type":"select2","remote-source":["Country","code","name"]}],
[ "province", {"label":"State","type":"select2","allow-null":true,"remote-source":["Province","id","name"]}],
[ "postal_code", {"label":"Postal/Zip Code","type":"text","validation":"none"}],
[ "home_phone", {"label":"Home Phone","type":"text","validation":"none"}],
[ "mobile_phone", {"label":"Mobile Phone","type":"text","validation":"none"}],
[ "work_phone", {"label":"Work Phone","type":"text","validation":"none"}],
[ "work_email", {"label":"Work Email","type":"text","validation":"emailOrEmpty"}],
[ "private_email", {"label":"Private Email","type":"text","validation":"emailOrEmpty"}],
[ "joined_date", {"label":"Joined Date","type":"date","validation":""}],
[ "confirmation_date", {"label":"Confirmation Date","type":"date","validation":"none"}],
[ "termination_date", {"label":"Termination Date","type":"date","validation":"none"}],
[ "department", {"label":"Department","type":"select2","remote-source":["CompanyStructure","id","title"]}],
[ "supervisor", {"label":"Direct Supervisor","type":"select2","allow-null":true,"remote-source":["Employee","id","first_name+last_name"]}],
[ "indirect_supervisors", {"label":"Indirect Supervisors","type":"select2multi","allow-null":true,"remote-source":["Employee","id","first_name+last_name"]}],
[ "approver1", {"label":"First Level Approver","type":"select2","allow-null":true,"null-label":"None","remote-source":["Employee","id","first_name+last_name"]}],
[ "approver2", {"label":"Second Level Approver","type":"select2","allow-null":true,"null-label":"None","remote-source":["Employee","id","first_name+last_name"]}],
[ "approver3", {"label":"Third Level Approver","type":"select2","allow-null":true,"null-label":"None","remote-source":["Employee","id","first_name+last_name"]}],
[ "notes", {"label":"Notes","type":"datagroup",
"form":[
[ "note", {"label":"Note","type":"textarea","validation":""}]
],
And the structure of the table is
ALTER TABLE `employees` CHANGE `gender` `gender` ENUM('Male','Female')
CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL;
If I wish to change Male, female, Married etc into french.
When I do it I receive truncated error.
Sorry for my english caus I'm french
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(',');
I am trying to make it where my links in doxygen on my tree-style navbar have multiple links on the same level as the main page. I was able to accomplish that by changing the order of links in the navtreedata.js . Now the problem is that by doing this I appear to have made it where it thinks everything on the first level of links is the index/mainpage as far as the navtree is concerned. It shows the index/mainpage with the blue highlight behind it as if it is the one I clicked. The page displays the right information but it looks weird. Even worse, I have some links I placed on the top level of links(same level as the main page)that have subpages. Whenever I click a subpage it folds up the foldout, which is really annoying. Anyone know how I can fix this? I am afraid I will need to modify the navtree.js or the html/css somewhere but I don't know much about javascript or HTML/CSS. I believe it is upset because my links no longer match up with the indexes they are given in the navtreeindex0.js.Also if anyone knows an easier way of accomplishing my goals without changing the navtreedata.js please let me know.
The javacript for my navetree since I was asked for code:
var NAVTREE =
[
[ "Main page", "index.html", [
[ "page 1", "page1.html", null ],
[ "page2", "page2.html", [
[ page3", "page3.html", null ],
[ "page4", "page4.html", null],
[ "page5", "page5.html", [
[ "page6", "page6.html", null ],
[ "page7", "page7.html", null ]
] ],
[ "page8", "page8.html", null ]
] ],
[ "page9", null, [
[ "page10", "page10.html", null ]
] ],
[ "page11", "page11.html", null ]
] ],
[ "SECOND LEVEL MENU ENTRY", "sample-file-secondary.html", [
[ "page 12", "page12.html", null ],
[ "page 13", "page13.html", null ]
] ],
[ "THIRD LEVEL MENU ENTRY", "sample-file-third.html"]
];
var NAVTREEINDEX =
[
".html"
];
var SYNCONMSG = 'click to disable panel synchronisation';
var SYNCOFFMSG = 'click to enable panel synchronisation';