2

I am trying to display a polygon from an external GeoJSON file, the data loads but does not update the polygon in real time with "nivel".

The polygon is added but color is not updated after interval when level changes.

Heres is 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) => newLayer,
        }
    );
    return [shapesLayerGroup, realtimeReference];
 }

my GeoJSON:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -76.256104,
                            4.696879
                        ],
                        [
                            -76.256104,
                            5.550381
                        ],
                        [
                            -75.289307,
                            5.550381
                        ],
                        [
                            -75.289307,
                            4.696879
                        ],
                        [
                            -76.256104,
                            4.696879
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 2,
                "propiedades": "{\"descripcion\":\"s\"}",
                "nivel": 1
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -76.624146,
                            5.823687
                        ],
                        [
                            -75.322266,
                            6.713709
                        ],
                        [
                            -76.195679,
                            5.741708
                        ],
                        [
                            -76.624146,
                            5.823687
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 3,
                "propiedades": "{\"descripcion\":\"s\"}",
                "nivel": 1
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -75.635376,
                    5.566783
                ]
            },
            "properties": {
                "id": 1,
                "propiedades": "{\"descripcion\":\"Prueba 1\"}",
                "nivel": 0
            }
        }
    ]
}

enter image description here

I want to change this blue color

4
  • 3
    You're using pointToLayer for polygons, and the colour doesn't seem to depend on the nivel property of the features. Do check those issues first. Sep 11, 2021 at 1:15
  • Y try to change and not work , i use '#51F03B' to change but don't work Sep 11, 2021 at 4:07
  • Read leafletjs.com/examples/geojson first. Sep 11, 2021 at 9:50
  • Yes, it works but I don't know if it updates automatically, Thanks for this moment, I will try in two days and confirm it is work, for this moment I answer the result Sep 12, 2021 at 4:34

1 Answer 1

1

I try with this, but i don't know if update

 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,
        
        pointToLayer:(feature, latlng) =>(
            L.circle((latlng),{
                color: getShapeColor(feature)
            })
        ),
        style: (feature)=>(
            {color: getShapeColor(feature)}
        ),
        removeMissing: true,
        updateFeature: (feature, oldLayer, newLayer) => newLayer,
        
    }
);
return [shapesLayerGroup, realtimeReference];

}

and the color

const getShapeColor = (feature) => {     
    
    if (feature.properties.nivel === 1) {
        return color_shape_one
    }else if (feature.properties.nivel === 0) {
        return color_shape_two
    }else{
        return '#000000'
    }
};

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.