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";
}
