update polygon

[dandev98]

Hi

I am trying to display a polygon from an external geojson file, the brochure loads the file but does not update the polygon in real time.

L.realtime({
  url: 'js/areas.json',
  crossOrigin: true,
  type: 'json'
}, {
   interval: 60 * 1000,
  onEachFeature: function (feature, latlng) {

   var level = feature.properties.level;

  if (level == 0) {

    var polygon = L.polygon(latlng._latlngs, {
      color: 'blue',
      opacity: 0.3,
      fillOpacity: 0.1
    }).addTo(map);
 } else if (level == 1) {

    var polygon = L.polygon(latlng._latlngs, {
      color: 'red',
      opacity: 0.3,
      fillOpacity: 0.1
    }).addTo(map);
 }
 return polygon;
},
 updateFeature: function (feature, oldLayer, newLayer) {

 var level = feature.properties.level;
 if (!oldLayer) {
   return;
 }

if (level== 0) {
  oldLayer.setStyle({color: 'blue'});
} else if (level == 1) {
  oldLayer.setStyle({color: 'red'});
}
 return oldLayer;
}
});

areas.json:

{
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "properties": {
        "level": 0,
        "id": 1
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-75.360297, 6.071571],
            [-76.005083, 6.063846],
            [-76.051694, 6.511708],
            [-75.298149, 6.573451]
        ]]
    }
}]
}

[wolkenloseswetter]

For me, I miss something like this:

realtime.on('update', function() {
    map.fitBounds(realtime.getBounds(), {maxZoom: 3});

....

update your feature (style, popup etc...) here

});

[perliedman]

For the original question/issue by @dandev98, the issue is that you're using onEachFeature incorrectly: the second argument is not a LatLng, it's the layer created by Leaflet for this feature. Also, that function should not return a layer, it should work with the layer instance passed to it. So creating a layer and returning it will not accomplish anything. See the docs for onEachFeature: https://leafletjs.com/reference-1.6.0.html#geojson-oneachfeature

If what you need is to update the polygon's styling, I suggest you instead look at the style option.

[santilp95]

Don't work, I tried with pointToLayer , the polygon but no change a simple color, only with polygon My code

 const getShapesLayerGroupRealTime = (idCliente) => {
            const shapesLayerGroup = new L.LayerGroup();
            const realtimeReference = L.realtime(
                {
                    url: ENDPOINT_DATA_GEOSERVICIOS,
                    method: 'POST',
                    body: JSON.stringify({
                        solicitud: 'shpCliente',
                        idCliente: idCliente,
                    }),
                },
                {
                    container: shapesLayerGroup,
                    interval: REALTIME_INTERVAL_SECONDS * 1000,
                    pointToLayer: (feature, latlng) => (
                        L.polygon(latlng,{
                            color: '#51F03B'
                        })
                    ),
                    removeMissing: true,
                    updateFeature: (feature, oldLayer, newLayer) => {
                        console.log('feature', feature.properties.nivel )
                        console.log('nueva capa',newLayer)
                        return newLayer
                    },
                }
            );
            return [shapesLayerGroup, realtimeReference];
         }