Graphics Draw, map.graphics.clear(), AMD Map navigation not enabled.

AndrewDavis · ‎07-02-2014

Hi,

My question is: Why does my map freeze and then return an undefined geometry error? is there a way I can get around it?

Using the sample code for drawing and the graphics draw toolbar:

http://developers.arcgis.com/javascript/samples/graphics_add/

There is no button for clearing the graphics. I wanted to wire up a button (

<input type="submit" value="Clear Map" />  ready(function(){      query("input[type=\"submit\"]").on("click",clearMap);  });  function clearMap(){                    try{          map.graphics.clear();                                                 }          catch(e){              alert("something went wrong in the clear map function");         }        }

to fire off and then clear the map.

I've been having some trouble coming up to speed on the AMD method for the new way to write javascript. I found a really good example fiddle here: http://jsfiddle.net/g00glen00b/tLN5b/ that gave me some insight that I needed.

So.. I can now call a function from a click event and clear the map. However, then the map freezes and I get an undefined geometry error.

Does anyone see something?, or is there a better way?

Andy

KenBuja · ‎07-02-2014

This code seems to work properly, using your clearMap function. I've shown this with several different methods: your submit button, using a dojo button, and putting a button in the stack of buttons to draw.

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Shapes and Symbols</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">      <style>         #info {             top: 20px;             color: #444;             height: auto;             font-family: arial;             right: 20px;             margin: 5px;             padding: 10px;             position: absolute;             width: 115px;             z-index: 40;             border: solid 2px #666;             border-radius: 4px;             background-color: #fff;         }          html, body, #mapDiv {             padding: 0;             margin: 0;             height: 100%;         }          button {             display: block;         }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>         var map, tb;          require([           "esri/map", "esri/toolbars/draw",           "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",           "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",           "esri/graphic",           "esri/Color", "dojo/dom", "dojo/on", "dojo/query", "dojo/ready", "dijit/form/Button", "dojo/domReady!"         ], function (           Map, Draw,           SimpleMarkerSymbol, SimpleLineSymbol,           PictureFillSymbol, CartographicLineSymbol,           Graphic,           Color, dom, on, query, ready, Button         ) {              ready(function () {                 query("input[type=\"submit\"]").on("click", clearMap);                 var btnClear = new Button({                     label: "Clear Graphics",                     onClick: clearMap                 }, "progButtonNode")             });              map = new Map("mapDiv", {                 basemap: "streets",                 center: [-25.312, 34.307],                 zoom: 3             });             map.on("load", initToolbar);              // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples             var markerSymbol = new SimpleMarkerSymbol();             markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");             markerSymbol.setColor(new Color("#00FFFF"));              // lineSymbol used for freehand polyline, polyline and line.             var lineSymbol = new CartographicLineSymbol(               CartographicLineSymbol.STYLE_SOLID,               new Color([255, 0, 0]), 10,               CartographicLineSymbol.CAP_ROUND,               CartographicLineSymbol.JOIN_MITER, 5             );              // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol             // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png             var fillSymbol = new PictureFillSymbol(               "images/mangrove.png",               new SimpleLineSymbol(                 SimpleLineSymbol.STYLE_SOLID,                 new Color('#000'),                 1               ),               42,               42             );              function initToolbar() {                 tb = new Draw(map);                 tb.on("draw-end", addGraphic);                  // event delegation so a click handler is not                 // needed for each individual button                 on(dom.byId("info"), "click", function (evt) {                     if (evt.target.id === "info") {                         return;                     }                     if (evt.target.id === "infoClear") {                         map.graphics.clear();                         return;                     }                     var tool = evt.target.id.toLowerCase();                     map.disableMapNavigation();                     tb.activate(tool);                 });             }              function addGraphic(evt) {                 //deactivate the toolbar and clear existing graphics                 tb.deactivate();                 map.enableMapNavigation();                  // figure out which symbol to use                 var symbol;                 if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {                     symbol = markerSymbol;                 } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {                     symbol = lineSymbol;                 }                 else {                     symbol = fillSymbol;                 }                  map.graphics.add(new Graphic(evt.geometry, symbol));             }              function clearMap() {                 try {                     map.graphics.clear();                 }                 catch (e) {                     alert("something went wrong in the clear map function");                 }             }         });     </script> </head>  <body class="claro">      <div id="info">         <div>Select a shape then draw on map to add graphic</div>         <button id="Point">Point</button>         <button id="Multipoint">Multipoint</button>         <button id="Line">Line</button>         <button id="Polyline">Polyline</button>         <button id="FreehandPolyline">Freehand Polyline</button>         <button id="Triangle">Triangle</button>         <button id="Extent">Rectangle</button>         <button id="Circle">Circle</button>         <button id="Ellipse">Ellipse</button>         <button id="Polygon">Polygon</button>         <button id="FreehandPolygon">Freehand Polygon</button>         <button id="infoClear">Clear Graphics</button>     </div>     <input type="submit" value="Clear Map" id="ClearGraphics" />     <button id="progButtonNode" type="button"></button>     <div id="mapDiv"></div>  </body> </html>

View solution in original post

KenBuja · ‎07-02-2014

This code seems to work properly, using your clearMap function. I've shown this with several different methods: your submit button, using a dojo button, and putting a button in the stack of buttons to draw.

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Shapes and Symbols</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">      <style>         #info {             top: 20px;             color: #444;             height: auto;             font-family: arial;             right: 20px;             margin: 5px;             padding: 10px;             position: absolute;             width: 115px;             z-index: 40;             border: solid 2px #666;             border-radius: 4px;             background-color: #fff;         }          html, body, #mapDiv {             padding: 0;             margin: 0;             height: 100%;         }          button {             display: block;         }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>         var map, tb;          require([           "esri/map", "esri/toolbars/draw",           "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",           "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",           "esri/graphic",           "esri/Color", "dojo/dom", "dojo/on", "dojo/query", "dojo/ready", "dijit/form/Button", "dojo/domReady!"         ], function (           Map, Draw,           SimpleMarkerSymbol, SimpleLineSymbol,           PictureFillSymbol, CartographicLineSymbol,           Graphic,           Color, dom, on, query, ready, Button         ) {              ready(function () {                 query("input[type=\"submit\"]").on("click", clearMap);                 var btnClear = new Button({                     label: "Clear Graphics",                     onClick: clearMap                 }, "progButtonNode")             });              map = new Map("mapDiv", {                 basemap: "streets",                 center: [-25.312, 34.307],                 zoom: 3             });             map.on("load", initToolbar);              // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples             var markerSymbol = new SimpleMarkerSymbol();             markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");             markerSymbol.setColor(new Color("#00FFFF"));              // lineSymbol used for freehand polyline, polyline and line.             var lineSymbol = new CartographicLineSymbol(               CartographicLineSymbol.STYLE_SOLID,               new Color([255, 0, 0]), 10,               CartographicLineSymbol.CAP_ROUND,               CartographicLineSymbol.JOIN_MITER, 5             );              // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol             // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png             var fillSymbol = new PictureFillSymbol(               "images/mangrove.png",               new SimpleLineSymbol(                 SimpleLineSymbol.STYLE_SOLID,                 new Color('#000'),                 1               ),               42,               42             );              function initToolbar() {                 tb = new Draw(map);                 tb.on("draw-end", addGraphic);                  // event delegation so a click handler is not                 // needed for each individual button                 on(dom.byId("info"), "click", function (evt) {                     if (evt.target.id === "info") {                         return;                     }                     if (evt.target.id === "infoClear") {                         map.graphics.clear();                         return;                     }                     var tool = evt.target.id.toLowerCase();                     map.disableMapNavigation();                     tb.activate(tool);                 });             }              function addGraphic(evt) {                 //deactivate the toolbar and clear existing graphics                 tb.deactivate();                 map.enableMapNavigation();                  // figure out which symbol to use                 var symbol;                 if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {                     symbol = markerSymbol;                 } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {                     symbol = lineSymbol;                 }                 else {                     symbol = fillSymbol;                 }                  map.graphics.add(new Graphic(evt.geometry, symbol));             }              function clearMap() {                 try {                     map.graphics.clear();                 }                 catch (e) {                     alert("something went wrong in the clear map function");                 }             }         });     </script> </head>  <body class="claro">      <div id="info">         <div>Select a shape then draw on map to add graphic</div>         <button id="Point">Point</button>         <button id="Multipoint">Multipoint</button>         <button id="Line">Line</button>         <button id="Polyline">Polyline</button>         <button id="FreehandPolyline">Freehand Polyline</button>         <button id="Triangle">Triangle</button>         <button id="Extent">Rectangle</button>         <button id="Circle">Circle</button>         <button id="Ellipse">Ellipse</button>         <button id="Polygon">Polygon</button>         <button id="FreehandPolygon">Freehand Polygon</button>         <button id="infoClear">Clear Graphics</button>     </div>     <input type="submit" value="Clear Map" id="ClearGraphics" />     <button id="progButtonNode" type="button"></button>     <div id="mapDiv"></div>  </body> </html>

JeffPace · ‎07-02-2014

what browser?

AndrewDavis · ‎07-03-2014

I went back and re-read the information that Ken put out.

It was the answer and I missed it the first time..

If you look at the way he has it wired up it runs like a champ.

Thanks Ken..

JeffPace · ‎07-03-2014

you need to remove the clearmap function from your function list. That (except domReady!) should match exactly.