0

I´m using [leaflet-groupedlayercontrol][1] plugin but failing to see layers in map. I manage to add layers to map with normal

var lc = L.control.layers(baseLayers).addTo(map);
lc.addTo(map);
lc.addOverlay(gw, "GW");

But when I assign the layers to a group they don't show. What am I doing wrong?

lets say I have an external .js file with the following code:

{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -8.898729,
                    38.657492
                ]
            },
            "properties": {
                "alarm_id": "112155",
                "alarm_description": "Consumo Diário Superior a 150%",
                "alarm_type": "DIRECT",
                "serial_num": "202101000040458",
                "dev_eui": "0004A30B00F8225D",
                "alarm_date": "2022-06-29 16:15:00",
                "status": "NEW",
                "longitude": -8.89872869417,
                "latitude": 38.6574923106
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -8.790047,
                    38.561636
                ]
            },
            "properties": {
                "alarm_id": "119166",
                "alarm_description": "Consumo Diário Inferior a 20%",
                "alarm_type": "DIRECT",
                "serial_num": "202101000039170",
                "dev_eui": "0004A30B00ED4CF9",
                "alarm_date": "2022-07-28 16:36:00",
                "status": "NEW",
                "longitude": -8.79004723919,
                "latitude": 38.5616357249
            }

        }
    ]
}

I want to create layers according to feature.properties.alarm_description and add those layers to a group which I need to be ablle to remove all layers at once and choose only the ones I want to show on map. I need that because considering the .js file I will have around 10 to 15 layers. I can add the layers normally one by one but when I try to use the layerGroup, they dont show.

var diario_150 = L.geoJson(alarms, {
  filter: function(feature, layer) {
    return (feature.properties.alarm_description === "Consumo Diário Superior a 150%");
  },
    pointToLayer: function(feature,latlng) {
    return new L.marker(latlng, {icon: marker150})
    },
    onEachFeature: setPopup
});

var diario_20 = L.geoJson(alarms, {
  filter: function(feature, layer) {
    return (feature.properties.alarm_description === "Consumo Diário Inferior a 20%");
  },
    pointToLayer: function(feature,latlng) {
    return new L.marker(latlng, {icon: marker20})
    },
    onEachFeature: setPopup
});

var groupedOverlays = {
  "Alarms": {
    "150": diario_150,
    "20": diario_20 
  }
};

L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
7
  • Any errors in the browse debugger console?
    – TomazicM
    Jul 25 at 15:57
  • Hi TomazicM. Yes "Uncaught TypeError: this.callInitHooks is not a function at Object.i [as LayerGroup]"
    – Bruno
    Jul 25 at 20:06
  • At which line you get this error? Any errors in the network section of browser debugger?
    – TomazicM
    Jul 26 at 6:52
  • It gives an error at 340: var city = L.LayerGroup(); On the network part doesnt give me any errors. I think it is something to do with the layer function but I do have the leaflet.groupedlayercontrol.js...
    – Bruno
    Jul 26 at 20:55
  • From the above code your problem is not reproducible, see working JSFiddle: jsfiddle.net/TomazicM/Lcr3yxfe
    – TomazicM
    Jul 27 at 9:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.