The best way to build a lealeft map?

I managed to build a custom leaflet map with filters.
I read many many stackoverflow topics trying to understand how things work with leaflet and finaly based all my code from this tutorial, which I think is very clear.

My Layout is the following. I have three columns in my container. In the first one I have all my checkboxes.

In the middle, my map.

And on the right,an empty sidebar.

When I click on checkbox, It show/hide the markers on the map. When I click on a marker, it fills the empty sidebar with all my "features" coming from a geoJson file.

I'm looking for a way to improve my code, to shorten it by using loops if possible, or functions that would allow me to lighten all this code. As I have in perspective dozens of Json objects to incorporate, my code may be very long. And I am sure it is possible to shorten it. I'm looking in particular, a quick way to add/remove markers instead of duplicating code like I do here.. As I'm really not good in js, can someone help me based on this example ? Because I see many tutorials on this but I'm unable to adapt it to my project..

                        <main  class="flex-container">
                            <article>
                                <div class="flex-row relative">
                                    <div class="hamburger">
                                      <span class="line"></span>
                                      <span class="line"></span>
                                      <span class="line"></span>
                                    </div>
                                    <div class="flex-col-sm-4 flex-col-md-2" id="filters">
                                        <nav id="filter-group" class="filter-group relative">
                                            <div class="cc_filter_group">
                                                <h3>Title</h3>
                                                <div>
                                                  <input type="checkbox" class="gaucher" id="allmaladies" name="gaucher[]" checked>
                                                  <label for="allmaladies">Tout</label>
                                                </div>
                                                <div>
                                                  <input type="checkbox" class="gaucher" id="glucocerebrosidase" name="gaucher[]">
                                                  <label for="glucocerebrosidase">Glucocérébrosidase</label>
                                                </div>
                                                <div>
                                                  <input type="checkbox" class="gaucher" id="gba" name="gaucher[]">
                                                  <label for="gba">Gêne GBA</label>
                                                </div>

                                                <div>
                                                  <input type="checkbox" class="gaucher" id="gl1" name="gaucher[]">
                                                  <label for="gl1">Lyso GL1</label>
                                                </div>
                                                <div>
                                                  <input type="checkbox" class="gaucher" id="chito" name="gaucher[]">
                                                  <label for="chito">Chito</label>
                                                </div>

                                                <div>
                                                  <input type="checkbox" class="gaucher" id="ccl_18" name="gaucher[]">
                                                  <label for="ccl_18">CCL 18</label>
                                                </div> 
                                            </div>
                                            <div class="npb_filter_group">
                                                <h3>NPB</h3>

                                                    <div>
                                                  <input type="checkbox" class="npb" id="sphingomyelinase" name="npb[]" checked>
                                                  <label for="sphingomyelinase">phingomyélinase acide</label>
                                                </div>

                                                <div>
                                                  <input type="checkbox" class="npb" id="smpd_1" name="npb[]">
                                                  <label for="smpd_1">Gêne SMPD1</label>
                                                </div>
                                                <div>
                                                  <input type="checkbox" class="npb" id="sm509" name="npb[]">
                                                  <label for="sm509">Lyso sm509</label>
                                                </div>

                                                <div>
                                                  <input type="checkbox" class="npb" "chito_npb" name="npb[]">
                                                  <label for="chito_npb">CCL 18/label>
                                                </div>
                                            </div>
                                        </nav>
                                    </div>
                                    <div class="flex-col-sm-12 flex-col-md-6 map">
                                        <div id="map" style="width:100%;height:100%;"></div> 
                                    </div>
                                    <div class="flex-col-md-4" id="infos">
                                        <div class="layer_infos" id="layer_infos">
                                            <span class="close hidden-lg"></span>
                                            <div class="fill">
                                                <p>Cliquez sur une icône pour voir le détail</p>
                                            </div>
                                        </div>  
                                    </div>
                                </div> <!-- #main -->
                            </article> <!-- #main-container -->
                        </main>

                   <script type="text/javascript">


                    var cartoDb =  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
                    subdomains: 'abcd',
                    maxZoom: 19});


                    var glucocerebrosidaseIcon = L.AwesomeMarkers.icon({
                        prefix: 'fa', //font awesome rather than bootstrap
                        markerColor: 'red', // see colors above
                        iconColor:'white',
                        icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                    });
                    var gbaIcon = L.AwesomeMarkers.icon({
                        prefix: 'fa', //font awesome rather than bootstrap
                        iconColor:'white',
                        markerColor: 'green', // see colors above
                        icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                    });
                    var gl1Icon = L.AwesomeMarkers.icon({
                        prefix: 'fa', //font awesome rather than bootstrap
                        iconColor:'white',
                        markerColor: 'blue', // see colors above
                        icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                    });

                    var sphingomyelinaseIcon = L.AwesomeMarkers.icon({
                        prefix: 'fa', //font awesome rather than bootstrap
                        iconColor:'white',
                        markerColor: 'darkred', // see colors above
                        icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                    });


                    var map = L.map('map')
                    .addLayer(cartoDb)
                    .setView([46.85, 2.3518], 6); // LIGNE 14

                    function onEachFeature(feature, layer) {

                            var html = '';
                            if (feature.properties.Description) {
                                html += '<p>' + feature.properties.Description + '</p>';
                            }
                            if (feature.properties.Envoi) {
                                html += '<p>' + feature.properties.Envoi + '</p>';
                            }
                            if (feature.properties.Mode) {
                                html += '<p>' + feature.properties.Mode + '</p>';
                            }
                            if (feature.properties.Laboratoire) {
                                html += '<p>' + feature.properties.Laboratoire + '</p>';
                            }
                            if (feature.properties.Chu) {
                                html += '<p>' + feature.properties.Chu + '</p>';
                            }
                            if (feature.properties.Adresse) {
                                html += '<p>' + feature.properties.Adresse + '</p>';
                            }
                            if (feature.properties.Cp) {
                                html += '<p>' + feature.properties.Cp + '</p>';
                            }
                            if (feature.properties.Professeur) {
                                html += '<p>' + feature.properties.Professeur + '</p>';
                            }
                            if (feature.properties.Tel) {
                                html += '<p>' + feature.properties.Tel + '</p>';
                            }
                            if (feature.properties.Fax) {
                                html += '<p>' + feature.properties.Fax + '</p>';
                            }
                            if (feature.properties.Mail) {
                                html += '<p>' + feature.properties.Mail + '</p>';
                            }
                            if (feature.properties.Renseignement) {
                                html += '<p>' + feature.properties.Renseignement + '</p>';
                            }

                            layer.on('click', function () {
                                $('#layer_infos .fill').html(html);
                            })

                            $('input[type="checkbox"]').on('click',function(){
                                $('#layer_infos .fill').html('<p>Cliquez sur une icône pour voir le détail</p>');

                            })



                            if ( L.Browser.mobile ) {   
                                layer.on('click', function () {
                                $('#infos').addClass("slide");
                                })

                                $('.hamburger').click(function(){
                                    $(this).toggleClass("is-active");
                                    $('#filters').toggleClass("slide");
                                })
                                $('.close').click(function(){
                                    $('#infos').removeClass("slide");
                                })
                            }

                        }



                        var promise = $.getJSON("maladie.json");
                        promise.then(function(data){

                        var allmaladies = L.geoJson(data);

                        var glucocerebrosidase = L.geoJson(data, {
                            filter: function(feature, layer) {
                                return feature.properties.Maladie == "glucocerebrosidase";
                            },
                            onEachFeature: onEachFeature,
                            pointToLayer: function(feature, latlng) {
                                return L.marker(latlng, {
                                    icon: glucocerebrosidaseIcon
                                })
                            }
                        });

                       var gba = L.geoJson(data, {
                            filter: function(feature, layer) {
                                return feature.properties.Maladie == "gba";
                            },
                            onEachFeature: onEachFeature,
                            pointToLayer: function(feature, latlng) {
                                return L.marker(latlng, {
                                    icon: gbaIcon
                                })
                            }
                        });
                       var gl1 = L.geoJson(data, {
                            filter: function(feature, layer) {
                                return feature.properties.Maladie == "gl1";
                            },
                            onEachFeature: onEachFeature,
                            pointToLayer: function(feature, latlng) {
                                return L.marker(latlng, {
                                    icon: gl1Icon
                                })
                            }
                        });
                       var sphingomyelinase = L.geoJson(data, {
                            filter: function(feature, layer) {
                                return feature.properties.Maladie == "Sphingomyelinase-acide";
                            },
                            onEachFeature: onEachFeature,
                            pointToLayer: function(feature, latlng) {
                                return L.marker(latlng, {
                                    icon: sphingomyelinaseIcon
                                })
                            }
                        });

                        // THIS IS NEW
                        map.fitBounds(allmaladies.getBounds(), {
                            padding: [50, 50]
                        });


                        glucocerebrosidase.addTo(map)
                        gba.addTo(map)
                        gl1.addTo(map)
                        sphingomyelinase.addTo(map) 


                       $("#glucocerebrosidase").click(function() {
                        if(this.checked){
                            map.addLayer(glucocerebrosidase)
                            map.removeLayer(gba)
                            map.removeLayer(gl1)
                        }else{

                            map.removeLayer(gl1)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            }
                        });
                        $("#gba").click(function() {
                        if(this.checked){
                            map.addLayer(gba)
                            map.removeLayer(gl1)
                            map.removeLayer(glucocerebrosidase)
                        }else{
                            map.removeLayer(gl1)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                        }

                        });
                        $("#gl1").click(function() {
                            if(this.checked){
                            map.addLayer(gl1)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            }else{
                            map.removeLayer(gl1)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                        }

                        });
                        $("#sphingomyelinase").click(function() {
                            if(this.checked){
                        map.addLayer(sphingomyelinase)
                        }else{
                            map.removeLayer(sphingomyelinase)

                        }
                        });

                        $("#allmaladies").click(function() {
                            if(this.checked){
                            map.addLayer(gl1)
                            map.addLayer(gba)
                            map.addLayer(glucocerebrosidase)
                            map.addLayer(sphingomyelinase)
                        }else{
                            map.removeLayer(gl1)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(sphingomyelinase)
                        }
                        });
                    });
                       </script>

And finaly, in a separate js file, I have the following function, that let me check or uncheck my checkboxes One by One instead of a multiple selection.

jQuery(document).ready(function($){
 $('input[type="checkbox"]').on('change', function() {
  $('input[name="' + this.name + '"]').not(this).prop('checked', false);
   });
 });

In my code, I'm using this to fill the sidebar

 layer.on('click', function () {
                            $('#layer_infos .fill').html(html);
                        })

I'm then using this to put a default text, each time I switch to another checkbox

 $('input[type="checkbox"]').on('click',function(){
                            $('#layer_infos .fill').html('<p>my default text</p>');

                        })

I'm not sure this is the best way to do it !

I'm using the leaflet method L.Browser.mobile to change the display on mobile

I then have a problem with my getJSON method or function, It looks very long and redundant to me. Also, the 'addLayer' and 'removeLayer' method that I duplicate dozen of times, I'm sure it could be shorten. Is there a way instead to make a thing like : if (this) -> show this and hide all others markers etc..

Thanks for your help !

Clicking Select All in this HTML window

Help Everyone,

I have VBA code to open up the report picture as shown below, it will select ERX IE WORKFUSION HOA from the first drop-down list, click View Report (as that is the only way to show the options in the User drop-down box), and then I want it to select "Select All" from the User list. Unfortunately, the User list is not created the same way in HTML as the User Group one, so I cannot mimic what I've done there.

I am getting a Run-time error 91: Object variable or With block variable not set error on the following line near the bottom .document.getelementbyId("ct132_ct104_ct107_divDropDown_ct100").Click

Code

Header checkbox is not checked when all child checkboxes are selected in angular material

I have added checkboxs to my material table. Everything is working fine apart from when I select all the child checkboxes manually the header checkbox is not checked.

HTML code:

<ng-container matColumnDef="select">
            <mat-header-cell *matHeaderCellDef>
              <label class="Ai-checkbox">
                        <input class="inputCheckBox" type="checkbox" name="checkBox" value="all" (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                      </label>
            </mat-header-cell>

            <mat-cell *matCellDef="let row">
              <label class="Ai-checkbox">
                <input class="inputCheckBox" type="checkbox" name="checkBox" value="all" (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
              </label>
            </mat-cell>
          </ng-container>

TS File:

 /** Whether the number of selected elements matches the total number of rows. */
 isAllSelected(){
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

What am I doing wrong ?

Web page doesn't behave as though checkboxes are checked after manipulating in the console

Excuse my limited ability to be able to frame the question. I need to check 100 boxes to apply an accounting rule to 100 bank entries (in FreeAgent). In the console in Google Chrome I have typed the following, which succesfully checks the first box in the list. (Once it works I will put it in a loop so it checks all of them but I'm not at that point yet.)

var x = document.getElementsByClassName('FormElement-checkbox');
x[1].firstElementChild.checked = true;

When I try to continue with the procedure, the web page doesn't "realise" that the boxes have been checked. I can only get it to work if I physically click the checkboxes individually on the page - the fact they appear checked doesn't seem to matter to the page. So there is obviously something I am missing.

I can succesfully enter text into boxes and select items in drop downs. I have tried inspecting the checkbox element and seeing what happens when it is checked by clicking on it, but I can't see any difference in the HTML. I have explored a lot of the attributes in the javascript for that object when typing

x;

which is how I found the .firstElementChild.checked = true in the first place.

I don't know whether it is something specific to the page itself or whether in general I don't have enough experience to be able to tackle all data entry situations yet. I have tried searching for answers on this forum and elsewhere.

Jquery form submit button goes to URL based on checkbox selected

I have a simple contact form with multiple checkboxes, when a user selects a checkbox it should go to the url/folder tied to the url that's in the value. The current problem is after a user checks the checkbox and clicks submit, then goes back to that page and the checkbox resets, the submit button still takes them to the previously selected checkbox.

Need a way to fully reset the form and disable the button so the submission doesn't get too confusing for the user. Thanks!

Here is my form code:

<code>
`<form name="frm" id="myForm" method="post" >`
`<div class="provider-checkboxes">`
`<input type="checkbox" name="rGroup" id="r1" value="folder-1/" onclick="formaction(this)"/>`
`<label class="check-div" for="r1">Label 1</label>`
`<input type="checkbox" name="rGroup" id="r2" value="folder-2/" onclick="formaction(this)"/>`
`<label class="check-div" for="r2">Label 2</label>`
`<input type="checkbox" name="rGroup" id="r3" value="folder-3/" onclick="formaction(this)"/>`
`<label class="check-div" for="r3">Label 3</label>`
`<button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>`
`</div>`
`</form>`
</code>

Here is the script:

<code>
'$(document).ready(function(){'
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
$('[data-toggle="btns"] .btn').on('click', function(){
var $this = $(this);
$this.parent().find('.active').removeClass('active');
$this.addClass('active');
});
$('.selectme input:checkbox').click(function() {
$('.selectme input:checkbox').not(this).prop('checked', false);
});  
$('.provider-checkboxes input:checkbox').click(function() {
$('.provider-checkboxes input:checkbox').not(this).prop('checked', false);
});       
function formaction(checkbox){
document.getElementById("myForm").action = checkbox.value;;
}
function UncheckAll(){ 
var w = document.getElementsByTagName('input'); 
for(var i = 0; i < w.length; i++){ 
if(w[i].type=='checkbox'){ 
w[i].checked = false; 
}
}
} '
</code>

Pre-Select a radio/checkbox: Checked property not working properly

I have a simple question and i have not been able to solve it using numerous solutions. Here is the code.

<input type="checkbox" class="custom-control-input" [(ngModel)]="patient?.InsurancePolicies[0].BillTo"
              (click)="clearFacilityField()" name="billTo[]" id="id" [value]="'sample_value'"
                   checked
            />

This checkbox doesn't get pre-checked. I have also tried giving a value to checked, i.e. checked="" or checked="checked" but this also doesn't work.

Ps: I know this is a trivial issue but i have been stuck on it for a long time now.

How do I toggle a check value on prefilled checkboxes?

The checkox lists are from the backend to update and existing article. Using React, redux and express

{categories &&
      categories.map(category => (
        <li key={category._id}>
          <input
            type='checkbox'
            value={category._id}
            onClick={handleToggle(category._id)}
            checked={isChecked(category._id)}
          />
          <label className=''>{category.name}</label> <p>{category._id}</p>
        </li>
      ))}

and some of them are checked depending on the corresponding article

const isChecked = c => {
if (post.categories.findIndex(x => x._id === c) > -1) {
  return true;
} else {
  return false;
}

};

They are prfilled okay but the problem is from here when clicked the checkboxes don't toggle. "true" values stay the same and the "false". In console I can only add more to the array but can't delete from the original prefill.

Here is the handle toggle function

const handleToggle = c => () => {
const clickedCategory = post.categories.findIndex(x => x._id === c);
console.log(clickedCategory, 'index of');
if (clickedCategory === -1) {
  checked.push(c);
} else {
  checked.splice(clickedCategory, 1);
}
console.log(checked, 'checked');
setFormData({ ...formData, categories: checked });

};