Solved! Go to Solution.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/nihilo/nihilo.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body{ background-color: #fff; overflow:hidden; font-family: sans-serif; } label { display: inline-block; padding: 5px 5px 0 5px; font-weight: 400; font-size: 12pt; } #header { padding-top: 4px; padding-right: 15px; color: #444; font-size:16pt; text-align:right;font-weight:bold; height:55px; background: #fff; border-bottom: 1px solid #444; } #subheader { font-size:small; color: #444; text-align:right; padding-right:20px; } #header, #subheader { text-shadow: 1px 1px 1px #cee1f0; filter: dropshadow(color=#cee1f0, offx=1, offy=1); } #rightPane{ margin: 0; padding: 10px; background-color: #fff; color: #421b14; width: 180px; } .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; } #ds-h div { width: 100%; } #ds-l div, #ds-r div { height: 100%; } #ds-r div { right: 0; } #ds .o1 { filter: alpha(opacity=10); opacity: .1; } #ds .o2 { filter: alpha(opacity=8); opacity: .08; } #ds .o3 { filter: alpha(opacity=6); opacity: .06; } #ds .o4 { filter: alpha(opacity=4); opacity: .04; } #ds .o5 { filter: alpha(opacity=2); opacity: .02; } #ds .h1 { height: 1px; } #ds .h2 { height: 2px; } #ds .h3 { height: 3px; } #ds .h4 { height: 4px; } #ds .h5 { height: 5px; } #ds .v1 { width: 1px; } #ds .v2 { width: 2px; } #ds .v3 { width: 3px; } #ds .v4 { width: 4px; } #ds .v5 { width: 5px; } /* make all dijit buttons the same width */ .dijitButton .dijitButtonNode, #drawingWrapper { width: 160px; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.CheckBox"); dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("esri.dijit.Print"); var app = {}; app.map = null, app.toolbar = null, app.circle = false, app.symbols = null, app.printer = null; function init() { esri.config.defaults.io.proxyUrl = "/~dswingley/esri_js/proxy/proxy.php"; var initialExtent = new esri.geometry.Extent({"xmin":-10399332,"ymin":3440549,"xmax":-9801289,"ymax":3705938,"spatialReference":{"wkid":102100}}); app.map = new esri.Map("map", { extent: initialExtent, wrapAround180: true }); dojo.connect(app.map, 'onLoad', function() { dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize); app.toolbar = new esri.toolbars.Draw(app.map); dojo.connect(app.toolbar, "onDrawEnd", addToMap); }); // print dijit app.printer = new esri.dijit.Print({ map: app.map, url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" }, dojo.byId("printButton")); app.printer.startup(); var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"; var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url, { "id": "Ocean" }); app.map.addLayer(tiledLayer); // add census boundary dyn map svc var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"; var dynLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" }); app.map.addLayer(dynLayer); // create a check box dojo.forEach(["Boundaries", "Ocean"], function(id) { new dijit.form.CheckBox({ id: "cb_" + id, name: "cb_" + id, checked: true, onChange: function(bool) { bool ? app.map.getLayer(this.id.split('_')[1]).show() : app.map.getLayer(this.id.split('_')[1]).hide(); } }, dojo.create('input', { id: 'lyr_' + id })).placeAt(dojo.byId('layerToggle')); // create a label for the check box var label = dojo.create('label', { "for": "cb_" + id, "innerHTML": id }); dojo.place(label, dojo.byId('layerToggle')); dojo.place(dojo.create('br'), dojo.byId('layerToggle')); }); // set up symbols for the various geometry types app.symbols = {}; var es = esri.symbol; var dc = dojo.Color; app.symbols.point = new es.SimpleMarkerSymbol(es.SimpleMarkerSymbol.STYLE_SQUARE, 20, null, new dc([255, 255, 0, 0.5])); app.symbols.polyline = new es.SimpleLineSymbol("dashdot", new dc([255, 0, 255]), 5); app.symbols.polygon = new es.SimpleFillSymbol(es.SimpleFillSymbol.STYLE_SOLID, new es.SimpleLineSymbol("dashdot", new dc([255, 0, 0]), 5), new dc([255, 255, 0, 0.25])); // find the divs for buttons dojo.forEach(dojo.query(".drawing"), function(btn) { var button = new dijit.form.Button({ label: btn.innerHTML, onClick: function() { activateTool(this.id); }, style: { "width": "100%", "margin": "3px auto", "textAlign": "center" } }, btn); }); } function addToMap(geom) { app.toolbar.deactivate(); app.map.showZoomSlider(); var graphic = new esri.Graphic(geom, app.symbols[geom.type]); app.map.graphics.add(graphic); } function activateTool(type) { app.toolbar.activate(type); app.map.hideZoomSlider(); } dojo.ready(init); </script> </head> <body class="nihilo"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript <div id="subheader">Requires ArcGIS Server 10.1</div> </div> <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <!-- drop shadow divs --> <div id="ds"> <div id="ds-h"> <div class="ds h1 o1"></div> <div class="ds h2 o2"></div> <div class="ds h3 o3"></div> <div class="ds h4 o4"></div> <div class="ds h5 o5"></div> </div> <div id="ds-r"> <div class="ds v1 o1"></div> <div class="ds v2 o2"></div> <div class="ds v3 o3"></div> <div class="ds v4 o4"></div> <div class="ds v5 o5"></div> </div> </div> <!-- end drop shadow divs --> </div> <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'"> <div id="printButton"></div> <hr /> <div id="drawingWrapper"> Add some graphics: <div id="point" class="drawing">Point</div> <div id="freehandpolyline" class="drawing">Freehand Polyline</div> <div id="freehandpolygon" class="drawing">Freehand Polygon</div> </div> <hr /> <div id="layerToggle"> Toggle Layers: <br /> <!-- checkbox and labels inserted programmatically --> </div> </div> </div> </body> </html>???
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/nihilo/nihilo.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body{ background-color: #fff; overflow:hidden; font-family: sans-serif; } label { display: inline-block; padding: 5px 5px 0 5px; font-weight: 400; font-size: 12pt; } #header { padding-top: 4px; padding-right: 15px; color: #444; font-size:16pt; text-align:right;font-weight:bold; height:55px; background: #fff; border-bottom: 1px solid #444; } #subheader { font-size:small; color: #444; text-align:right; padding-right:20px; } #header, #subheader { text-shadow: 1px 1px 1px #cee1f0; filter: dropshadow(color=#cee1f0, offx=1, offy=1); } #rightPane{ margin: 0; padding: 10px; background-color: #fff; color: #421b14; width: 180px; } .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; } #ds-h div { width: 100%; } #ds-l div, #ds-r div { height: 100%; } #ds-r div { right: 0; } #ds .o1 { filter: alpha(opacity=10); opacity: .1; } #ds .o2 { filter: alpha(opacity=8); opacity: .08; } #ds .o3 { filter: alpha(opacity=6); opacity: .06; } #ds .o4 { filter: alpha(opacity=4); opacity: .04; } #ds .o5 { filter: alpha(opacity=2); opacity: .02; } #ds .h1 { height: 1px; } #ds .h2 { height: 2px; } #ds .h3 { height: 3px; } #ds .h4 { height: 4px; } #ds .h5 { height: 5px; } #ds .v1 { width: 1px; } #ds .v2 { width: 2px; } #ds .v3 { width: 3px; } #ds .v4 { width: 4px; } #ds .v5 { width: 5px; } /* make all dijit buttons the same width */ .dijitButton .dijitButtonNode, #drawingWrapper { width: 160px; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.CheckBox"); dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("esri.dijit.Print"); var app = {}; app.map = null, app.toolbar = null, app.circle = false, app.symbols = null, app.printer = null; function init() { esri.config.defaults.io.proxyUrl = "/~dswingley/esri_js/proxy/proxy.php"; var initialExtent = new esri.geometry.Extent({"xmin":-10399332,"ymin":3440549,"xmax":-9801289,"ymax":3705938,"spatialReference":{"wkid":102100}}); app.map = new esri.Map("map", { extent: initialExtent, wrapAround180: true }); dojo.connect(app.map, 'onLoad', function() { dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize); app.toolbar = new esri.toolbars.Draw(app.map); dojo.connect(app.toolbar, "onDrawEnd", addToMap); }); // print dijit app.printer = new esri.dijit.Print({ map: app.map, url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" }, dojo.byId("printButton")); app.printer.startup(); var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"; var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url, { "id": "Ocean" }); app.map.addLayer(tiledLayer); // add census boundary dyn map svc var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"; var dynLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" }); app.map.addLayer(dynLayer); // create a check box dojo.forEach(["Boundaries", "Ocean"], function(id) { new dijit.form.CheckBox({ id: "cb_" + id, name: "cb_" + id, checked: true, onChange: function(bool) { bool ? app.map.getLayer(this.id.split('_')[1]).show() : app.map.getLayer(this.id.split('_')[1]).hide(); } }, dojo.create('input', { id: 'lyr_' + id })).placeAt(dojo.byId('layerToggle')); // create a label for the check box var label = dojo.create('label', { "for": "cb_" + id, "innerHTML": id }); dojo.place(label, dojo.byId('layerToggle')); dojo.place(dojo.create('br'), dojo.byId('layerToggle')); }); // set up symbols for the various geometry types app.symbols = {}; var es = esri.symbol; var dc = dojo.Color; app.symbols.point = new es.SimpleMarkerSymbol(es.SimpleMarkerSymbol.STYLE_SQUARE, 20, null, new dc([255, 255, 0, 0.5])); app.symbols.polyline = new es.SimpleLineSymbol("dashdot", new dc([255, 0, 255]), 5); app.symbols.polygon = new es.SimpleFillSymbol(es.SimpleFillSymbol.STYLE_SOLID, new es.SimpleLineSymbol("dashdot", new dc([255, 0, 0]), 5), new dc([255, 255, 0, 0.25])); // find the divs for buttons dojo.forEach(dojo.query(".drawing"), function(btn) { var button = new dijit.form.Button({ label: btn.innerHTML, onClick: function() { activateTool(this.id); }, style: { "width": "100%", "margin": "3px auto", "textAlign": "center" } }, btn); }); } function addToMap(geom) { app.toolbar.deactivate(); app.map.showZoomSlider(); var graphic = new esri.Graphic(geom, app.symbols[geom.type]); app.map.graphics.add(graphic); } function activateTool(type) { app.toolbar.activate(type); app.map.hideZoomSlider(); } dojo.ready(init); </script> </head> <body class="nihilo"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript <div id="subheader">Requires ArcGIS Server 10.1</div> </div> <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <!-- drop shadow divs --> <div id="ds"> <div id="ds-h"> <div class="ds h1 o1"></div> <div class="ds h2 o2"></div> <div class="ds h3 o3"></div> <div class="ds h4 o4"></div> <div class="ds h5 o5"></div> </div> <div id="ds-r"> <div class="ds v1 o1"></div> <div class="ds v2 o2"></div> <div class="ds v3 o3"></div> <div class="ds v4 o4"></div> <div class="ds v5 o5"></div> </div> </div> <!-- end drop shadow divs --> </div> <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'"> <div id="printButton"></div> <hr /> <div id="drawingWrapper"> Add some graphics: <div id="point" class="drawing">Point</div> <div id="freehandpolyline" class="drawing">Freehand Polyline</div> <div id="freehandpolygon" class="drawing">Freehand Polygon</div> </div> <hr /> <div id="layerToggle"> Toggle Layers: <br /> <!-- checkbox and labels inserted programmatically --> </div> </div> </div> </body> </html>???
http://i50.tinypic.com/14csf7s.png
this is the problem i was refering to, now it's not opaque at all. And i know i had a polygon and i made it opaque once. Now i'm really confused