0

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

New contributor
Santiago Lopez Amaya is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
5
0

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

New contributor
Santiago Lopez Amaya is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

Santiago Lopez Amaya is a new contributor. Be nice, and check out our Code of Conduct.

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

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