var map = L.map("map", {
zoomControl: false,
fullscreenControl: true,
fullscreenControlOptions: {
position: 'bottomright'
}
}).setView([38.851470, -9.268658], 11);
L.control.zoom({
position: 'bottomright'
}).addTo(map);
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
})
// google street
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
googleStreets.addTo(map);
//google satellite
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var myIcon = L.icon({
iconUrl: 'img/img_markers/red_marker.png',
iconSize: [40, 40],
});
var selectCondition = [];
var selectLayer = [];
for (var i = 0; i < 12; i++) {
selectCondition[i] = false;
selectLayer[i] = L.layerGroup();
selectLayer[i].myId = i;
}
var baseMaps = {
"OSM": osm,
'Google Street': googleStreets,
"Google Satellite": googleSat,
};
var overlayMaps = {
'Postes': {
'PostM_8': selectLayer[0],
'PostM_9': selectLayer[1],
'PostM_10': selectLayer[2],
'PostM_12': selectLayer[3],
'PostB_8_450': selectLayer[4]
},
'CVP´s': {
'CVP': selectLayer[5],
'NR1_D400': selectLayer[6],
'NR1_B125': selectLayer[7],
'NR2_D400': selectLayer[8],
'NR2_B125': selectLayer[9],
'NR3_D400': selectLayer[10]
},
'Temp': {
'TM_State': selectLayer[11]
}
};
var options = {
groupCheckboxes: true,
collapsed: false
};
L.control.groupedLayers(baseMaps, overlayMaps, options}).addTo(map);
var report = L.geoJSON(null, {
filter: function(feature, layer) {
var cond1 = ((feature.properties.PostM_8 == '1') && selectCondition[0]);
var cond2 = ((feature.properties.PostM_9 == '1') && selectCondition[1]);
var cond3 = ((feature.properties.PostM_10 == '1') && selectCondition[2]);
var cond4 = ((feature.properties.PostM_12 == '1') && selectCondition[3]);
var cond5 = ((feature.properties.PostB_8_450 == '1') && selectCondition[4]);
var cond6 = ((feature.properties.CVP == '1') && selectCondition[5]);
var cond7 = ((feature.properties.NR1_D400 == '1') && selectCondition[6]);
var cond8 = ((feature.properties.NR1_B125 == '1') && selectCondition[7]);
var cond9 = ((feature.properties.NR2_D400 == '1') && selectCondition[8]);
var cond10 = ((feature.properties.NR2_B125 == '1') && selectCondition[9]);
var cond11 = ((feature.properties.NR3_D400 == '1') && selectCondition[10]);
var cond16cond12 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11 || cond12);
},
pointToLayer: function (feature, latlng) {
return new L.marker(latlng, {
icon: myIcon, draggable: false});
},
onEachFeature: setPopup
});
var geojsonData;
var url = './markers/markers.json';
fetch(url)
.then(response => {
return response.json();
})
.then(json => {
geojsonData = json;
map.addLayer(report);
selectLayer[0].addTo(map);
});
map.on('overlayadd', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = true;
report.clearLayers();
report.addData(geojsonData);
});
map.on('overlayremove', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = false;
report.clearLayers();
report.addData(geojsonData);
});
var map = L.map("map", {
zoomControl: false,
fullscreenControl: true,
fullscreenControlOptions: {
position: 'bottomright'
}
}).setView([38.851470, -9.268658], 11);
L.control.zoom({
position: 'bottomright'
}).addTo(map);
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
})
// google street
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
googleStreets.addTo(map);
//google satellite
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var myIcon = L.icon({
iconUrl: 'img/img_markers/red_marker.png',
iconSize: [40, 40],
});
var selectCondition = [];
var selectLayer = [];
for (var i = 0; i < 12; i++) {
selectCondition[i] = false;
selectLayer[i] = L.layerGroup();
selectLayer[i].myId = i;
}
var baseMaps = {
"OSM": osm,
'Google Street': googleStreets,
"Google Satellite": googleSat,
};
var overlayMaps = {
'Postes': {
'PostM_8': selectLayer[0],
'PostM_9': selectLayer[1],
'PostM_10': selectLayer[2],
'PostM_12': selectLayer[3],
'PostB_8_450': selectLayer[4]
},
'CVP´s': {
'CVP': selectLayer[5],
'NR1_D400': selectLayer[6],
'NR1_B125': selectLayer[7],
'NR2_D400': selectLayer[8],
'NR2_B125': selectLayer[9],
'NR3_D400': selectLayer[10]
},
'Temp': {
'TM_State': selectLayer[11]
}
};
var options = {
groupCheckboxes: true,
collapsed: false
};
L.control.groupedLayers(baseMaps, overlayMaps, options}).addTo(map);
var report = L.geoJSON(null, {
filter: function(feature, layer) {
var cond1 = ((feature.properties.PostM_8 == '1') && selectCondition[0]);
var cond2 = ((feature.properties.PostM_9 == '1') && selectCondition[1]);
var cond3 = ((feature.properties.PostM_10 == '1') && selectCondition[2]);
var cond4 = ((feature.properties.PostM_12 == '1') && selectCondition[3]);
var cond5 = ((feature.properties.PostB_8_450 == '1') && selectCondition[4]);
var cond6 = ((feature.properties.CVP == '1') && selectCondition[5]);
var cond7 = ((feature.properties.NR1_D400 == '1') && selectCondition[6]);
var cond8 = ((feature.properties.NR1_B125 == '1') && selectCondition[7]);
var cond9 = ((feature.properties.NR2_D400 == '1') && selectCondition[8]);
var cond10 = ((feature.properties.NR2_B125 == '1') && selectCondition[9]);
var cond11 = ((feature.properties.NR3_D400 == '1') && selectCondition[10]);
var cond16 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11);
},
pointToLayer: function (feature, latlng) {
return new L.marker(latlng, {
icon: myIcon, draggable: false});
},
onEachFeature: setPopup
});
var geojsonData;
var url = './markers/markers.json';
fetch(url)
.then(response => {
return response.json();
})
.then(json => {
geojsonData = json;
map.addLayer(report);
selectLayer[0].addTo(map);
});
map.on('overlayadd', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = true;
report.clearLayers();
report.addData(geojsonData);
});
map.on('overlayremove', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = false;
report.clearLayers();
report.addData(geojsonData);
});
var map = L.map("map", {
zoomControl: false,
fullscreenControl: true,
fullscreenControlOptions: {
position: 'bottomright'
}
}).setView([38.851470, -9.268658], 11);
L.control.zoom({
position: 'bottomright'
}).addTo(map);
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
})
// google street
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
googleStreets.addTo(map);
//google satellite
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var myIcon = L.icon({
iconUrl: 'img/img_markers/red_marker.png',
iconSize: [40, 40],
});
var selectCondition = [];
var selectLayer = [];
for (var i = 0; i < 12; i++) {
selectCondition[i] = false;
selectLayer[i] = L.layerGroup();
selectLayer[i].myId = i;
}
var baseMaps = {
"OSM": osm,
'Google Street': googleStreets,
"Google Satellite": googleSat,
};
var overlayMaps = {
'Postes': {
'PostM_8': selectLayer[0],
'PostM_9': selectLayer[1],
'PostM_10': selectLayer[2],
'PostM_12': selectLayer[3],
'PostB_8_450': selectLayer[4]
},
'CVP´s': {
'CVP': selectLayer[5],
'NR1_D400': selectLayer[6],
'NR1_B125': selectLayer[7],
'NR2_D400': selectLayer[8],
'NR2_B125': selectLayer[9],
'NR3_D400': selectLayer[10]
},
'Temp': {
'TM_State': selectLayer[11]
}
};
var options = {
groupCheckboxes: true,
collapsed: false
};
L.control.groupedLayers(baseMaps, overlayMaps, options}).addTo(map);
var report = L.geoJSON(null, {
filter: function(feature, layer) {
var cond1 = ((feature.properties.PostM_8 == '1') && selectCondition[0]);
var cond2 = ((feature.properties.PostM_9 == '1') && selectCondition[1]);
var cond3 = ((feature.properties.PostM_10 == '1') && selectCondition[2]);
var cond4 = ((feature.properties.PostM_12 == '1') && selectCondition[3]);
var cond5 = ((feature.properties.PostB_8_450 == '1') && selectCondition[4]);
var cond6 = ((feature.properties.CVP == '1') && selectCondition[5]);
var cond7 = ((feature.properties.NR1_D400 == '1') && selectCondition[6]);
var cond8 = ((feature.properties.NR1_B125 == '1') && selectCondition[7]);
var cond9 = ((feature.properties.NR2_D400 == '1') && selectCondition[8]);
var cond10 = ((feature.properties.NR2_B125 == '1') && selectCondition[9]);
var cond11 = ((feature.properties.NR3_D400 == '1') && selectCondition[10]);
var cond12 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11 || cond12);
},
pointToLayer: function (feature, latlng) {
return new L.marker(latlng, {
icon: myIcon, draggable: false});
},
onEachFeature: setPopup
});
var geojsonData;
var url = './markers/markers.json';
fetch(url)
.then(response => {
return response.json();
})
.then(json => {
geojsonData = json;
map.addLayer(report);
selectLayer[0].addTo(map);
});
map.on('overlayadd', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = true;
report.clearLayers();
report.addData(geojsonData);
});
map.on('overlayremove', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = false;
report.clearLayers();
report.addData(geojsonData);
});
I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol)leaflet-groupedlayercontrol plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers control. But the markers don't appear on the map and with groupCheckboxes = truegroupCheckboxes = true
it also doesn't group the layers. How can I solve this? Thanks
I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol) with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers control. But the markers don't appear on the map and with groupCheckboxes = true it also doesn't group the layers. How can I solve? Thanks
I want to use leaflet-groupedlayercontrol plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers control. But the markers don't appear on the map and with groupCheckboxes = true
it also doesn't group the layers. How can I solve this?
Use grouped layer control plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer
I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol) with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers control. But the markers don't appear on the map and with groupCheckboxes = true it also doesn't group the layers. How can I solve? Thanks
Example GeoJSON:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-9.2574095,
38.7720292
]
},
"properties": {
"state": "G",
"CCO": "16",
"PostM_8": "1",
"PostM_9": "0",
"PostM_10": "0",
"PostM_12": "0",
"PostB_8_450": "0",
"CVP ": "0",
"NR1_D400": "1",
"NR1_B125": "0",
"NR2_D400": "0",
"NR2_B125": "1",
"NR3_D400": "0",
"TM_State": "677,4"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-9.250804,
38.75554135
]
},
"properties": {
"state": "B",
"CCO": "14",
"PostM_8": "1",
"PostM_9": "0",
"PostM_10": "1",
"PostM_12": "0",
"PostB_8_450": "0",
"CVP ": "0",
"NR1_D400": "1",
"NR1_B125": "0",
"NR2_D400": "0",
"NR2_B125": "0",
"NR3_D400": "0",
"TM_State ": "1037,3" }
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-9.354285,
38.72788
]
},
"properties": {
"state": "G",
"CCO": "14",
"PostM_8": "1",
"PostM_9": "1",
"PostM_10": "0",
"PostM_12": "0",
"PostB_8_450": "0",
"CVP ": "0",
"NR1_D400": "0",
"NR1_B125": "0",
"NR2_D400": "0",
"NR2_B125": "0",
"NR3_D400": "0",
"TM_State": "940,3"
}
}
JS:
var map = L.map("map", {
zoomControl: false,
fullscreenControl: true,
fullscreenControlOptions: {
position: 'bottomright'
}
}).setView([38.851470, -9.268658], 11);
L.control.zoom({
position: 'bottomright'
}).addTo(map);
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
})
// google street
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
googleStreets.addTo(map);
//google satellite
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var myIcon = L.icon({
iconUrl: 'img/img_markers/red_marker.png',
iconSize: [40, 40],
});
var selectCondition = [];
var selectLayer = [];
for (var i = 0; i < 12; i++) {
selectCondition[i] = false;
selectLayer[i] = L.layerGroup();
selectLayer[i].myId = i;
}
var baseMaps = {
"OSM": osm,
'Google Street': googleStreets,
"Google Satellite": googleSat,
};
var overlayMaps = {
'Postes': {
'PostM_8': selectLayer[0],
'PostM_9': selectLayer[1],
'PostM_10': selectLayer[2],
'PostM_12': selectLayer[3],
'PostB_8_450': selectLayer[4]
},
'CVP´s': {
'CVP': selectLayer[5],
'NR1_D400': selectLayer[6],
'NR1_B125': selectLayer[7],
'NR2_D400': selectLayer[8],
'NR2_B125': selectLayer[9],
'NR3_D400': selectLayer[10]
},
'Temp': {
'TM_State': selectLayer[11]
}
};
var options = {
groupCheckboxes: true,
collapsed: false
};
L.control.groupedLayers(baseMaps, overlayMaps, options}).addTo(map);
var report = L.geoJSON(null, {
filter: function(feature, layer) {
var cond1 = ((feature.properties.PostM_8 == '1') && selectCondition[0]);
var cond2 = ((feature.properties.PostM_9 == '1') && selectCondition[1]);
var cond3 = ((feature.properties.PostM_10 == '1') && selectCondition[2]);
var cond4 = ((feature.properties.PostM_12 == '1') && selectCondition[3]);
var cond5 = ((feature.properties.PostB_8_450 == '1') && selectCondition[4]);
var cond6 = ((feature.properties.CVP == '1') && selectCondition[5]);
var cond7 = ((feature.properties.NR1_D400 == '1') && selectCondition[6]);
var cond8 = ((feature.properties.NR1_B125 == '1') && selectCondition[7]);
var cond9 = ((feature.properties.NR2_D400 == '1') && selectCondition[8]);
var cond10 = ((feature.properties.NR2_B125 == '1') && selectCondition[9]);
var cond11 = ((feature.properties.NR3_D400 == '1') && selectCondition[10]);
var cond16 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11);
},
pointToLayer: function (feature, latlng) {
return new L.marker(latlng, {
icon: myIcon, draggable: false});
},
onEachFeature: setPopup
});
var geojsonData;
var url = './markers/markers.json';
fetch(url)
.then(response => {
return response.json();
})
.then(json => {
geojsonData = json;
map.addLayer(report);
selectLayer[0].addTo(map);
});
map.on('overlayadd', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = true;
report.clearLayers();
report.addData(geojsonData);
});
map.on('overlayremove', function(evt) {
var i = overlayMaps[evt.name].myId;
selectCondition[i] = false;
report.clearLayers();
report.addData(geojsonData);
});