You will learn: how to build an app to interactively sketch graphics on a map.
Applications can provide the ability for users to draw and edit graphics on a map. Graphics
represent geometric shapes such as points, lines, and polygons and are generally stored in memory in a graphics layer
. The Sketch
widget provides an interface that can be used to created and edit the different types of graphics. All graphics contain a geometry, symbol, and optionally, a set of attributes and the definition for a pop-up. To provide a custom user interface, or for more programmatic control over drawing, you can also use the SketchViewModel
. If you would like to create and edit features in a feature layer, you can use the Editor
widget for a more complete editing experience.
In this tutorial, you will use the Sketch
widget to draw and edit point, line, and polygon graphics.
Open the JavaScript Starter App on CodePen.
In CodePen, click Fork and save the pen as ArcGIS API for JavaScript Tutorials: Draw graphics
.
In order to store graphics you need to create a GraphicsLayer and add it to the map.
In the require
statement, add the GraphicsLayer module.
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer"
], function(Map, MapView, GraphicsLayer) {
At the top of the code in the main function
, create a GraphicsLayer and add it to the layers collection of the map. This layer will be used to store the graphics.
//*** ADD ***//
var graphicsLayer = new GraphicsLayer();
var map = new Map({
basemap: "topo-vector",
//*** ADD ***//
layers: [graphicsLayer]
});
The Sketch widget gives you the ability to draw and edit graphics interactively. Add the widget to the view.
require
statement, add the Sketch module. require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch",
], function(Map, MapView, GraphicsLayer, Sketch) {
function
, create the widget and set the layer to the GraphicsLayer created earlier. Add the widget to the top right corner of the view by adding it to the view's DefaultUI. var sketch = new Sketch({
view: view,
layer: graphicsLayer
});
view.ui.add(sketch, "top-right");
Your app should look something like this.
After the sketch
is created, change the symbols for the graphics by changing the fill and stroke colors to a solid red line with a semi-transparent while fill. Apply these colors to the SketchViewModel symbols.
//*** Red stroke, 1px wide ***//
var stroke = {
color: [255,0,0],
width: 1
}
//*** White fill color with 50% transparency ***//
var fillColor = [255,255,255,.5];
//*** Override all of the default symbol colors and sizes ***//
var pointSymbol = sketch.viewModel.pointSymbol;
pointSymbol.color = fillColor;
pointSymbol.outline = stroke;
pointSymbol.size = 8;
var polylineSymbol = sketch.viewModel.polylineSymbol;
polylineSymbol.color = stroke.color;
polylineSymbol.width = stroke.width;
var polygonSymbol = sketch.viewModel.polygonSymbol;
polygonSymbol.color = fillColor;
polygonSymbol.outline = stroke;
Use the Sketch create
event to add a pop-up to the graphic after it is created. Learn more about pop-ups in the Configure pop-ups and Display point, line, and polygon graphics tutorials.
//*** ADD ***//
sketch.on("create", function(event) {
if (event.state === "complete") {
var attributes = {
name: "My Graphic",
type: event.graphic.geometry.type
}
event.graphic.attributes = attributes;
var popupTemplate = {
title: "{name}",
content: "I am a {type}."
}
event.graphic.popupTemplate = popupTemplate;
}
});
NOTE: The graphic will autocast the popupTemplate
and create a class instance from the object. Learn more about autocasting in the documentation.
If you would like to interactively create and update features (both geometry and attributes) for feature layers, visit the documentation to learn about the Editor widget.