I created a map with a control with checkboxes for some polygons, markers. All data are read from a geojson-file. The checkboxes are not checked, when I try to collect some geometry-objects in one control-group. In the example the top three markers and polygons should show/disappear TOGETHER.
All works fine, if the checkboxes have been checked the first time manually. It works fine too, if I use ONE checkbox for every geometry-object (which is not my intention). The geometry-objects with the SAME feature.property.control should react together. You cann see the example here: https://aachen-hat-energie.de/test_ww/test_control.htm (please use fullscreen)
<html>
<head>
<link rel="stylesheet" href="../js/Leaflet/leaflet.css" >
<script src="../js/Leaflet/leaflet.js" ></script>
<script src="../js/Leaflet/leaflet-bing-layer.min.js"></script>
<script src="../js/Leaflet/jquery-3.3.1.min.js"></script>
<script src="../js/Leaflet/Leaflet.fullscreen.min.js"></script>
<link href="../js/Leaflet/leaflet.fullscreen.css" rel="stylesheet" >
<script>
'use strict';
var BING_KEY = "AplTrT4uzwlmfcERFFQu_NqDycERC_Er0qGYzZhIqrDfq-naYCsUr1kbbKRUqhq1";
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
function show_karte(div_id, mittelpunkt, zoom, overlay){
var osmLayer = L.tileLayer(osmUrl, {maxZoom: 20, attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'});
var mittelpunkt = [mittelpunkt[1], mittelpunkt[0]]
var map = L.map(div_id,{fullscreenControl: true, layers: [osmLayer]}).setView(mittelpunkt, zoom);
var controlGroup = {};
var lastControl = {};
var controls = L.control.layers(null, controlGroup).addTo(map);
function onEachFeature(feature, layer) {
layer.addTo(map);
if (feature.properties.control != null)
{if (feature.properties.control != lastControl)
{controlGroup = {};
controlGroup = L.layerGroup(); // auch L.FeatureGroup()
controlGroup.addLayer(layer);
controls.addOverlay(controlGroup, feature.properties.control);
//controls.addOverlay(layer, feature.properties.control);
}
else
{controlGroup.addLayer(layer);
};
lastControl = feature.properties.control;
};
};
$.ajax(overlay).done(function(data) {
var data = JSON.parse(data);
L.geoJson(data,
{onEachFeature: onEachFeature
});
});
L.control.scale({imperial: false, position: "topleft"}).addTo(map);
};
</script>
</head>
<body>
<div id="map" style="width:450px; height: 700px;">
<script type="text/javascript"> show_karte("map",[6.026173,50.816022],13,"../wind/neueFlaechen.geojson"); </script>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire