jQuery addClass example

Change class name on click in jQuery

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
<script src="https://js.arcgis.com/3.30/"></script>
    <script>
      require(["dojo/dom",
      "dojo/dom-attr",
      "dojo/_base/array",
      "esri/Color",
      "dojo/number",
      "dojo/parser",
      "dijit/registry",

      "esri/config",
      "esri/map",
      "esri/graphic",
      "esri/tasks/GeometryService",
      "esri/tasks/BufferParameters",
      "esri/toolbars/draw",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/Font",
      "esri/symbols/TextSymbol",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"
  ], function(dom, domAttr, array, Color, number, parser, registry, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw,
              SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol) {

    var map, toolbar, geometryService;
    
    parser.parse();

    // create the map control
    map = new Map("mapDiv", {
      basemap: "streets",
      center: [-117.215, 34.05],
      zoom: 13,
      showAttribution: false
    });

    // configure the proxy url for the application
    esriConfig.defaults.io.proxyUrl = "/proxy/";
    esriConfig.defaults.io.alwaysUseProxy = false;

    // create a toolbar for the map
    toolbar = new Draw(map);
    toolbar.on("draw-end", addToMap);

    // activate a drawing tool when a button is clicked
    registry.byId("polygon").on("click", function() {
      toolbar.activate(Draw.POLYGON);
      map.hideZoomSlider();
    });
    registry.byId("freehand").on("click", function() {
      toolbar.activate(Draw.FREEHAND_POLYGON);
      map.hideZoomSlider();
    });
    registry.byId("clear").on("click", function() {
      map.graphics.clear();
    });

    geometryService = new...

CSS

html, body, #mapDiv {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      #info {
        bottom: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 200px;
        z-index: 40;
      }