How to draw a custom graphic on a map using ArcGIS JavaScript API?

Question

I want each user to be able to draw their own area, and when they log on the next time they can automatically load this area. How can I achieve this function using ArcGIS JavaScript API and ArcGIS Server?

Answer 1

Well, it is clear that you want to draw some feature on the map and store this somwhere so that next time when use visits, he/she can see the last drawn feature on the map.

First of all you need to publish an editable feature layer in arcgis server where all the feature will be saved.

Below is the working sample for this-

 var map;
      require([
        "esri/map",
        "esri/toolbars/draw",
        "esri/toolbars/edit",
        "esri/graphic",
        "esri/config",

        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",

        "esri/dijit/editing/TemplatePicker",

        "dojo/_base/array",
        "dojo/_base/event",
        "dojo/_base/lang",
        "dojo/parser",
        "dijit/registry",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/form/Button", "dojo/domReady!"
      ], function(
        Map, Draw, Edit, Graphic, esriConfig,
        FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        TemplatePicker,
        arrayUtils, event, lang, parser, registry
      ) {
        parser.parse();

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        // This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        map = new Map("map", {
          basemap: "streets",
          center: [-83.244, 42.581],
          zoom: 15
        });

        map.on("layers-add-result", initEditing);

        var landusePointLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var landuseLineLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var landusePolygonLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });

        map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);

        function initEditing(evt) {
          console.log("initEditing", evt);
          // var map = this;
          var currentLayer = null;
          var layers = arrayUtils.map(evt.layers, function(result) {
            return result.layer;
          });
          console.log("layers", layers);

          var editToolbar = new Edit(map);
          editToolbar.on("deactivate", function(evt) {
            currentLayer.applyEdits(null, [evt.graphic], null);
          });

          arrayUtils.forEach(layers, function(layer) {
            var editingEnabled = false;
            layer.on("dbl-click", function(evt) {
              event.stop(evt);
              if (editingEnabled === false) {
                editingEnabled = true;
                editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
              } else {
                currentLayer = this;
                editToolbar.deactivate();
                editingEnabled = false;
              }
            });

            layer.on("click", function(evt) {
              event.stop(evt);
              if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
                layer.applyEdits(null,null,[evt.graphic]);
                currentLayer = this;
                editToolbar.deactivate();
                editingEnabled=false;
              }
            });
          });

          var templatePicker = new TemplatePicker({
            featureLayers: layers,
            rows: "auto",
            columns: 2,
            grouping: true,
            style: "height: auto; overflow: auto;"
          }, "templatePickerDiv");

          templatePicker.startup();

          var drawToolbar = new Draw(map);

          var selectedTemplate;
          templatePicker.on("selection-change", function() {
            if( templatePicker.getSelected() ) {
              selectedTemplate = templatePicker.getSelected();
            }
            switch (selectedTemplate.featureLayer.geometryType) {
              case "esriGeometryPoint":
                drawToolbar.activate(Draw.POINT);
                break;
              case "esriGeometryPolyline":
                drawToolbar.activate(Draw.POLYLINE);
                break;
              case "esriGeometryPolygon":
                drawToolbar.activate(Draw.POLYGON);
                break;
            }
          });

          drawToolbar.on("draw-end", function(evt) {
            drawToolbar.deactivate();
            editToolbar.deactivate();
            var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
            var newGraphic = new Graphic(evt.geometry, null, newAttributes);
            selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
          });
        }
      });

      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow:hidden;
      }
      #header {
        border:solid 2px #462d44;
        background:#fff;
        color:#444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        font-family: sans-serif;
        font-size: 1.1em
        padding-left:20px;
      }
      #map {
        padding:1px;
        border:solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }
      #rightPane {
        border:none;
        padding: 0;
        width:228px;
      }
      .templatePicker {
        border: solid 2px #444;
      }

<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.20/"></script>
    
    <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'" style="width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane"  id="header" data-dojo-props="region:'top'">Use ctrl or cmd + click on graphic to delete.  Double click on graphic to edit vertices. </div>
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div id="templatePickerDiv"></div>
      </div>
    </div>
  </body>

Update the proxy before you start consuming this sample.

Live running sample - https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=ed_feature_creation

Hoping this will help you :)