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)
Solved! Go to 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;
}
});
}
...
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?
Kindly suggest suitable
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;
}
});
}
...
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??
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.
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