Hello
I've added a graphicslayer. and a button.
var g = new GraphicsLayer(); // g is global variable: i can use this everywhere
mymap.add(g);
Button code
g.opacity = 0.5;
but nothing happening. i can see layer opacity as 0.5 on developer tools (f12) console but im seeing layer on 1 opacity.
Thanks.
Tuba,
I am not sure what you are doing wrong, so here is a sample that shows opacity working on a GL:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Shapes and Symbols</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/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="https://js.arcgis.com/3.23/"></script>
<script>
var map, tb, gl;
require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic", "esri/layers/GraphicsLayer",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, Draw,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic, GraphicsLayer,
Color, dom, on
) {
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
);
var fillSymbol2 = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
new Color([255,255,0,1])
);
function initToolbar() {
gl = new GraphicsLayer({opacity: 0.5});
map.addLayer(gl);
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;
}
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 = fillSymbol2;
}
gl.add(new Graphic(evt.geometry, symbol));
}
});
</script>
</head>
<body>
<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>
</div>
<div id="mapDiv"></div>
</body>
</html>
Thanks for the answer.
I'm using JS 4.6. Yes your code seems like working good
But below code doesn't work even as your sample code.
gl = new GraphicsLayer();
map.addLayer(gl);gl.opacity = 0.5;
As you can see i need to set layer opacity after add to map. Users on sometimes needs to change layer opacity after adding some graphics to gl.
Tuba,
Yes that does seem like a bug/undocumented limitation. Normally opacity is controlled by the graphics symbology though, so you can still adjust the graphics opacity but work directly with the graphic instead of the GraphicsLayer.
Robert,
GL has many graphics which has different opacity. I've got one numberbox component for layer opacity. So i can't apply same opacity to all graphics. Some graphics needs to different opacity. I think this is a bug and hope fix as soon as possible.
Thanks.
I am encountering a similar problem. I have not yet found a solution. I allow users to choose the opacity of my FeatureLayer via radio button, and then if they click a polygon, I create a new graphic from their selected polygon (hitTest) and set the symbol to be a blue outline. I add that graphic to a GraphicsLayer. Unfortunately, the graphic inherits the opacity from the FeatureLayer even if I set the opacity to something different on the GL.
GraphicsLayer takes on opacity from FeatureLayer
I have tried both
gl = new GraphicsLayer({opacity: 1});
and
gl.add(graphic);
map.add(gl);
gl.opacity = 1;
I have also tried setting the opacity on the actual graphic symbol:
color: [56, 247, 247, 1]
None of it works.
When you initialize a GL with a certain opacity in the constructor that opacity is used for all features in the GL. If you do not specify a opacity in the constructor then the only way currently to change the opacity of graphic(s) in the GL is to specify the alpha in the Graphics symbology.