Has anybody had the chance to work with the new OpacitySlider dijit? It's a subclass of the RendererSlider class, and I'm having difficulties trying to get it to work.
I'm confused by what the API reference means when it says the "handles" property says: Handles identified by their index values within the stops
array. What is the "stops array" and where do you set it?
Thanks in advance for the help.
Marshall,
I don't think this dijit is what you are looking for, but here is a sample that shows how it can be used (the dijit is designed to be used by smart mapping I think). Here is the esri sample I got most of my inf from: Smart Mapping - Show Data by Color | ArcGIS API for JavaScript
<!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>Feature Layer Only Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #esri-opacityinfoslider-container { position: absolute; top: 162px; left: 10px; border-radius: 10px; background-color: #fafafa; border: 1px solid #5c5c5c; box-shadow: 0 0 10px 0 #222222; font-family: "Avenir LT W01 85 Heavy", Arial, Helvetica, sans-serif; padding: 10px; max-width: 250px; } #title { font-weight: 600; text-align: center; font-family: "Avenir LT W01 85 Heavy", Arial, Helvetica, sans-serif; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script> require([ "dojo/dom-construct", "esri/map", "esri/layers/FeatureLayer", "esri/geometry/Extent", "esri/InfoTemplate", "esri/dijit/OpacitySlider", "dojo/domReady!" ], function( domConstruct, Map, FeatureLayer, Extent, InfoTemplate, OpacitySlider ) { var bounds = new Extent({ "xmin":-16045622, "ymin":-811556, "xmax":7297718, "ymax":11142818, "spatialReference":{"wkid":102100} }); var map = new Map("map", { extent: bounds }); var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2"; var template = new InfoTemplate("World Regions", "Region: ${REGION}"); var fl = new FeatureLayer(url, { id: "world-regions", infoTemplate: template }); map.addLayer(fl); var opacitySlider = new OpacitySlider({ handles:[0], opacityInfo:{ stops:[ {opacity: "1", value: 100} ] } }, "esri-opacityinfoslider"); opacitySlider.startup(); opacitySlider.on("handle-value-change", function (sliderValueChange){ //console.log("handle-value-change", sliderValueChange); fl.setOpacity(sliderValueChange.stops[0].value /100); fl.redraw(); }); } ); </script> </head> <body> <div id="map"></div> <div id="esri-opacityinfoslider-container"> <div id="title">Adjust Layer Opacity</div> <hr> <div id="esri-opacityinfoslider"></div> </div> </body> </html>