0

I recently started working on ArcGIS JS to query with API from another site. I want to get the rasterized outputs by calling the API. It would work the way of EOS's real-time crop analysis. I am liking to work with ArcGIS APIs but this is an issue that I am stuck with.

Before, as an example I created this- demo site To make the calling work, I had to create polygons or attach the polylines on the base map that I had poorly executed on Leaflet.

This time, I started using ArcGIS APIs for that but I was unable (I might have found but my limited knowledge with JS is a constraint) to build a code with a polygon/polyline event listener. I am perplexed. Though I tried ESRI Leaflet, I couldn't make a good layout with a clean UI. I added a sketch widget thinking that might be working as an event listener but the code is entirely different for the purpose. It will create an array of lat and long and based on that polygon, the output must be generated

Attaching the HTML codes below-

    <!DOCTYPE html>
<html>
<head>
<meta name="description" content="App Design and CSS - Layout Partial Page CSS Grid">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>IVD</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>
 
  <style>
    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-weight: bold;
      font-family: "Avenir Next W00";
    }

    .header {
      grid-area: header;
      background-color: #eaffeb;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: rgb(224, 238, 255);
    }

    .map {
      grid-area: map;
    }

    .wrapper {
      display: grid;
      grid-template-rows: 25%  25% auto;
      grid-template-areas:
       "header"
       "sidebar"
       "map";
      width: 100vw;
      height: 100vh;
    }

    .box {
      color: rgb(48, 48, 48);
      padding: 10px;
      font-size: 20px; 
    }

    @media only screen and (min-width: 544px)  {
      .wrapper {
        grid-template-columns: 30% auto;
        grid-template-rows: 70px  auto;
        grid-template-areas:
          "header   header"
          "sidebar  map";
        }
        
      }

  </style>

  <script>
    
    require([
      "esri/widgets/Sketch",
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Locate",
      "esri/widgets/Track",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/widgets/Search"
    ], function(Sketch, esriConfig, Map, MapView, Locate, Track, Graphic, GraphicsLayer, Search)
    {const layer = new GraphicsLayer();

      var map = new Map({ 
      basemap: "hybrid",
      layers: [layer]        
    });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [78.21667, 24.88333],
        zoom: 7, 
      });

// CO-Ords

    view.on("click", (event) => {
      console.log(event);

    });

    //view.on("pointer-move", (event) => {
      // console.log(event);      
    // });

    // const pt = view.toMap({x: event.x, y: event.y}); // {x, y- long lat}
      // console.log(pt);


      view.when(function() {

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

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

      const search = new Search({ 
      view: view
    });

      view.ui.add(search, "top-right");
    
       const track = new Track({
          view: view,
          graphic: new Graphic({
            symbol: {
              type: "simple-marker",
              size: "14px",
              color: "blue",
              outline: {
                color: "#efefef",
                width: "1.5px"
              }
            }
          }),
          useHeadingEnabled: false
        });
        view.ui.add(track, "top-left");

    });   

        
  </script>

</head>
<body>

  <div class="wrapper">
    <div class="box header" id="titleDiv">(IVD Demo)</div>
    <div class="box sidebar">(Output Space)</div>
    <div class="map" id="viewDiv"></div>

  </div>
</body>
</html>

1 Answer 1

2

if I'm not mistaken, you want to take the coordinates of the drawing and send it to a service after the drawing on the map is finished. If you take a look at the Sketch's events, it is clearly explained how you can do it.

Sketch' events

For example, using the code below, you can reach the corner coordinates of the drawn polygon after the polygon drawing process is finished.

...
view.ui.add(sketch, "bottom-right");
sketch.on("create", function (event) {
    if (event.state == "complete") {
        if (event.tool == "polygon") {
        let graphic = event.graphic;
        let geometry = graphic.geometry;
        let coordinates = geometry.rings;
        console.log(coordinates);
        }
    }
});
...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.