AnsweredAssumed Answered

Drawing tool + Editing tool

Question asked by bb_1993 on Dec 7, 2015
Latest reply on Dec 7, 2015 by rscheitlin

Hi,

I don't have a lot of experience working with esri + ArcGIS JavaScript API.

I've been trying to display a map that I could edit the shapes I draw.

So I went to the sample codes and put together the draw toolbar sample and edit toolbar sample but I cant seem to make it work.

All the buttons are displayed but they are not active, if I click on any button the animation triggers but the only interactivity with the map is zooming out and in and dragging around.

When debugging the code I realized the Dojo buttons (dijit/form/Button) I have are not being activated because they are not being scanned by the registration loop and I don't know why. It only gets Layout Elements: "ContentPane" and "BorderContainer".

Any help is welcome.

Thanks in advance.

Here is the code: (you can check how it works pasting on sandbox ArcGIS API for JavaScript Sandbox )

 

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width,user-scalable=no">

 

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Maps Toolbar</title>

 

    <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/nihilo/nihilo.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

    <!-- CSS files take care of the frames and tiles (when the maps has tiles) position in the screen.

        To take out the "esri" logo just edit the esri css file and remove the code for the "logo" pseudo class -->

    <style>

        html, body, #mainWindow {

            font-family: sans-serif;

            height: 100%;

            width: 100%;

        }

 

        html, body {

            margin: 0;

            padding: 0;

        }

 

        #header {

            height: 125px;

            overflow: auto;

            padding: 0.5em;

        }

        #mainWindow {

        visibility: hidden;

       

      }

 

 

    </style>

 

    <script src="https://js.arcgis.com/3.15/"></script>

    <script>

    var map, toolbar, symbol, geomTask, editToolbar;   

 

    function getShapeCoordinates(graphic) { //Different shapes store coordinates in different ways

        //Convert the shape information to json and get the coordinates info                                

       

        var json = graphic.geometry.toJson(); //or graphic.toJson();

        console.log(graphic.geometry);

        if (graphic.geometry.type == 'multipoint') {

            for (var pt = 0; pt < json.points.length; pt++) {

                console.log("Point " + pt + ": " + json.points[pt]);

            }

        }

        else if (graphic.geometry.type == 'polyline') {

            for (var pt = 0; pt < json.paths.length; pt++) {

                console.log("Points " + pt + ": " + json.paths[pt]);

            }

        }

        else if (graphic.geometry.type == 'polygon') {

            for (var pt = 0; pt < json.rings[0].length; pt++) {

                console.log(" pt: " + pt + " - Point:" + json.rings[0][pt]);

            }

        }       

    }

 

    require([ //this has to be at the same sequence as the function under it

            "esri/map", "esri/IdentityManager", "esri/config", "esri/urlUtils", "esri/basemaps",

 

            "esri/toolbars/draw",

            "esri/toolbars/edit",

            "esri/geometry/Point",

            "esri/geometry/Polyline",

            "esri/geometry/Polygon",

            "esri/graphic",

 

 

            "esri/symbols/SimpleMarkerSymbol",

            "esri/symbols/SimpleLineSymbol",

            "esri/symbols/SimpleFillSymbol",

            "esri/symbols/TextSymbol",

 

 

            "dojo/_base/event",

            "dojo/parser",

            "dojo/dom",

            "dojo/dom-style",

            "dijit/registry",

            "dijit/Menu",           

 

            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

            "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"

        ], function( //it has to be in the same sequence of the require above

            Map, esriId, esriConfig, urlUtils, esriBaseMaps,

            Draw, Edit, Point, Polyline, Polygon, Graphic,

            SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol,

            event, parser, dom, domStyle, registry, Menu, BorderContainer, ContentPane, Button, _WidgetSet

        ) {         

           

            parser.parse();

           

            map = new Map("map", {

                basemap: "topo", //if changed to "topo" the coordinates to centralize the map are used

                center: [176.264, -38.160],

                zoom: 5 //if the scion map is being used deep levels of the zoom wont work because the scion map doesnt have the tile

                        //the map is centred at.

 

            });

 

            map.on("load", createToolbar);

 

            function activateTool() {

                alert("loaded");

                var tool = this.label.toUpperCase().replace(/ /g, "_");

                toolbar.activate(Draw[tool]); ;

                map.hideZoomSlider();

 

            }

            // loop through all dijits, connect onClick event

            // listeners for buttons to activate drawing tools

           

            registry.forEach(function (d) {

                    

                // d is a reference to a dijit

                // could be a layout container or a button

                if (d.declaredClass === "dijit.form.Button") { //buttons to draw shapes are not working because form buttons are not being                        

                    console.log("it doesnt come here");        //activated by this function because this loop isnt reaching the butttons

                    d.on("click", activateTool);               //for unknown reasons

                }

                else {

                    console.log("d :" + d + " d.declaredClass : " + d.declaredClass + " =?=  dijit.form.Button");

                }

            });

 

            function activateToolbar(graphic) { //activating the toolbars

 

                domStyle.set(registry.byId("draw").domNode, "visibility", "none");

                domStyle.set(registry.byId("edit").domNode, "visibility", "visible");

                var tool = 0;

 

                if (registry.byId("tool_move").checked) {

                    tool = tool | Edit.MOVE;

                }

                if (registry.byId("tool_vertices").checked) {

                    tool = tool | Edit.EDIT_VERTICES;

                }

                if (registry.byId("tool_scale").checked) {

                    tool = tool | Edit.SCALE;

                }

                if (registry.byId("tool_rotate").checked) {

                    tool = tool | Edit.ROTATE;

                }

                // enable text editing if a graphic uses a text symbol

                if (graphic.symbol.declaredClass === "esri.symbol.TextSymbol") {

                    tool = tool | Edit.EDIT_TEXT;

                }

                //specify toolbar options       

                var options = {

                    allowAddVertices: registry.byId("vtx_ca").checked,

                    allowDeleteVertices: registry.byId("vtx_cd").checked,

                    uniformScaling: registry.byId("uniform_scaling").checked

                };

                editToolbar.activate(tool, graphic, options);

                domStyle.set(registry.byId("edit").domNode, "visibility", "none");

                domStyle.set(registry.byId("draw").domNode, "visibility", "visible");

            }           

 

            function createToolbar(themap) { //creating the toolbars layout

                toolbar = new Draw(map);

                toolbar.on("draw-end", addToMap);

 

                editToolbar = new Edit(map);

                //Activate the toolbar when you click on a graphic

                map.graphics.on("click", function (evt) {

                    event.stop(evt);

                    activateToolbar(evt.graphic);

                });

 

                //deactivate the toolbar when you click outside a graphic

                map.on("click", function (evt) {

                    editToolbar.deactivate();

                });

 

            }

 

            function addToMap(evt) { //adding shapes to the map

                var symbol;

                toolbar.deactivate();

                map.showZoomSlider();

                switch (evt.geometry.type) {

                    case "point":

                    case "multipoint":

                        symbol = new SimpleMarkerSymbol();

                        break;

                    case "polyline":

                        symbol = new SimpleLineSymbol();

                        break;

                    default:

                        symbol = new SimpleFillSymbol();

                        break;

                }

                var graphic = new Graphic(evt.geometry, symbol);

 

                map.graphics.add(graphic);

                dojo.connect(map.graphics, "onGraphicAdd", getShapeCoordinates(graphic));

 

            }

           

            domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");

           

        }

 

    );

    </script>

</head>

<body class="nihilo">

 

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">

        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

           

            <span>Draw:<br /></span>

            <button data-dojo-type="dijit/form/Button" id="b1">Point</button>

            <button data-dojo-type="dijit/form/Button" id="b2">Multi Point</button>

            <button data-dojo-type="dijit/form/Button" id="b3">Line</button>

            <button data-dojo-type="dijit/form/Button" id="b4">Polyline</button>

            <button data-dojo-type="dijit/form/Button" id="b5">Polygon</button>

            <button data-dojo-type="dijit/form/Button" id="b6">Freehand Polyline</button>

            <button data-dojo-type="dijit/form/Button" id="b7">Freehand Polygon</button>

 

            <button data-dojo-type="dijit/form/Button" id="b8">Arrow</button>

            <button data-dojo-type="dijit/form/Button" id="b9">Triangle</button>

            <button data-dojo-type="dijit/form/Button" id="b10">Circle</button>

            <button data-dojo-type="dijit/form/Button" id="b11">Ellipse</button>

           

           

           

            <span>Specify options then click a graphic to edit the shape. Click outside the graphic to quit editing.</span><br />

            <div id="tool_move" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Move</div>

            <div id="tool_vertices" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Edit Vertices</div>

            <div id="tool_scale" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Scale</div>

            <div id="tool_rotate" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Rotate</div>

            <button data-dojo-type="dijit/form/DropDownButton" id="options" data-dojo-props="value:'options'">

                <span>Options</span>

                <div data-dojo-type="dijit/Menu" id="optionsMenu">

                    <div id="vtx_ca" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Allow Add Vertices</div>

                    <div id="vtx_cd" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Allow Delete Vertices</div>

                    <div id="uniform_scaling" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Uniform Scaling when Resizing</div>

                </div>

            </button>

           

        </div>

        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

    </div>

 

</body>

</html>

Outcomes