We Keep Coding

Layer switcher for OpenLayers3 (bindto replacement)

In order to generate checkbox from layers array, I am using this example: https://openlayersbook.github.io/ch04-interacting-with-raster-data-source/example-06.html. However, since this part of the code:
var visible = new ol.dom.Input(document.getElementById('layer_id_' + i));
visible.bindTo('checked', layers[i], 'visible');
is deprecated since v3.5.0 (I am using v3.8.2), I found out that I can change it with this one:
var layer = new ol.layer.Tile();
var checkbox = document.querySelector('#checkbox');
checkbox.addEventListener('change', function() {
var checked = this.checked;
if (checked !== layer.getVisible()) {
layer.setVisible(checked);
}
});
layer.on('change:visible', function() {
var visible = this.getVisible();
if (visible !== checkbox.checked) {
checkbox.checked = visible;
}
});
but as I am JS noob, I was wondering if someone can help me out to implement this valid code in an example above + in addition to that I would like that only one layer, for example USA layer from Geoserver WMS demo, is checked and visible on load, and others are unchecked and not visible. (I don't know how to combain this events inside "for" loop - got stuck with it)

AngularJS -- RZSlider update stepsArray

I'm trying to edit the rz-slider's labels that appear below the ticks. I am able to obtain the values and everything but if I try to update the stepsArray to the rzslider, it is not being updated. I couldn't find anything on how to update the legend values like this. I feel like I need to reinitialize or refresh the slider in some way but the refresh slider code as shown in https://github.com/angular-slider/angularjs-slider did not work:
vm.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
The code that I am using is as follows. Currently the existing legend contains the word "Text" and I am just trying to check if I can update it to the numeric values just to check if it works but it isn't:
if(vm.legend != ""){
var stepCount = $("#stepCount").val();
vm.priceSlider.options.stepsArray = [];
for(var i = 1; i <= stepCount; i++){
vm.priceSlider.options.stepsArray.push({
value: i,
legend: i.toString()
});
}
vm.refreshSlider();
}
I am kinda new to angular and this is my first time working with the rzslider as well, so any help would be appreciated. Thank you.

Zoom in to by name of location in openlayer 3

I'm trying to zoom in to location by name in sequence of state > district> village through dynamic select box.
In this one I have created two functions named zoomToExtDist(name) and zoomToExtVil(distname,vilname). But don't know they are not working. Which function we should use in openlayers 3. Can anyone tell me where I'm doing wrong.
Here's the plunker I have created zoom to location updated link
Please tell me which function we should use to set the view through lat long in openlayers 3 .
Thanks in advance :)

Try this
$(function() {
var records = jsonList.listval;
// console.log(records);
insert($('#state_id'), plucker(records, 'state'));
//------------------------^ grabs unique states
//--^ populate state list on DOM ready
$('select').on('change', function() {
var category = this.id.split('_id')[0];
var value = $(this).find('option:selected').text();
switch (category) {
case 'state':
{
insert($('#district_id'), plucker(filter(records, 'state', value), 'district'));
break;
}
case 'district':
{
insert($('#village_id'), plucker(filter(records, 'district', value), 'village'));
break;
}
case 'village':
{
zoomToExtDist($(this).val());
break;
}
}
});
function zoomToExtDist(name)
{ console.log(name);
for (var i = 0; i < jsonList.listval.length; i++)
{
if(name==jsonList.listval[i].village)
{
var tlon = parseFloat(jsonList.listval[i].longitude);
var tlat = parseFloat(jsonList.listval[i].latitude);
//var lonlat = new OpenLayers.LonLat(tlat,tlon);
map.getView().setCenter(ol.proj.fromLonLat([tlat, tlon]));
map.getView().setZoom(5);
}
}
}
....
http://plnkr.co/edit/Rja2b1dLsJm7FDFtlUJ0?p=preview

I cant comment because I don't have enough reputation, but in your plunkr I dont see the zoomtodist and zoomtovil functions? Which file are they in? Also, have you tried using the view.centerOn() [http://openlayers.org/en/v3.14.2/apidoc/ol.View.html#centerOn]? Or the view.setCenter() and view.setZoom() separately to perform the centring and zoom?

Event on second and third click

I'm currently in the process of making a website for my band, and one idea I had was that on a specific page, you would see a picture of each band member, and when you hover over it with your mouse the picture would change and you would hear that band member saying something, then when you click on them, they say something else and you'll be redirected to their page.
This alone isn't a problem, but for one member, I want it to take three clicks before you actually get redirected to his page; I also want him to say something different at each click.
So what I'm basically looking for is a way to create different events on the first, second and third click (preferably using javascript).
I hope you guys can help me out, thanks in advance!

Just use variable to count clicks:
var count = 0
$(".test").click(function() {
count++;
if(count == 1) {
$(".test").text("first");
}else if(count == 2){
$(".test").text("second");
}else if(count == 3){
$(".test").text("third");
count = 0;
}
})
http://jsfiddle.net/x83bf1gq/4/

An option could be to create an onclick handler that keeps saying things until all texts in an array of texts are said. Once all the texts have been said, you can just redirect or whatever action you need to be done. Example:
var johnTexts = [
'hello',
'how are you doing',
'come on'
];
var jamesTexts = [
'ready',
'go'
];
var sayTexts = function (texts) {
var i = 0;
return function () {
if (i < texts.length) {
alert(texts[i++]);
} else {
alert('do your redirect or whatever you need');
}
};
}
document.getElementById('john').onclick = sayTexts(johnTexts);
document.getElementById('james').onclick = sayTexts(jamesTexts);
See demo

Simply set an event listener that makes different actions based on a global counter of clicks.
Check this fragment of code:
//set counter
var counter = 0;
var component = document.getElementByID("ID-of-component");
component.addEventListener('mouseover', function(){
//do something
});
component.addEventListener('click', function() {
switch(++counter) {
case 1: /* do something */ break;
case 2: /* do something */ break;
case 3: /* do something */ break;
}
counter = 0; //reset counter
});
Obviously, you have to write this code for each component of your band.

Highcharts manually setting legendItemClick event

I need to set the plotOptions -> events -> legendItemClick but manually on button click.
I though it would be something like chart.plotOptions.events.legendItemClick = function() {...}; but that obviously wasn't the solution.
I am not even sure if this is possible and I have to implement it on chart creation ONLY.
Any guidance on this is much appreciated. Thanks.
Setting in highcharts via creation:
plotOptions: {
series: {
events: {
legendItemClick: function() {
// Do something
}
}
}
}
What I want to do... (Post creation)
var chart = $('#container').highcharts(); // Get the highcharts
// This doesn't work
chart.plotOptions.series.legendItemClick = function() { // Set the legendItemClick
// Do something
}

We do it but within the legendItemClick itself. This work for us as we only have 2 states. The first is the initial load where we let the chart built with default legend click actions (all series are visible, clicking on a series in the legend hides that series, clicking on that series again shows it). The other state is when a user has selected a display option in a ddl that removes all but one series as being visible and then the user can click on a legend item and only show that item. We do it like:
function(event) {
var e = document.getElementById('" & gModeElementId & "');
var strGraphMode = e.options[e.selectedIndex].value;
if (strGraphMode == 'single') {
var seriesIndex = this.index;
var serie = this.chart.series;
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
var ctitle = this.chart.yAxis[0].axisTitle;
ctitle.attr({text: serie[i].name});
} else {
serie[i].hide();
}
}
return false;
}
}
We also have not found a way to actually modify an existing legendItemClick function.