We Keep Coding

Why does Leaflet.LayerGroup.Collision not work with my L.GeoJSON?

Trying to use the plugin "Leaflet.LayerGroup.Collision.js". I can't see what the error is as it is supposed to hide text when there is a collision. All text is showing but still collide into each other and looks pretty messy on the map.
What can be wrong in the below sample? I have tried to follow the instructions as good as possible but there seems to be something missing!
var point_txt = new L.layerGroup();
function filt_point(feature) {
if (feature.properties.size === "villages") return true;
}
var collisionLayer = L.LayerGroup.collision({ margin: 8 });
$.getJSON("/data/city_villages.geojson", function(json) {
var pointLayer = L.geoJSON.collision(null, {
filter: filt_point,
pointToLayer: function(feature, latlng) {
label = String(('<span class="textLabelclassmall">' + feature.properties.Namn + '</span>');
return new L.marker(latlng, {
icon: createLabelIcon("textLabelclasssmall", label)
});
}
});
var createLabelIcon = function(labelClass, labelText) {
return L.divIcon({
className: labelClass,
html: labelText
});
};
pointLayer.addData(json);
collisionLayer.addLayer(pointLayer);
collisionLayer.addTo(point_txt);
});
style.css:
.textLabelclassmall{
left: 1px;
top: -10px;
background-color: transparent;
display: inline-block;
text-align: left;
white-space:nowrap;
letter-spacing: 0.1em;
font-weight: 500;
font-size: 0.5vw;
}

An instance of Leaflet.LayerGroup.Collision expects the layers added to itself to be L.Markers, and not instances of L.LayerGroup (or instances of derived classes such as L.GeoJSON) - it is simply not prepared for that use case.
Add the individual markers as they are being created, or consider using L.GeoJSON.Collision instead.

I think I find a solution by using background-colourin style.css with transparent and use <span>tag for the label in the js code above. I have updated to the working solution for the code above.

Problems with CSS changes in JavaScript

I am trying do a CSS change via JavaScript. I have a quiz site where, when the user marks the correct option, the option will become green, and when the user marks the incorrect option, the option will become red, but I have to change the color and redirect the user for another page, but the CSS change is very slow and, at certain times, doesn't work. This is my code:
CSS:
.choice{
white-space: normal;
word-wrap: break-word;
margin: 20px;
width: calc(40% + 100px);
height: calc(10% + 10px);
border-style: solid;
border-color: rgba(0, 0, 0, 0.4);
border-radius: 7px;
background-color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 20px;
transition: 0.4s;
}
JS:
function sleep(ms) {
var d = new Date();
var d2 = null;
do { d2 = new Date(); }
while(d2-d < ms);
}
function govariable(page,variable,valor,id,color) {
document.getElementById(id).style.backgroundColor = color
sleep(3000)
window.location.replace(`${page}?${variable}=${valor}`)
}

When you change something in the DOM (in this case, your background color) JavaScript won't update your screen until the event it is processing has finished.
This is because JavaScript runs in only one thread - it can't be looping around and around and re-displaying your background colour at the same time! It needs to finish looping first.
Instead of trying to implement a "sleep" function that will never work well in a single-threaded javascript world, you should try using setTimeout().
function govariable(page,variable,valor,id,color) {
document.getElementById(id).style.backgroundColor = color
setTimeout(function() {
window.location.replace(`${page}?${variable}=${valor}`)
}, 3000);
}
Instead of looping around again and again until time is up, at a very simplistic level this does something more like setting an internal "wake-up alarm" inside the JavaScript engine, that in 3000 milliseconds will go off, and tell JavaScript to run the code inside it. In this case, to call window.location.redirect.

No hover color after javascript used once

JS Fiddle: https://jsfiddle.net/q3ahefdg/2/
If you hover before clicking on "Capitol 1" you will see the background color changing, but after you show and then hide the elements, if you hover again over "Capitol 1" you won't see the color changing.
How can I make the color change after clicking (like before) ?
function functie() {
var x = document.getElementById("Elemente");
if (x.style.display === "none") {
document.getElementById("Buton1").style.backgroundColor = "rgb(132, 197, 232)";
x.style.display = "block";
} else {
document.getElementById("Buton1").style.backgroundColor = "rgb(154, 208, 237)";
x.style.display = "none";
}
}

A much better way would be to get the background-color: rgb(132, 197, 232); in a seperate class, and then just toggle that whenever you like.
You can apply it like this:
var element = document.getElementById("myDIV");
element.classList.toggle("clicked");
where the css is:
.clicked {background-color: rgb(132, 197, 232);}
and it should work properly

The problem is that inline styles, which is what you are setting through JS, take precedence over the ones that come from CSS classes, due to CSS specificity rules.
Adding a !important declaration on the hover background, like this, works:
.LinkBaraStanga:hover {
background-color: rgb(132, 197, 232) !important;
}
However, a better solution would be creating different classes for the different cases of the button, so you can better manage the different states, and don't run into the problem of having to override a previous !important declaration:
.LinkBaraStanga--off {
background-color: rgb(154, 208, 237);
...
}
.LinkBaraStanga--off:hover {
background-color: rgb(132, 197, 232);
}
.LinkBaraStanga--on {
background-color: rgb(154, 208, 237);
}
And then instead of setting the element's style via JS, add or remove the desired classes. For example:
<button class="LinkBaraStanga LinkBaraStanga--off">
And on the JS, call these functions together to toggle between both classes:
element.classList.toggle('LinkBaraStanga--on')
element.classList.toggle('LinkBaraStanga--off')
For more information on how to set the classes of an element, refer to classList on MDN.

Fixed it. Just had to add "!important" in the hover class:
.LinkBaraStanga:hover { background-color: rgb(132, 197, 232)!important; }

Keep / Exclude brushed data in parallel coordinates d3.js

I am working to this example and trying to give it the same functionality for keeping/excluding the information in the brush as this example by Kai.
I have reviewed the code and apparently, Kai's example is built upon V.2 of D3 (at least the script that it calls is there). Because of this most of the coordinate system is not based upon the d3.parcoords.js library. My question is, how would I be able get the same result using parcoords.js ? Do you think it will be needed to modify parcoords.js to include Kai's functionality? I think that the problem is that the method Kai uses conflicts with the parcoords.js methods to draw axes.
I reviewed the parcoords.js documentation and there are no indications of a method or function to extract this information, at least in the same way. I am fairly new to javascript, but any help would be appreciated.
EDIT:
The part of the code I am trying to port is at the very bottom.
<!doctype html>
<title>Decision making tool</title>
<link rel="stylesheet" type="text/css" href="_/d3%20library/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="_/d3%20library/style.css">
<style>
/* data table styles */
#grid {
height: 198px;
}
.row,
.header {
clear: left;
font-size: 12px;
line-height: 18px;
height: 18px;
}
.row:nth-child(odd) {
background: rgba(0, 0, 0, 0.05);
}
.header {
font-weight: bold;
}
.cell {
float: left;
overflow: hidden;
white-space: nowrap;
width: 100px;
height: 18px;
}
.col-0 {
width: 180px;
}
</style>
<script src="_/d3 library/d3.min.js"></script>
<script src="_/d3 library/d3.parcoords.js"></script>
<script src="_/d3 library/divgrid.js"></script>
<script src="_/script.js"></script>
//The header div includes the buttons that are shown below.
<div id="header">
<h1>EUI assesment tool</h1>
<button title="Zoom in on selected data" id="keep-data" disabled="disabled">Keep</button>
<button title="Remove selected data" id="exclude-data" disabled="disabled">Exclude</button>
</div>
<div id="chart" class="parcoords" style="height:600px;"></div>
<div id="grid"></div>
<script id="brushing">
// quantitative color scale
var green_to_red = d3.scale.linear()
.domain([40, 200])
.range(["green", "red"])
.interpolate(d3.interpolateLab);
var color = function(d) {
return green_to_red(d['Site EUI (kBtu/sq ft)']);
};
var parcoords = d3.parcoords()("#chart")
.color(color)
.margin({
top: 50,
left: 250,
bottom: 20,
right: 20
})
// .composite('lighter')
.alpha(0.25);
// load csv file and create the chart
d3.csv('_/data/Mock Data Chicago.csv', function(data) {
parcoords
.data(data)
.hideAxis(["Property Name", "Address", "Community Area", "ZIP Code", "# of Buildings", "ENERGY STAR Score"])
.mode("queue")
.rate(30)
.interactive()
.render()
.brushMode("1D-axes"); // enable brushing
// create data table, row hover highlighting
var grid = d3.divgrid();
d3.select("#grid")
.datum(data.slice(0, 5))
.call(grid)
.selectAll(".row")
.on({
"mouseover": function(d) {
parcoords.highlight([d])
},
"mouseout": parcoords.unhighlight
});
// update data table on brush event
parcoords.on("brush", function(d) {
d3.select("#grid")
.datum(d.slice(0, 5))
.call(grid)
.selectAll(".row")
.on({
"mouseover": function(d) {
parcoords.highlight([d])
},
"mouseout": parcoords.unhighlight
});
});
});
//Below is the code I copied from Kai's version. I think the if statement is not returning information for the buttons above to enable
if (selected.length < data.length && selected.length > 0) {
d3.select("#keep-data").attr("disabled", null);
d3.select("#exclude-data").attr("disabled", null);
} else {
d3.select("#keep-data").attr("disabled", "disabled");
d3.select("#exclude-data").attr("disabled", "disabled");
};
function keep_data() {
new_data = actives();
if (new_data.length == 0) {
alert("I don't mean to be rude, but I can't let you remove all the data.\n\nTry removing some brushes to get your data back. Then click 'Keep' when you've selected data you want to look closer at.");
return false;
}
data = new_data;
rescale();
}
// Exclude selected from the dataset
function exclude_data() {
new_data = _.difference(data, actives());
if (new_data.length == 0) {
alert("I don't mean to be rude, but I can't let you remove all the data.\n\nTry selecting just a few data points then clicking 'Exclude'.");
return false;
}
data = new_data;
rescale();
}
</script>
It may be something with the if statement not getting information?

How to check in javascript that how much div settle as rows in wrapper?

The source is here http://jsfiddle.net/4fV3k/
I have a function SetGridBorder which take style of border like 1px solid red and selector of wrapper like box-wrapper.
As my example code 4 rows is lived in a row so their is 4 cols and 4 rows. How I can determine it in JavaScript. I want to set the border in this rules.
the 2 and 3 in first row have missing left and right border (so this is not duplicate border).
2nd and third column (middles rows) have missing top and bottom border so no duplicate border for here also.
How I can do it in JavaScript? Do someone have suggestion for how to do it better?
$(document).ready(function () {
var box_wrapper = $(".box-box-wrapper", ".box");
SetGridBorder(4,4)
});
function SetGridBorder(style,selector) {
}​

You can get how many rows and columns by divide wrapper width and height to box width and height. In your example wrapper height was zero, so i added overflow:auto; to body .box-wrapper class. Updated fiddle at http://jsfiddle.net/4fV3k/7/
function getRows() {
var wrapperWidth = $(".box-wrapper").width();
var boxWidth = $(".box-wrapper > div").width();
return Math.floor(wrapperWidth / boxWidth);
}
function getColumns() {
var wrapperHeight = $(".box-wrapper").height();
var boxHeight = $(".box-wrapper > div").height();
return Math.floor(wrapperHeight / boxHeight);
}

FYI.
body .box {
width: 128px;
height: 128px;
float: left;
text-align: center;
border:solid 1px #555;
}
$(document).ready(function () {
$.each($(".box"),function(i,n){
if((i+1)%4!=0){
$(n).css({'border-right':'none'})
}
if((i+1)>4){
$(n).css({'border-top':'none'})
}
});
});