Develop Reference

map box js; hide and show label

I've never worked with JavaScript before. I'm trying to create a map where different layers can be hidden per users preference. I came across the helpful example on map box showing the exact code at https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/.
Now, my problem is, because I have numerous point layers of different magnitudes, I was forced to create several layers and filter them based on the desired attribute so each points appearance reflects that specific magnitude. However, I want all these points to be organized into years, so I grouped the layers. So all my layer names look something like this (2006_mag2,2006_mag8,2010_mag3...).
However, I want the hide/show option to show layers based on years. So I was thinking I could do some sort of operator like we use in sql (i.e. '2006%' or a LIKE operator). Looking at some posts a lot of people use '*' in JavaScript?
So this is what it would look like for each layer individually before:
var toggleableLayerIds = [ '2006_mag2', '2010_mag3' ];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
}
and this is my botched attempt at trying to group a number of the layers together:
var toggleableLayerIds = [ '2006.*', '2008.*' ];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
}
Any guidance you guys can provide will be greatly appreciated.

You could try to use loops with regex to group layerIds by date. Sorry I changed the name of your variables. This will get you an object with layerIds grouped by date.
var layerIds = [ '2006_mag2', '2010_mag3', '2006_mag8', '2006_mag1', '2008_mag2'];
var dates = ['2006', '2010'];
var groupedLayers = {};
//init your object to have a member for each date
//this could be done inside the loops below by testing if the array exists before pushing the matching layerId
for (var i=0; i < dates.length; i++) {
groupedLayers[dates[i]] = [];
}
//loop over your layerIds to match with the RegExp
for (var i=0; i < layerIds .length; i++) {
for (var j=0; j < dates.length; j++) {
var searchPattern = new RegExp('^' + dates[j]);
if (searchPattern.test(layerIds[i])) {
groupedLayers[dates[j]].push(layerIds[i]);
}
}
}
console.log(groupedLayers)
Please tell me what exact result you need so I could help you more.

Appending Items from one array to each and every element of another array in Javascript

Note: I am not asking how to append data to an array!
Rather my problem is that I want to append items to each and every element of an array.
Here is a part of my code:
dataset=[];
var xpoints=["Jan","Feb","Mar","Apr","May"];
var ypoints=[10,20,30,40,50];
for (var i = 0; i < xpoints.length; i++) {
dataset.push({
x : xpoints[i],
y : parseFloat(ypoints[i])
});
}
The array so far would be as below:
dataset[0] - {x:Jan,y:10}
dataset[1] - {x:Feb,y:20}
dataset[2] - {x:Mar,y:30}
dataset[3] - {x:Apr,y:40}
dataset[4] - {x:May,y:50}
So far there is no problem...
But if now i have another array (Suppose that it is of the same length), I want to append the new array's elements into my existing array such that my output would be as follows:
var zpoints=["a","b","c","d","e"];
/*
Do something
*/
Required Output:
dataset[0] - {x:Jan,y:10,z:a}
dataset[1] - {x:Feb,y:20,z:b}
dataset[2] - {x:Mar,y:30,z:c}
dataset[3] - {x:Apr,y:40,z:d}
dataset[4] - {x:May,y:50,z:e}
If I do:
for (var i = 0; i < dataset.length; i++) {
dataset.push({
z:zpoints[i]
});
}
it would append it as different elements in the dataset array, which is not what I am looking for.
Is the required output achieveable using JavaScript? How?
What if I want to add multiple objects to the dataset array but I do not know the number of objects to be added while compiling?
Suppose that there can be multiples arrays:
z1=["a","b","c","d","e"];
z2=["l","m","n","o","p"];
z3=...
.
.
and so on.. and the number is unknown until runtime.
I want to do something like this:(invalid code)
for(var j=0;j<length;j++) //Length will be known only during runtime
for (var i = 0; i < dataset.length; i++) {
dataset[i].z[j] = zpoints[i]; //z[j] is invalid!!
}
I need to name the objects dynamically somehow. Is there a way to achieve this?

It's rather simple:
for (var i = 0; i < dataset.length; i++) {
dataset[i].z = zpoints[i];
}
A .push call will always append more entries to the array; in this case you want to modify the existing ones.

You need to simply add new property z to existing object:
var l = zpoints.length;
while(l --)
dataset[l].z = zpoints[l];

Push attributes to array by className?

Can someone please help me with how to push different attributes of elements with the same classname into an array? I'm not that good at Javascript and this is what I have tried but the arrays turns up empty.
One array should contain the URL of images and the other one is for image-texts in a span-element:
function slideShow(){
imgUrlList.length = 0;
imgTextList.length = 0;
var imgUrl = document.getElementsByClassName('markedImg');
var imgText = document.getElementsByClassName('marked');
for(j=0; j<imgUrl.length; j++){
imgUrlList.push(imgUrl.src);
}
for(k=0; k<imgText.length; k++){
imgTextList.push(imgText.innerHTML);
}
openWindow();
}

Extract values from a multidimensional array

I have a very big array with car makes and models. I've already extracted the makes into a separate array, but I am struggling to extract the models while also maintaining their association to the make.
Here is a sample of the array:
var dataa = new Array
(
['Acura','','Integra','Mdx','Rl','Rsx','Slx','Tl','Tsx'],
['Aixam','','400','505','600'],
['Alfa romeo','','145','146','147','155','156'],
['Aston martin','','.','DBS','Db7','Db9']);
As you can see I have a multi-dimensional array with the car make (located at dataa[0][0]), then an empty value and then the model for this make.
I am using this code to to get the car makes:
This gives me the fist value of every nested array -> dataa[i][0]:
for (var i = 0; i < dataa.length; i++) {
document.write(dataa[i][0] + "<br>");
}
My problems start HERE.
I CAN NOT extract all models and assign them to the proper car make. I have tried for-loop's, loops with brakes, while loops and loops with conditional statements but I can't do it.
Please give me some advice here. Would jQuery or some other technology help me?

Put a loop inside your loop.
for (var i = 0; i < dataa.length; i++) {
document.write("<h2>Starting new inner loop!</h2><br>");
for (var j = 0; j < dataa[i].length; j++) {
document.write(dataa[i][j] + "<br>");
}
}
Now for every Array in the outer Array, you're doing a separate loop.
Here's a demo

For loop information on Multi-Dimensional Array

How to add For loop information to Multi-Dimensional Array?
http://jsfiddle.net/MZj3L/
If I am trying this code get - map undefined. But how to save data something like to this ->
[[Array[10], [Array[10], [Array[10], [Array[10], [Array[10], [Array[10], [Array[10], [Array[10], [Array[10], [Array[10]]
Thanks and sorry for my English language.

It seems in you want to initialize a multi dimensional array. Arrays are dynamic in JavaScript, you don't have to initialize them with a certain length. You could just do:
var map = [];
for(var a = 0; a < 10; a++){
map[a] = [];
}
This gives you an array containing 10 arrays.
Why are you getting undefined?
Because your syntax is way of. What map = [a][b]; does is creating an array with one element a and then accessing the bth element of that array and assign it to map.
So in the last iteration, it does:
map = [9][9];
which is the same as
tmp = [9];
map = tmp[9];

try something like
var map = [];
for(var a = 0; a < 10; a++){
map[a]=[];
for(var b = 0; b < 10; b++) {
map[a].push(b);
}
}
I am not sure what you want to do either but that's the only think I could do with your code ...