How to prevent Map.Redraw from using last drawn symbol

MorganKeene — Tue, 20 Jan 2015 20:51:08 GMT

Hello,

I have recreated this draw tool found in the ArcGIS API for flex http://www.arcgis.com/home/item.html?id=91a0014160fc4a9caadc2c7fd7089c1b

It is fully functional the only problem is when you pan or zoom in and out the map calls a graphics.redraw and redraws all graphics on the map using the last set properties which overwrites other symbols fill colors etc.

I am trying to find a way to keep the graphics the same whenever I pan or zoom.

Re: How to prevent Map.Redraw from using last drawn symbol

MorganKeene — Tue, 20 Jan 2015 20:57:22 GMT

var tb;

require([

"esri/map", "esri/toolbars/draw",

"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/TextSymbol",

"esri/symbols/SimpleFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/tasks/GeometryService", "esri/dijit/Measurement",

"esri/graphic",

"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"

], function(

Map, Draw,

SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol,

SimpleFillSymbol, CartographicLineSymbol, GeometryService, Measurement,

Graphic,

Color, dom, on

) {

esriConfig.defaults.geometryService = new GeometryService("http://mapservices.ssmic.com/production/rest/services/Utilities/Geometry/GeometryServer");

// set the map property to be the same as the map initialized in the index.html

map = map

map.on("load", initToolbar); // on the map load, call initToolbar

//sets the properties of the measurement widget then enables it.

var measurement = new Measurement({

map: map,

lineSymbol: lineSymbol,

pointSymbol: markerSymbol

}, dom.byId("measurementDiv")); measurement.startup();

var markerSymbol = new SimpleMarkerSymbol();

var lineSymbol = new CartographicLineSymbol();

var fillSymbol = new SimpleFillSymbol();

// disables all the proprerties for every draw tool properties

// they are disabled because each tool uses a different set of properties

function disableAllProperties(){

document.getElementById("colorPickerDiv").style.display = "none";

document.getElementById("outlinePickerDiv").style.display = "none";

document.getElementById("spinnerDiv").style.display = "none";

document.getElementById("widthDiv").style.display = "none";

document.getElementById("spinnerLabel").style.display = "none";

document.getElementById("sizeSpinner").style.display = "none";

document.getElementById("pointIconDiv").style.display = "none";

document.getElementById("lineSymbolDiv").style.display = "none";

document.getElementById("polyFillDiv").style.display = "none";

document.getElementById("textInput").style.display = "none";

document.getElementById("textBox").style.display = "none";

document.getElementById("fontLabel").style.display = "none";

document.getElementById("fontSelect").style.display = "none";

document.getElementById("ck-button").style.display = "none";

}

//set the clear graphics button to not visible. it is not included in disableAllProperties because it will make

// the clear label dissapear at incorrect times.

document.getElementById("clearGraphic").style.display = "none";

function initToolbar() {

tb = new Draw(map);

tb.on("draw-end", addGraphic);

document.getElementById("measurementDiv").style.display = "none";

//disable all properties for each draw symbol so we can set the visibility for only the properties we need

disableAllProperties();

// event delegation so a click handler is not

// needed for each individual button

on(dom.byId("DrawDiv"), "click", function(evt) {

if (!( evt.target.id === "Point" || evt.target.id == "Polyline" || evt.target.id == "FreehandPolyline" || evt.target.id == "Extent" || evt.target.id == "Circle" || evt.target.id == "Ellipse" || evt.target.id == "Polygon" || evt.target.id == "FreehandPolygon" || evt.target.id == "text")) {

return;

}

var tool = evt.target.id.toLowerCase();

//here we will add the properties to the selected tool

if (tool === "point" || tool === "multipoint"){

disableAllProperties();

// if the point has been selected, enable all the properties as the pointer uses them all.

//disable all properties for each draw symbol so we can set the visibility for only the properties we need

document.getElementById("colorPickerDiv").style.display = "inline-block";

document.getElementById("outlinePickerDiv").style.display = "inline-block";

document.getElementById("spinnerDiv").style.display = "inline-block";

document.getElementById("widthDiv").style.display = "inline-block";

document.getElementById("spinnerLabel").style.display = "inline-block";

document.getElementById("sizeSpinner").style.display = "inline-block";

document.getElementById("pointIconDiv").style.display = "inline-block";

var symbolToUse = $("#pointIcon").val();

markerSymbol.setColor($("#colorPicker").val());

markerSymbol.setSize($("#sizeSpinner").val());

markerSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, $("#outlinePicker").val(), $("#widthSpinner").val())); // this sets the outline of the icon, the default is a thin black line

//there is no way to set the symbol style passing it as a variable so I will check the dropdown list

//and depending on the selected value, set the symbol style

if (symbolToUse === "STYLE_CIRCLE"){

markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);

} else if(symbolToUse === "STYLE_CROSS"){

markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_CROSS);

}else if(symbolToUse === "STYLE_DIAMOND"){

markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_DIAMOND);

}else if(symbolToUse === "STYLE_SQUARE"){

markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);

}else{

markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_X);

}

} else if (tool === "line" || tool === "polyline" || tool === "freehandpolyline"){

//hide all the properties initially

disableAllProperties();

// enable the properties specific to the line or polyline.

document.getElementById("colorPickerDiv").style.display = "inline-block";

document.getElementById("widthDiv").style.display = "inline-block";

document.getElementById("lineSymbolDiv").style.display = "inline-block";

var lineSymbolToUse = $("#lineSymbolIcon").val();

if (lineSymbolToUse === "STYLE_SOLID"){

lineSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color($("#colorPicker").val()), $("#widthSpinner").val());

} else if(lineSymbolToUse === "STYLE_DASH"){

lineSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_DASH, new Color($("#colorPicker").val()), $("#widthSpinner").val());

}else if(lineSymbolToUse === "STYLE_DOT"){

lineSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_DOT, new Color($("#colorPicker").val()), $("#widthSpinner").val());

}else if(lineSymbolToUse === "STYLE_DASHDOT"){

lineSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_DASHDOT, new Color($("#colorPicker").val()), $("#widthSpinner").val());

}else{

lineSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_DASHDOTDOT, new Color($("#colorPicker").val()), $("#widthSpinner").val());

}

else if (tool === "text"){

//hide all properties

disableAllProperties();

//enable the properties specific to the text tool

document.getElementById("textInput").style.display = "inline-block";

document.getElementById("textBox").style.display = "inline-block";

document.getElementById("fontLabel").style.display = "inline-block";

document.getElementById("fontSelect").style.display = "inline-block";

document.getElementById("ck-button").style.display = "inline-block";

document.getElementById("colorPickerDiv").style.display = "inline-block";

document.getElementById("spinnerDiv").style.display = "inline-block";

document.getElementById("spinnerLabel").style.display = "inline-block";

document.getElementById("sizeSpinner").style.display = "inline-block";

mapClick = map.on("click", drawTextSymbol);

}

else{

//disable all properties

disableAllProperties();

// for all other shapes , set the properties here

// enable the properties specific to the freehandPolyline.

document.getElementById("colorPickerDiv").style.display = "inline-block";

document.getElementById("outlinePickerDiv").style.display = "inline-block";

document.getElementById("widthDiv").style.display = "inline-block";

document.getElementById("lineSymbolDiv").style.display = "inline-block";

document.getElementById("polyFillDiv").style.display = "inline-block";

// here we get the value from the drop down list to set the graphic fill of the symbol

var fillSymbolToUse = $("#polyFill").val();

if (fillSymbolToUse === "STYLE_SOLID"){

fillSymbol.setStyle(SimpleFillSymbol.STYLE_SOLID);

} else if(fillSymbolToUse === "STYLE_BACKWARD_DIAGONAL"){

fillSymbol.setStyle(SimpleFillSymbol.STYLE_BACKWARD_DIAGONAL);

}else if(fillSymbolToUse === "STYLE_CROSS"){

fillSymbol.setStyle(SimpleFillSymbol.STYLE_CROSS);

}else if(fillSymbolToUse === "STYLE_FORWARD_DIAGONAL"){

fillSymbol.setStyle(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL);

}else if(fillSymbolToUse === "STYLE_HORIZONTAL"){

fillSymbol.setStyle(SimpleFillSymbol.STYLE_HORIZONTAL);

}else{

fillSymbol.setStyle(SimpleFillSymbol.STYLE_VERTICAL);

}

// here we get the value from the drop down list to set the outline symbol type

var fillOutlineSymbolToUse = $("#lineSymbolIcon").val();

if (fillOutlineSymbolToUse === "STYLE_SOLID"){

fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, $("#outlinePicker").val(), $("#widthSpinner").val()));

} else if(fillOutlineSymbolToUse === "STYLE_DASH"){

fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, $("#outlinePicker").val(), $("#widthSpinner").val()));

}else if(fillOutlineSymbolToUse === "STYLE_DOT"){

fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_DOT, $("#outlinePicker").val(), $("#widthSpinner").val()));

}else if(fillOutlineSymbolToUse === "STYLE_DASHDOT"){

fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, $("#outlinePicker").val(), $("#widthSpinner").val()));

}else{

fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOTDOT, $("#outlinePicker").val(), $("#widthSpinner").val()));

}

fillSymbol.setColor($("#colorPicker").val());

}

tb.activate(tool);

});

}

function addGraphic(evt) {

//deactivate the toolbar

tb.deactivate();

map.enableMapNavigation();

// figure out which symbol to use

// the color and outline Color are set here because a bug was being caused when you would try and print the graphics the user placed on map.

var symbol;

if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

symbol = markerSymbol;

markerSymbol.setColor(new Color($("#colorPicker").val()));

markerSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color($("#outlinePicker").val()), $("#widthSpinner").val()));

} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {

symbol = lineSymbol

}

else {

symbol = fillSymbol;

fillSymbol.setColor(new Color($("#colorPicker").val()));

fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color($("#outlinePicker").val()), $("#widthSpinner").val()));

}

map.graphics.add(new Graphic(evt.geometry, symbol));

document.getElementById("clearGraphic").style.display = "block";

}

Re: How to prevent Map.Redraw from using last drawn symbol

TimWitt2 — Tue, 20 Jan 2015 21:02:10 GMT

Morgan,

I know this is not what you asked, but check out my draw widget I created for javascript.

Javascript API - Advanced Draw widget

Maybe you don't need to re-invent the wheel

Tim

topic Re: How to prevent Map.Redraw from using last drawn symbol in ArcGIS JavaScript Maps SDK Questions

How to prevent Map.Redraw from using last drawn symbol

Re: How to prevent Map.Redraw from using last drawn symbol

Re: How to prevent Map.Redraw from using last drawn symbol

Re: How to prevent Map.Redraw from using last drawn symbol

Re: How to prevent Map.Redraw from using last drawn symbol

Re: How to prevent Map.Redraw from using last drawn symbol

Re: How to prevent Map.Redraw from using last drawn symbol