Develop Reference

How to add legend in leaflet Map

I have a leaflet map and I would like to add a legend. In the map I have many filter which can return many lines colors. For example one can filter by lanes and got four colors.
I tried this (solution found on leaflet documentation) but I didn't work.
// Create a legend
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map_94a3167215404c0dad9233926d918875) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [110, 80, 50, 10],
labels = [];
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map_94a3167215404c0dad9233926d918875);
<div class="row h-100">
<div class="col-md-2" id="destinationDiv">
<hr>
<div class="">
<h3>Network attributes</h3>
</div>
<hr>
<div class="form-group w-75 mx-auto">
<label for="linkSelector" class="sr-only">Links</label>
<select id="linkSelector" class="form-control" onchange="linkDropDown();">
<option value="default">Links...</option>
<option value="lanes">Lanes (input)</option>
<option value="length">Length (input)</option>
</select>
</div>
<div class="legend"></div>
</div>
<div class="col-md-10">
<div class="folium-map" id="map_94a3167215404c0dad9233926d918875" ></div>
</div>
</div>

Record data to proper html children elements when cloning

I have a form in Google sheets where I send dynamic data from the sheet.
I loop sheet data and create same number of blocks in a form as number of my headers.
I have a first block of elements written in html.
The rest of blocks I clone from the first one, clone its IDs and send my sheet titles to elements of the form.
First title I write (with the last title from an array) to the only block existing before looping.
Then I clone that block giving a clone new titles and trying to insert clones before the first block ([0]) but it gets wrong and overwrites my first hardcoded title.
It appends the blocks in random number, so I can't get my titles in the right sequence like "1,2,3".
It's always like "2,1,1" or "1,3,2" etc.
I've tried different variations of appending the cloned elements (like motherDiv.appendChild(clonedRow) and motherDiv.insertBefore(clonedRow, motherDiv.children[0]), but cannot get it to work properly.
Please point to what's wrong here.
Here's the code and the screen:
//my google app backend function with data
var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]
var stats = {
statNumbers: numbers,
statStats: stats
}
//select initialization
document.addEventListener('DOMContentLoaded', function() {
var getstats = getStats();
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
//getting stats object
function getStats() {
google.script.run.withSuccessHandler(processStats).statsObj();
google.script.run.withFailureHandler(showError).statsObj()
return;
}
//creating dynamic stats fields in the form
function processStats(stats) {
//name first statistic with the last number
var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[stats.statStats.length - 1] + ". " + stats.statStats[stats.statStats.length - 1]
//mother div
var motherDiv = document.getElementById("motherDiv")
//sample row to copy
var statRow = document.getElementById("statsample");
//loop stat names
for (var i = 0; i < stats.statStats.length - 1; i++) {
var statName = stats.statStats[i]
var statNumber = stats.statNumbers[i]
//cloning the original row
var clonedRow = statRow.cloneNode(true)
//setting unique ID to whole row
var rowId = clonedRow.id = "statsample" + i
//setting unique ID to stat div
var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber
//stat titles (except first one)
var statHtml = document.getElementById(clonedStatID).innerHTML = statNumber + ". " + statName;
var err = document.getElementById("err").innerHTML = motherDiv.children.length
//appending it to the mother div
//motherDiv.appendChild(clonedRow);
motherDiv.insertBefore(clonedRow, motherDiv.children[0]);
}
return;
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div id="motherDiv">
<!-- mother div -->
<div class="row" id="statsample">
<div class=" input-field col s3 #fffde7 yellow lighten-5">
<h6 id="statName" class="statClass"></h6>
</div>
<div class="input-field col s3">
<select class="icons browser-default" id="weeksSel4">
<option value="" disabled selected>Неделя</option>
</select>
</div>
<div class="input-field col s2">
<input id="numbers" type="text" class="validate">
<label for="numbers">Значение</label>
</div>
<div class="input-field col s1.5">
<select class="icons browser-default" id="measure">
<option value="" disabled selected>Ед. изм:</option>
<option value="">шт.</option>
<option value="">%</option>
<option value="">$</option>
<option value="">руб.</option>
<option value="">грн.</option>
</select>
</div>
<div class="input-field col s2.5">
<a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" style="float: right;" id="btn1row"><i class="material-icons right">send</i>Ввести</a>
</div>
</div>
<!-- row end -->
</div>
<!-- mother div end-->
<div id="err"> </div>

I'd recommend populating the 'master' div with the first element of the array and for the clones start iterating over the array from index 1.
We need to make some fundamental changes to your processStats(stats) function.
First populate the master:
var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];
the following two lines are untouched
var motherDiv = document.getElementById("motherDiv")
var statRow = document.getElementById("statsample");
Change the for loop to start from 1
for (var i = 1; i < stats.statStats.length; i++) {
}
Now the for-loop itself needs some changes.
These three lines are okay
var statName = stats.statStats[i];
var statNumber = stats.statNumbers[i];
var clonedRow = statRow.cloneNode(true);
What I don't understand is the following
var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber
I know you want to give the freshly cloned divs child statClass a unique id with a sequential number but with every iteration of the for-loop this would give the first element in the list the id. Above you already have a variable which holds a reference to the cloned div clonedRow you can also use to access it's children.
So get rid of the line and use this:
clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;
Now just append the div to the parent
motherDiv.appendChild(clonedRow);
Here's a working example - just click 'Run code snippet' to see it in action:
//my google app backend function with data
var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]
var stats = {
statNumbers: numbers,
statStats: stats
}
function processStats(stats) {
//name first statistic with the last number
var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];
//mother div
var motherDiv = document.getElementById("motherDiv")
//sample row to copy
var statRow = document.getElementById("statsample");
//loop stat names
for (var i = 1; i < stats.statStats.length; i++) {
var statName = stats.statStats[i];
var statNumber = stats.statNumbers[i];
var clonedRow = statRow.cloneNode(true);
var rowId = clonedRow.id = "statsample" + i;
clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;
var err = document.getElementById("err").innerHTML = motherDiv.children.length
motherDiv.appendChild(clonedRow);
}
return;
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
processStats(stats);
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div id="motherDiv">
<!-- mother div -->
<div class="row" id="statsample">
<div class=" input-field col s3 #fffde7 yellow lighten-5">
<h6 id="statName" class="statClass"></h6>
</div>
<div class="input-field col s3">
<select class="icons browser-default" id="weeksSel4">
<option value="" disabled selected>Неделя</option>
</select>
</div>
<div class="input-field col s2">
<input id="numbers" type="text" class="validate">
<label for="numbers">Значение</label>
</div>
<div class="input-field col s1.5">
<select class="icons browser-default" id="measure">
<option value="" disabled selected>Ед. изм:</option>
<option value="">шт.</option>
<option value="">%</option>
<option value="">$</option>
<option value="">руб.</option>
<option value="">грн.</option>
</select>
</div>
<div class="input-field col s2.5">
<a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" style="float: right;" id="btn1row"><i class="material-icons right">send</i>Ввести</a>
</div>
</div>
<!-- row end -->
</div>
<!-- mother div end-->
<div id="err"> </div>

Height of dropdown box in multiselect option

Im using multiselect dropdown for my select control. Im adding options to select control in Javascript. Reading data from database through PHP and passing to javascript file. But the height of the options dropdown is small like i can only see 'Select All' check box with out any scrolling. But if i add the options in HTML itself, then the dropdown looks fine. What im missing here?
<script src="<?=BASE_URL?>dropdown/multiple-select.js"></script>
<link href="<?=BASE_URL?>dropdown/multiple-select.css" rel="stylesheet">
<div class="modal" id="SendmailModel" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Send Mail </h3>
</div>
<div class="modal-body">
<form id="mailcomposeForm" id="_id_">
<div class="control-group">
<label class="control-label">Event Details</label>
<div class="controls">
<table class="table table-condensed table-bordered table-striped" id="event_days_table" style="display: none;width:544px;font-size:14px;">
<tbody id="event_days_table_body">
</tbody>
</table>
</div>
</div>
<div class="control-group">
<label class="control-label" for="leave_status">Select Recipient(s)</label>
<select id="emplist" name="employee_name" value="" multiple="multiple">
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="modJs.SendingMail();">Send</button>
<button class="btn" onclick="modJs.closemaildialog();">Not Now</button>
</div>
</div>
</div>
</div>
script type="text/javascript">
$(function() {
$('#emplist').change(function() {
}).multipleSelect({
width: '100%',
height:'100%'
});
});
</script>
In my Javascript file..
Conferencelisting.method('MailSuccessCallback', function(callBackData) {
var row = '<tr><th>From</th><td>_from_</td></tr><tr><th>To</th><td>_to_</td></tr><tr><th>Type</th><td>_type_</td></tr><tr><th>Created By</th><td>_created_</td><tr><th>Details</th><td>_details_</td></tr>';
var eventdetails = callBackData[0];
var html = "";
var trow = "";
for(var i=0;i<eventdetails.length;i++){
trow = row;
trow = trow.replace(/_from_/g,Date.parse(eventdetails[i].From).toString('d MMM yyyy <b>h:mm tt</b>'));
trow = trow.replace(/_to_/g,Date.parse(eventdetails[i].To).toString('d MMM yyyy <b>h:mm tt</b>'));
trow = trow.replace(/_type_/g,eventdetails[i].type);
trow = trow.replace(/_created_/g,eventdetails[i].employee);
trow = trow.replace(/_details_/g,eventdetails[i].reason);
html += trow;
}
$('#event_days_table_body').html(html);
$('#event_days_table').show();
//Adding employees name in selection box.
var emplist = callBackData[1];
var options = '';
for (var i = 0; i < emplist.length; i++) {
options += '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>';
}
$("#emplist").html(options);
$('#SendmailModel').modal('show');
});
If i add options in HTML file like this..i can get exact dropdown with scrolls..
<select id="emplist" name="employee_name" value="" multiple="multiple">
<option value="ALEX">ALEX</option>
<option value="BOB">BOB</option>
<option value="DE">DE</option>
</select>

I solved myself. I think the height is not the problem , the data are not getting added. SO i changed options adding code in javascript file. Now it works.
var emplist = callBackData[1];
var options = '';
for (var i = 0; i < emplist.length; i++) {
$('#emplist').append( '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>' );
}
$('#emplist').multipleSelect( 'refresh' );

How to select an option text matching those of an array value

I have an array with three elements, Im looping through that array to see the length of it so that it triggers a button click three times to dynamic add input select box. Each array value will go on each added select box and find if it match any option text if it does it have to select it. Below is my code not sure where I'm going wrong
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
]
for (var i = 0; i < myArryValues.length; i++) {
var bookIndex = 0;
$('#bookForm').on('click', '.mynewButton', function() {
$('.myDropdown').each(function(index) {
console.log("operatorString", operatorString);
var operatorCounter = 0;
var optionCounter = 0;
$(this).find('option').filter(function() {
if ($(this)[optionCounter] == myArryValues[operatorCounter]) {
$(this)[optionCounter].attr('selected', "selected");
operatorCounter++;
} else {
optionCounter++;
}
});
});
console.log("mynewButton");
bookIndex++;
var bookForm = $('#bookForm');
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.addClass('myDropdown-row')
.removeClass('hide')
.attr('data-book-index', bookIndex)
.attr('id', '');
bookForm.append($clone);
// Update the name attributes
$clone
.find('[name="myDropdown"]').attr('name', 'myDropdown[' + bookIndex + '].myDropdown').end()
})
// Remove button click handler
.on('click', '.removeButton', function() {
$(this).parents('.form-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row" id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-2 button-div">
<button type="button" class="mynewButton rule-button">Add New
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="row field-row">
<div class="col-md-2">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
</div>
</div>
</div>

Try This on your click function
var data = ['bar','baz'];
for (var i = 0; i < data.length; i++) {
var s = $('<select id="'+i+'"/>');
for (var j = 0; j < data.length; j++) {
if (i==j) {
$('<option />', {value: data[j], text: data[j],selected:'selected'}).appendTo(s);
}else{
$('<option />', {value: data[j], text: data[j]}).appendTo(s);
}
}
s.appendTo('body');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Need to take 2 values(prices) from 2 different onclick functions add then display the total in a table

I am making a shopping website, my products page has 2 products, when the user chooses a quantity from the drop down list and clicks the add to cart button the product image,description,price,quantity and total price(quantity * price) is added to a table row at the bottom of the page. My problem is showing the total of multiple selected products. I have created variables that store the total for each product in their own functions. if a user selects the first product all the information i mentioned shows with the total price in a row correctly but if the user then selects the second product the information is added to the table but the total price is replaced by second product instead of adding totals of both products. Is there a solution?
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
var quan;
var totalArray = [];
var priceArray = [13.99, 249.99];
console.log(priceArray);
console.log(priceArray[1]);
document.getElementById('btn3').onclick = function() {
if (count3 == 0) {
var table = document.getElementById("table"); //This adds a row after every click
var row = table.insertRow(0);
var product = row.insertCell(0);
var desc = row.insertCell(1);
var price = row.insertCell(2);
var quantity = row.insertCell(3);
count3++;
product.innerHTML = " <img src='images/mouse.jpg' id='img2' width='160px' height='200px'>";
desc.innerHTML = document.getElementById("desc3").innerHTML; //prints quantity
price.innerHTML = "$" + priceArray[0] + " per item"; //prints quantity
var selectedText = list3.options[list3.selectedIndex].innerHTML;
var selectedValue = list3.value;
quantity.innerHTML = selectedValue;
document.getElementById('hcart').innerHTML = "Your Cart (1) Product";
console.log(count3);
var total = selectedValue * 13.99;
totalArray[1] = total;
document.getElementById('total').innerHTML = parseInt(total);
} else {
alert("Product already entered");
}
};
//------------------------btn4-------------------------------------------------
var myQuantity;
var myPrice;
var total = 0;
document.getElementById('btn4').onclick = function() {
if (count4 == 0) {
var table = document.getElementById("table"); //This adds a row after every click
var row = table.insertRow(0);
var product = row.insertCell(0);
var desc = row.insertCell(1);
var price = row.insertCell(2);
var quantity = row.insertCell(3);
count4++;
product.innerHTML = " <img src='images/tab.jpg' id='img2' width='160px' height='200px'>";
desc.innerHTML = document.getElementById("desc4").innerHTML; //prints quantity
price.innerHTML = "$" + priceArray[1] + " per item"; //prints quantity
var selectedText = list1.options[list1.selectedIndex].innerHTML;
var selectedValue = list1.value;
quantity.innerHTML = selectedValue;
document.getElementById('hcart').innerHTML = "Your Cart (1) Product";
console.log(count4);
total = selectedValue * priceArray[1];
console.log(totalArray);
document.getElementById('total').innerHTML = parseInt(total);
} else {
alert("Product already entered");
}
};
<div id="prod2">
<div id="img">
<img src="images/mouse.jpg" id="img2">
</div>
<div id="desc">
<h3>Description</h3>
<p id="desc3">TeckNet TruWave technology: Provide precise, smart cursor control over many surface types. TeckNet CoLink technology: After pairing there's no need to re-establish pairing after a signal loss or shutdown.</p>
</div>
<div id="quan">
<h3>Price</h3>
<h5 id="p_amount3">CDN: $13.99</h5>
</div>
<div id="amount">
<h3>Purchase</h3>
<select name="quantity" id="list3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" id="btn3" value="Add to Cart">
</div>
</div>
<!---Product4---------------------------------------------->
<div id="prod2">
<div id="img">
<img src="images/tab.jpg" id="img2">
</div>
<div id="desc">
<h3>Description</h3>
<p id="desc4">Samsung Galaxy Tab A SM-T350NZAAXAR 8.0 inch 1.5 GHz, 16GB, Android 5.0 Lollipop Tablet, Smoky Titanium. Keep All Your Samsung Devices In Sync. Connecting your Samsung devices is easier than ever. With Samsung Side Sync 3.0 and Quick Connect, you
can share content and work effortlessly between your Samsung tablet</p>
</div>
<div id="quan">
<h3>Price</h3>
<h5 id="p_amount4">CDN: $249.99</h5>
</div>
<div id="amount">
<h3>Purchase</h3>
<select name="quantity" id="list1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" id="btn4" value="Add to Cart" onclick="total()">
</div>
</div>
</fieldset>
<!--Cart------------------------------------------------->
<h1 id="hcart">Your Cart(Empty)</h1>
<table cellpadding="4" cellspacing="4" border="0" id="myCart" style="width:100%">
<thead>
<tr>
<td>
<h4>Name</h4>
</td>
<td>
<h4>Description</h4>
</td>
<td>
<h4>Price</h4>
</td>
<td>
<h4>Quantity</h4>
</td>
</tr>
</thead>
</table>
<div id="lists">
<table style="width:100%" border="1px" id="table" height="10px">
</table>
<table style="width:100%" border="1px" id="table2" height="10px">
<tr>
<td>
<h4>Total</h4>
</td>
<td>
<h4 id="total">Empty</h4>
</td>
</table>

Create a global variable say cartTotal = 0
Then, before
document.getElementById('total').innerHTML = parseInt(total);,
you calculate cartTotal+=total and then do
document.getElementById('total').innerHTML = parseInt(cartTotal);
in both functions..
Here, the cartTotal will contain the total of all products added.