# Cesium multiple polygon with callback property

**URL:** <https://community.cesium.com/t/cesium-multiple-polygon-with-callback-property/18725>\
**Category:** CesiumJS\
**Created:** [May 23, 2022, 7:14am UTC](https://community.cesium.com/t/cesium-multiple-polygon-with-callback-property/18725 "2022-05-23T07:14:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ayaz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ayaz/32/6820_2.png) [@Ayaz](https://community.cesium.com/u/Ayaz)\
**Post date:** [May 23, 2022, 7:14am UTC](https://community.cesium.com/t/cesium-multiple-polygon-with-callback-property/18725/1 "2022-05-23T07:14:35Z")

</div>

i draw 2 polygons using callback method

Consider i have 2 polygons ABC and DEF a. When i dragin corners of ABC polygon it works perfectly. when i drag second polygon i-e i draged DEF then ABC disappers and DEF is there.

if i have 3 polyons when i drag corners of 3rd polygon first and second polygons both disappers. here is sandcastle code [click me](https://sandcastle.cesium.com/#c=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)

can someone guide me what’s am i doing wronge here is my code

```auto
const viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;

var polygonCollection = [];
var Poly_pointsCollections = [];

var Poly_coordiantesArray = [
    [72.35433701166211, 52.57522385967319, 96.18442795152974, 44.89719893727921, 72.39011732046649,
        39.86453159141635
    ],
    [67.29773654341213, 32.88259716109294, 69.14234015976554, 32.98282610463128, 69.19404079866142,
        31.354623867578226, 66.85127436871454, 31.712787322338162, 66.55451189733644, 32.6854597580088
    ]
];
var Poly_nameArray = ["aaaaa", "bbbbb"];

var loadedPolyCollection = [];
for (var i = 0; i < 2; i++) {
    loadPoly(Poly_coordiantesArray[i], Poly_nameArray[i]);
}

var selectionPolygonPoints = [];

var loadedPoly;

function loadPoly(coordinate, myArray) {

    loadedPoly = viewer.entities.add({
        id: "poly_" + myArray,
        name: myArray,
        polygon: {

            hierarchy: new Cesium.CallbackProperty(function() {
                    return {
                        positions: new Cesium.Cartesian3.fromDegreesArray(coordinate)
                    }
                },
                false),

            material: Cesium.Color.fromBytes(221, 240, 235, 160),
        }

    });
    console.log(loadedPoly);
    console.log(loadedPolyCollection);
    loadedPolyCollection.push(loadedPoly);

    console.log("loadedPoly ", loadedPoly);

    for (var i = 0; i < coordinate.length; i = i + 2) {
        draw_Zone_Corner_points(coordinate[i], coordinate[i + 1], myArray);
    }

    viewer.flyTo(loadedPoly);

}

function draw_Zone_Corner_points(lon, lat, name) {

    var pointGeometry = viewer.entities.add({
        name: "Polypoint_" + name,
        description: [lon, lat],
        position: Cesium.Cartesian3.fromDegrees(lon, lat),
        point: {
            color: Cesium.Color.SKYBLUE,
            pixelSize: 10,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 3,
            disableDepthTestDistance: Number.POSITIVE_INFINITY, // we can see points arounds earth
            //heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
    });
    Poly_pointsCollections.push(pointGeometry);
}
var selectedPolygonCoordinates = [];

function newArrayForZone(pickedEntity) {

    selectedPolygonCoordinates = [];
    var selected_Entity_Name = pickedEntity.id._name;
    for (var i = 0; i < Poly_pointsCollections.length; i++) {
        var current_Entity_Name = Poly_pointsCollections[i]._name;

        if (current_Entity_Name == selected_Entity_Name) {
            var [y, x] = Poly_pointsCollections[i]._description._value;
            selectedPolygonCoordinates.push(y, x);
        }
    }

}

function UpdatepolygonWithPoints(pickedEntity) {

    var Newpoints = pickedEntity.id.position._value;
    var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(Newpoints);
    var lon = Cesium.Math.toDegrees(carto.longitude);
    var lat = Cesium.Math.toDegrees(carto.latitude);

    var [y, x] = pickedEntity.id._description._value;

    for (var i = 0; i < Poly_pointsCollections.length; i++) {
        if (selectedPolygonCoordinates[i] === y) {
            selectedPolygonCoordinates[i] = lon;
        }
        if (selectedPolygonCoordinates[i] === x) {
            selectedPolygonCoordinates[i] = lat;
        }
    }
    pickedEntity.id._description._value = [lon, lat];

    var entityName = pickedEntity.id._name;
    entityName = entityName.split("_");

    for (i = 0; i < loadedPolyCollection.length; i++) {

        if (entityName[1] == loadedPolyCollection[i]._name) {

            var poly_entity = loadedPolyCollection[i];
            console.log("this.loadedPolyCollection[i] ", loadedPolyCollection[i]);
            poly_entity._polygon._hierarchy = new Cesium.CallbackProperty(function() {
                return new Cesium.PolygonHierarchy(new Cesium.Cartesian3.fromDegreesArray(
                    selectedPolygonCoordinates));
            }, false);

        }

    }

}

var ZoneMoment = true;
// Points_DragAndDrop
document.getElementById("cesiumContainer").addEventListener("click", function() {

    if (ZoneMoment) {

        var rightEntityPicked = false;
        var dragging = false;
        var pickedEntity;
        var mouseDroped = false;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(
            function(click) {
                if (ZoneMoment) {
                    console.log('LEFT down ');
                    var pickedObject = scene.pick(click.position);
                    if (Cesium.defined(pickedObject) && pickedObject.id) {
                        var entityName = pickedObject.id._name;
                        entityName = entityName.split("_");
                        if (entityName[0] == 'Polypoint') {
                            rightEntityPicked = true;
                        }
                        if (rightEntityPicked) {
                            dragging = true;
                            scene.screenSpaceCameraController.enableRotate = false;
                            pickedEntity = pickedObject;
                        }
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_DOWN
        );
        handler.setInputAction(
            function(movement) {
                if (ZoneMoment && dragging) {
                    var cartesian = pickedEntity.id.position.getValue(Cesium.JulianDate
                        .fromDate(
                            new Date()));
                    var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                    var surfaceNormal = scene.globe.ellipsoid.geodeticSurfaceNormal(cartesian);
                    var planeNormal = Cesium.Cartesian3.subtract(scene.camera.position,
                        cartesian,
                        new Cesium
                        .Cartesian3());
                    planeNormal = Cesium.Cartesian3.normalize(planeNormal, planeNormal);
                    var ray = viewer.scene.camera.getPickRay(movement.endPosition);
                    var plane = Cesium.Plane.fromPointNormal(cartesian, planeNormal);
                    var newCartesian = Cesium.IntersectionTests.rayPlane(ray, plane);
                    var newCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
                        newCartesian);
                    cartographic.longitude = newCartographic.longitude;
                    cartographic.latitude = newCartographic.latitude;
                    pickedEntity.id.position.setValue(scene.globe.ellipsoid
                        .cartographicToCartesian(
                            cartographic));

                }
                if (dragging) {
                    mouseDroped = true;
                }
            },
            Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
        handler.setInputAction(
            function() {
                if (ZoneMoment && rightEntityPicked && mouseDroped) {
                    console.log('Left up ');
                    dragging = false;
                    mouseDroped = false;
                    scene.screenSpaceCameraController.enableRotate = true;

                    newArrayForZone(pickedEntity);
                    UpdatepolygonWithPoints(pickedEntity);
                }

            },
            Cesium.ScreenSpaceEventType.LEFT_UP
        );
    }
});

```