Drop a random editable polygon with a marker

149
6
Jump to solution
04-02-2020 04:06 AM
Highlighted
Occasional Contributor II

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)

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Esteemed Contributor

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;
}
});
}
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

6 Replies
Highlighted
MVP Esteemed Contributor

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?

Reply
0 Kudos
Highlighted
Occasional Contributor II

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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;
}
});
}
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

Highlighted
Occasional Contributor II

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??

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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.

Highlighted
Occasional Contributor II

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

Reply
0 Kudos