Community

OpacitySlider dijit

2883
1
08-10-2015 11:52 AM
MarshallRobinson
by
New Contributor III
‎08-10-2015 11:52 AM

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.

Tags (2)
0 Kudos
1 Reply
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-10-2015 08:59 PM

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>
0 Kudos