How to remove specific marker by type on leaflet?

Question

I have a project that is making webgis to display data on a map and a check box to display data or hide that data.

I have finished making it with the google map version, but because it is paid, I look for the free version using leaflets.

But I have a problem with the check box on the leaflet, after unchecking, the marker does not disappear.

 var date = new Date(); var year = date.getFullYear(); // Center of the map var center = [-1.1329372, 120.0350916]; // Create the map var map = L.map("map").setView(center, 5); // Set up the Google Map Hybrib layer L.tileLayer("http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}", { attribution: "Map data @" + year + " Google for Dinas Kebersihan Lingkungan Hidup dan Pertamanan", maxZoom: 18 }).addTo(map); // Call JSON $(document).ready(function() { getUsers(); }); // Format Icon Leaflet var customIcons = L.Icon.extend({}); var merahIcon = new customIcons({ iconUrl: "merah.png" }), biruIcon = new customIcons({ iconUrl: "biru.png" }), kuningIcon = new customIcons({ iconUrl: "kuning.png" }); var icons = { merah: merahIcon, biru: biruIcon, kuning: kuningIcon }; // Marker Group var markerGroups = { merah: [], biru: [], kuning: [] }; // Get Data function getUsers() { $.getJSON("json.php", function(data) { for (var i = 0; i < data.length; i++) { var location = new L.LatLng(data[i].latitude, data[i].longitude); var name = data[i].name; var description = data[i].description; var type = data[i].type; var marker = createMarker(location, name, description, type); } }); } // Create Marker function createMarker(location, name, description, type) { var content = "<b>" + name + "</b> <br/>" + description; var marker = L.marker(location, { icon: icons[type] }) .bindPopup(content) .addTo(map); if (!markerGroups[type]) markerGroups[type] = []; console.log(markerGroups[type]); markerGroups[type].push(marker); var html = "<b>" + name + "</b> <br/>" + address; return marker; } // Create Checkbox Button function toggleGroup(type) { for (var i = 0; i < markerGroups[type].length; i++) { var marker = markerGroups[type][i]; if (!marker.getVisible()) { marker.setVisible(true); } else { marker.setVisible(false); } } }

 #map { height: 600px; }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <div class="map_wrap"> <div class="siderbarmap"> <ul> <input id="merahCheckbox" type="checkbox" onclick="toggleGroup('merah')" checked="checked" autocomplete="off" /> <label>Merah</label ><br /> <input id="biruCheckbox" type="checkbox" onclick="toggleGroup('biru')" checked="checked" autocomplete="off" /> <label>Biru</label ><br /> <input id="kuningCheckbox" type="checkbox" onclick="toggleGroup('kuning')" checked="checked" autocomplete="off" /> <label>Kuning</label ><br /> </ul> </div> <div id="map"></div> </div>

Answer 1

i found new method, thx for re

 function toggleGroup(type) { if ($('.leaflet-pane img[src="'+type+'.png"]').is(':hidden')){ $('.leaflet-pane img[src="'+type+'.png"]').show(); } else { $('.leaflet-pane img[src="'+type+'.png"]').hide(); } }