Select to view content in your preferred language

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

591
2
Jump to solution
04-13-2022 01:31 PM
ArianaBernal
New Contributor III

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");
});

0 Kudos
1 Solution

Accepted Solutions
MarkW
by Esri Contributor
Esri Contributor

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

Mark W

View solution in original post

2 Replies
MarkW
by Esri Contributor
Esri Contributor

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

Mark W
ArianaBernal
New Contributor III

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");
});

0 Kudos