We Keep Coding

How to fly to specific coordinates that are stored in variable? Leaflet.js

I am making some fire location tracking website, and I encounter problem with leaflet.js.
I am new to the leaflet, so any help is appreciated!
I have a script that will get id of specific row from table (table is connected to sql), and it works:
var coordinates = [43.855202, 18.417892];//some basic location
var kordinate1 = [43.855202, 18.417892];//same like first
var kordinate;
//code for getting specific id down
const Listen = (doc) => {
return {
on: (type, selector, callback) => {
doc.addEventListener(type, (event)=>{
if(!event.target.matches(selector)) return;
callback.call(event.target, event);
}, false);
}
}
};
Listen(document).on('click', '.btn', function (e) {
idoffire = e.target.id - 100;//ignore this, it works
coordinates = document.getElementById(idoffire).innerHTML;//read from table space with specific id, also tried changing this to .innerText, .value, but it doesn't work.
kordinate1 = coordinates.replace(/\s/g, ',');//in table coordinates have only space between them and not comma
kordinate = "[" + kordinate1 + "]"; //put them like this so map.flyTo can read it, but it doesn't
console.log(kordinate);//console log of kordinate, and in console, kordinate looks like in picture below
map.flyTo(kordinate, 18);//PROBLEM HERE!
});
(don't look at e.target.id - 100, it's just how to get my specific id ;) )
Thank You for your help!
Note: I am not trying to get coordinates from user input, I already have them in database, so this question is not the same like this one.
Again, thank You for your help.

You are passing a string to flyTo. This is not accepted by the method. The method accepts (as the first argument) LatLng – you can use the utility method L.latLng(number, number, number?) to create one – see https://github.com/Leaflet/Leaflet/blob/main/src/geo/LatLng.js. As with the nature of JavaScript, you could also pass an array [number, number].
You can convert your stringified-array to an literal like the latter with JSON.parse(kordinate).
...
kordinateArr = JSON.parse(kordinate);
map.flyTo(kordinateArr, 18);

Change thousands sign using JS

Here I would like to replace in the draggable slider the "," sign used for the thousands into this sign " ' " (a quote mark).
I am currently using a plugin to render the table (from a JSON file) so I cannot alter the HTML.
I am able to change the sign, in fact on page load the sign seems correct, but as soon I drag the slider the separator changes to a comma again.
I saw that the data is rendered from the Plugin with a comma in the aria-valuetext="" attribute: <div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="100.0" aria-valuetext="2,290.00"><div class="noUi-tooltip">2,290.00</div></div>
I tried using this code without any results:
<script>
window.onload = function(){
var div = document.querySelectorAll('.noUi-tooltip');
div.forEach(function(r) {
var text = r.textContent;
var output = text.replace(/[,|]/g, "'");
r.innerHTML = output;
});
}
</script>
What am I writing wrong?
I am using WordPress and the wpdatatables plugin.

I'm not sure about the plugin you've used for your slider but perhaps you can try this for now:
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == "attributes") {
var parentEl = document.getElementsByClassName('noUi-handle-upper');
var childEl = parentEl.childNodes[0];
childEl.innerHTML = childEl.innerHTML.replace(',', '\'');
}
});
});
observer.observe(document.getElementsByClassName('noUi-handle-upper')[0], {
attributes: true,
});
It's using MutationObserver which is not supported by older browsers. You can read more about it at https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.

This is because you modify the string just in the beginning (on load).
This is why the code works in the beginning but doesn't work later, because it runs once and then stops.
I don't know how to use WordPress or sliders, but I'd advise you to use an 'on value changed' command, so the text will change to whatever you want it to each time the slider's value is changed.
I will post this now but I'll review your code and will try to update this with more exact information later.

C3 charts not rendering from jQuery data

So I'm just getting into some simple UI stuff, and I'm stuggling with Javascript. I managed to get a couple of for-loops to create tags and render some charts, works great.
But I then used jquery to fetch a block of JSON data from a Spring Boot REST service.
$.getJSON('api/randomData?chartCount=' + chartsToMake).done( function(data) {
// Extract list of servers from the data...
var hostList = []
$.map(data, function(row) { hostList.push(row.host); });
// Make it a unique list
var uniqueHostList = hostList.unique();
// Iterate over the unique list of servers
uniqueHostList.forEach( function(host) {
var tag = "chart" + host.replace(/\./g, "");
var hostdata = data.filter( (v,i,a) => v.host === host)
console.log("Processing Server:" + host + " with " + hostdata.length + " rows");
// Create DOM element to bind the chart to
document.getElementById("chartBlocks").innerHTML += "<div id=\"" + tag.replaceAll('#','') + "\"></div>";
// Create the Chart here
var chart = c3.generate({
bindto: "#" + tag,
data: {
json: hostdata,
keys: { value: ['lowerband'] }
}
});
});
});
This gets an array of JSON strings back, each object contains one metric for a server, all the HTML tags are inserted, but only the last chart draws up.
I added lots of console.out() stuff to try and debug this, it has the data and everything seems to be working, and the last chart looks fine, but the other 3 above it dont populate.
I've been pulling my hair out trying to work out why, please help!
PS. I created a github project here which is a simple maven/spring boot application.
https://github.com/tfindlay-au/c3demo
There is a working page called "working.html" and "index.html" which doesnt work.
FWIW - it feels like a variable scope thing or maybe a timing thing if I'm trying to generate the chart before the data is avilable or something. Not sure if that helps.

"only the last chart draws up."
document.getElementById("chartBlocks").innerHTML += "<div id=\"" + tag.replaceAll('#','') + "\"></div>";
Because that line (at first I thought it completely replaced the content but then I saw the += ) has bad side-effects for the existing content of chartblocks. Specifically it wipes out the event functionality (edit: and data) which setting up a c3.chart has attached to elements in that chart. When you then set innerHTML in chartblocks again, all that stuff is replaced by the innerHTML string, which is just a literal copy of the structure of the dom elements - wiping out any previously attached event handlers or data properties.
You instead need to append an extra div to chartblocks, which leaves the existing sibling charts in peace, and since c3 uses the d3 library you can do it like this:
d3.select("#chartBlocks").append("div").attr("id", tag.replace('#',''));

ngjstree: error when select node automatically

I'm using NgJsTree (https://github.com/ezraroi/ngJsTree) for create a tree. I would like that the option choose by user was saved; so I'm saving the user's choice and the full path in a pair of variable. In particular case, I get the full path like this data.instance.get_path(data.node,'/'); and the selected node in this way data.instance.get_node(data.selected[i])
I trigger the loaded event with this function:
openSelectedNode = function(e, data){
var nodes = config.path.split("/");
for(var i=0;i<nodes.length;i++){
$(this).jstree("open_node", $('#' + nodes[i].replace(" ", "")));
}
$(this).jstree('select_node', $('#' + nodes[nodes.length-1] ));
}
So in this way, when the tree is load, I can reopen the tree and select the correct node. The code works, but in console I have this error:
Uncaught TypeError: Cannot read property 'parents' of undefined
It isn't the right approach? Am i doing any errors?
Thanks in advance.
Regards

It looks like you might be calling node.parents somewhere, which happened to me. Also, I would approach your problem different.
I would:
Use the instance provided by ngJStree to reference the tree, and then use
var selectedNode = vm.treeInstance.jstree(true).get_selected();
Store that nodes id, then set its state to "selected: true" before you create the the tree the next time. It should be already selected that way.

In jsTree , How to get Node information by node id?

In jsTree ,How to get Node information by node id ?
I know id of following node i.e 295 then how to get complete node information
<item id="295" parent_id="192" title="itemTitle" version="1">
<content><name>Bhushan Sambhus</name></content>
</item>
above xml part rendered into jsTree is as follows
$("#treeViewDiv").jstree({
"xml_data" : {
"data" : "" +
"<root>" +
"<item id="295" parent_id="192" title="itemTitle" version="1">"+
"<content><name>Bhushan Sambhus</name></content> "+
"</item>"
}
"plugins" : [ "themes", "xml_data","ui" ]
});
Something like following psudo code
function getNodeByNodeID(node_id){
// some code
// $.jstree.get_node ...... etc ?
//
return relatedNodeInformation;
}
var nodeInfo = getNodeByNodeID(providedNodeID) // psudo code
// any api in jstree to get nodeInfo by providedNodeID?
var parent_id_value = nodInfo.attr("parent_id");
var title_value = nodInfo.attr("title");
var version_value = nodInfo.attr("version");
var node_name = nodInfo.children("a").text()
alert(parent_id_value+" :: "+title_value+" :: "+version_value+" :: "+node_name);
Input : 295
Output: 192 :: node_name :: 1 :: node_name
Any help or guidance in this matter would be appreciated

If I'm understanding your question correctly, you can accomplish what you want to do like this:
var nodInfo = $("#" + providedNodeId);
var parent_id_value = nodInfo.attr("parent_id");
var title_value = nodInfo.attr("title");
var version_value = nodInfo.attr("version");
var node_name = nodInfo.children("a").text();
alert(parent_id_value+" :: "+title_value+" :: "+version_value+" :: "+node_name);

Just want to help keep the answer up-to-date. Using jstree 3.1.0, node objects (not DOM objects) are fetched by using this code:
var treeMain; // reference holder
$(document).ready( function () { // when the DOM is ready
treeMain = $('#treeMenus').jstree(); // create the tree and get the reference
});
function getNode( sNodeID)
{
return $.jstree.reference(treeMain).get_node(sNodeID); // use the tree reference to fetch a node
}
I've seen several answers to this question on StackOverflow that all talk about getting back to the DOM object of a tree item. I'm willing to bet that most people asking this question really want to get back to the underlying JSON data object of a tree item, which is why they say they want the node object (which has the .original property). Specifically, you need this for implementing things like "create" functionality where you need to create a new JSON data object with a ParentID that is set to the ID of the parent JSON data object. I searched for 2 days and didn't find anything clear in the jstree documentation that explained this:
$.jstree.reference(treeMain).get_node(sNodeID);
simple call. In their defense, they do have a 1 line example buried in here:
http://www.jstree.com/docs/interaction/
but it's an example most people won't care about (the user will be selecting nodes most of the time), and certainly not clear for what it is actually capable of doing. Anyways... hope this is helps save someone else a couple of days. =)