Is it possible to use the Sketch Widget with a Webmap Map View?

[ArianaBernal]

I notice the sketch widget relies on using a GraphicsLayer to display the output of the sketch. My app is pulling in a webmap over having the layers live in the app. Is it possible to still use this widget / add a layer with the webmap set as the map view? Here is the sample I am following and my concept code.

Sample Code

My Code:

const webmapId = new URLSearchParams(window.location.search).get("webmap")
?? "(insert webmap id) ";

const graphicsLayer = new GraphicsLayer();

const map = new WebMap({
portalItem: {
id: webmapId
}
layers: [graphicsLayer]
});

const view = new MapView({
map,
container: "viewDiv",
padding: {
left: 50
}
});

view.when(() => {
const sketch = new Sketch({
layer: graphicsLayer,
view:view,
//graphi will be selected as soon as it is created
creationMode: "update"
});

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

[MarkW · Accepted solution]

Hello,

Yes this is possible, your concept code looks good. Have you tried running it? If you run into any issues let me know your error or share your full code.

Thanks

[ArianaBernal]

Hey Mark,

Thanks for your response, I tried running it through a debugger and found some minor syntax errors that were stopping it from working. It is up and running now.

Thank you!

Here is my working code

//Specify the web map id from AGOL
const webmapId = new URLSearchParams(window.location.search).get("webmap")
?? " (insert webmap ID) ";

const graphicsLayer = new GraphicsLayer();

const map = new WebMap({
portalItem: {
id: webmapId
},
layers: [graphicsLayer]
});

const view = new MapView({
container: "viewDiv",
map: map,
padding: {
left: 50
}
});

view.when(() => {
const sketch = new Sketch({
layer: graphicsLayer,
view:view,
//graphi will be selected as soon as it is created
creationMode: "update"
});

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