Community

How to Save data of polygon for later use?

615
1
07-09-2019 05:34 AM
JamieFairclough
by
New Contributor
‎07-09-2019 05:34 AM

I can draw a polygon using ArcGIS. How we can save polygon data and plot it later in another map?

0 Kudos
1 Reply
BenElan
by Esri Contributor
Esri Contributor
‎07-09-2019 03:59 PM

Draw a polygon on the top map. Click the 'Draw Polygon on Second Map' button in the bottom right corner.

Essentially, sketches are saved in the graphics layer that you create. You can access those graphics at any point in your code.

Let me know if this helps

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Sketch Graphics</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.12/"></script>

    <style>
        html,
        body,
        #viewDiv1 {
            padding: 0;
            margin: 0;
            height: 80%;
            width: 100%;
        }

        #viewDiv2 {
            padding: 0;
            margin: 0;
            height: 80%;
            width: 100%;
        }

        #dl {
            bottom: 20px;
            right: 10px;
            position: absolute;
            z-index: 99;
            border: .1px solid lightgray;
            color: gray;
            background: white;
            padding: 5px;
            cursor: pointer;
        }

        #dl:hover {
            background-color: lightgrey;
        }
    </style>
    <script>
        require([
            "esri/widgets/Sketch",
            "esri/Map",
            "esri/layers/GraphicsLayer",
            "esri/layers/FeatureLayer",
            "esri/views/MapView"
        ], function (Sketch, Map, GraphicsLayer, FeatureLayer, MapView) {

            document.getElementById("dl").onclick = function () { drawMap2() };

            const layer = new GraphicsLayer();

            const map = new Map({
                basemap: "streets"
            });

            map.add(layer);

            const view = new MapView({
                container: "viewDiv1",
                map: map,
                zoom: 7,
                center: [-117, 36]
            });

            const map2 = new Map({
                basemap: "gray"
            });

            const view2 = new MapView({
                container: "viewDiv2",
                map: map2,
                zoom: 7,
                center: [-117, 36]
            });

            const sketch = new Sketch({
                layer: layer,
                view: view
            });

            view.ui.add(sketch, "top-right");

            function drawMap2() {
                const layer2 = new GraphicsLayer({
                    graphics: layer.graphics
                });
                map2.add(layer2);
            }
        }); 
    </script>
</head>

<body>
    <div id="dl">Draw Polygon on Second Map</div>
    <span id="viewDiv1"></span>
    <span id="viewDiv2"></span>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos