Drop a random editable polygon with a marker

[rsharma]

I want to drop a random editable polygon  when a marker is dropped , do i need to use different graphics layer to add some random polygon around marker . How to drop some random polygon (of small size)

[RobertScheitlin__GISP]

Rajni,

  Random polygon??? This query lacks so much detail... By random do you mean each polygon is going to have a different polygon shape and be centered on the click point?

[rsharma]

Hi Robert Scheitlin, GISP‌

• random means a small size polygon can be of same shape but can be editable by user OR user can draw a polygon  with certain type of marker drop
• No its not necessary to  be  very centered to his marker position.
• Issue is it should of different color from basic polygons

 Kindly suggest suitable

[RobertScheitlin__GISP · Accepted solution]

Rajni,

   This is my suggestion.

...
          //drop marker of point type when evt.state is complete
          else if (evt.state === "complete" && evt.tool === 'point') {
            //clone point graphics deeply
            var cloneGra = evt.graphic.clone();
            //?
            graphicsLayer.remove(evt.graphic);
            //define clone graphics symbol
            cloneGra.symbol = textSymbol;
            // define clonegra  attributes
            cloneGra.attributes = {
              newDevelopment: "new marker",
              state: "new"
            };

            //define popup body here
            var popup_html = '<div class="be-form-wrapper">';
                popup_html += '<div>';
                popup_html += '<textarea cols="4" rows="4" class="form-control b_radius mt-20 write_comment" id="write_comment" name="write_comment" placeholder="Write a comment"></textarea>';
                popup_html += '</div>';
                popup_html += '<div>';
                popup_html += '<button class="btn btn-width" data-url="">Cancel</button>';
                popup_html += '</div>';
                popup_html += '<div>';
                popup_html += '<button class="btn btn-width" data-url="">Save</button>';
                popup_html += '</div>';
                popup_html += '</div>';

            //add content of popup body here
            cloneGra.popupTemplate = {
              title : ' ',
              content: domConstruct.toDom(popup_html)
            };
            //add clone graphics to marker graphics layer
            markerGL.add(cloneGra);

            const polygon = webMercatorUtils.geographicToWebMercator(createGeometry([
              [175.9258624, -37.55590445],
              [175.9258630667, -37.55587745],
              [175.9258671333, -37.5557153],
              [175.92626316670004, -37.5557216],
              [175.92625955, -37.5558657],
              [175.9262584333, -37.5559107333],
              [175.9258624, -37.55590445]
            ]));
            translatePolygon( polygon.centroid, evt.graphic.geometry, polygon);

            validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
              0, 255, 255
            ]);
            var calc_area = geometryEngine.geodesicArea(polygon, "hectares")
            newDevelopmentGraphic = new Graphic({
              geometry: polygon,
              symbol: validSymbol,
              attributes: {
                newDevelopment: "new store",
                state: "propesed",
                area: calc_area
              }
            });
            graphicsLayer.add(newDevelopmentGraphic);
            }
        } //End addTempGraphics

        function translatePolygon(startPoint, currPoint, polygon){
          let dx = currPoint.x - startPoint.x;
          let dy = currPoint.y - startPoint.y;
          polygon.rings.forEach(ring => {
            if (Array.isArray(ring[0])){
              ring.forEach(coord => {
                coord[0] += dx;
                coord[1] += dy;
              });
            } else {
              ring[0] += dx;
              ring[1] += dy;
            }
          });
        }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[rsharma]

Hi sir,

I just want to know if it is possible to draw(not drop a polygon) a polygon first by user on click of same add marker button (for different markertype) and when polygon completed a marker appears in center of it automatically??

[RobertScheitlin__GISP]

Sure currently you already have the code for drawing the polygon. Once the polygon is added to the map in the sketchviewmodel complete method then you use the "centroid" property of the polygon class to get the center point and then just make a graphic from that point class.

[rsharma]

Sir i don't understand why my marker coming with polygon go back side of polygons after some time, when i was working on it