Hi,
Noticed that helper line is missing from JS API 4.10. In 4.9 there was a helper line when creating polygon.
Now you need to click 2 points before seeing anything on the map.
I have attached examples for 4.9 & 4.10. JS API 4.9 draws white line when clicking first point of the polygon.
Is there a workaround to get it working on JS API 4.10?
Br,
Markus
Solved! Go to Solution.
Markus,
I know there were many changes made to drawing in 4.10. I believe that the way it is now in 4.10 is the intended way for Draw to work. Draw is suppose to allow the developer to customize and handle all aspects of the drawing. Here is how I handle it.
// create a new graphic presenting the polyline that is being drawn on the view
function createGraphic(event) {
const vertices = event.vertices;
view.graphics.removeAll();
if(event.vertices.length === 2){
var polyline = {
type: "polyline", // autocasts as Polyline
paths: event.vertices,
spatialReference: view.spatialReference
};
var drawGra = new Graphic({
geometry: polyline,
symbol: { // autocasts as SimpleLineSymbol
type: "simple-line",
color: "white",
width: 1
}
});
view.graphics.add(drawGra);
return;
}
// a graphic representing the polyline that is being drawn
const graphic = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as SimpleFillSymbol
color: "purple",
style: "solid",
outline: { // autocasts as SimpleLineSymbol
color: "white",
width: 1
}
}
});
view.graphics.add(graphic);
}
Markus,
I know there were many changes made to drawing in 4.10. I believe that the way it is now in 4.10 is the intended way for Draw to work. Draw is suppose to allow the developer to customize and handle all aspects of the drawing. Here is how I handle it.
// create a new graphic presenting the polyline that is being drawn on the view
function createGraphic(event) {
const vertices = event.vertices;
view.graphics.removeAll();
if(event.vertices.length === 2){
var polyline = {
type: "polyline", // autocasts as Polyline
paths: event.vertices,
spatialReference: view.spatialReference
};
var drawGra = new Graphic({
geometry: polyline,
symbol: { // autocasts as SimpleLineSymbol
type: "simple-line",
color: "white",
width: 1
}
});
view.graphics.add(drawGra);
return;
}
// a graphic representing the polyline that is being drawn
const graphic = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as SimpleFillSymbol
color: "purple",
style: "solid",
outline: { // autocasts as SimpleLineSymbol
color: "white",
width: 1
}
}
});
view.graphics.add(graphic);
}
Hi Robert,
Thanks for quick response, this solved my problem.