Custom Floor switcher widget WAB

[ChadRicks]

I've been trying to make a custom widget to switch between floors using radio buttons. I have a portal web map for each floor and want the radio button to display that floor with I click on it. It doesn't display to new map when clicked. What to do to make it work? Thanks!

define([

    'jimu/BaseWidget',

    "esri/dijit/BasemapLayer",

    "esri/arcgis/utils",

    'esri/layers/ImageParameters',

    'dojo/domReady!'

], function(

    BaseWidget,

    BasemapLayer,

    arcgisUtils,

    ImageParameters) {

    function FloorSwitchWidget(params) {

        this.constructor(params);

    }

    var map, baseStartup;

    FloorSwitchWidget.prototype = BaseWidget.prototype;

    FloorSwitchWidget.prototype.templateString =

        '<div><b>Choose a floor to view</b><br><br>\

    <input type="radio" name= "FLOOR" value="basement" id="basement">  Basement<br>\

    <input type="radio" name= "FLOOR" value="first" id="first">  First Floor<br>\

    <input type="radio" name= "FLOOR" value="second" id="second">  Second Floor<br>\

    <input type="radio" name= "FLOOR" value="third" id="third">  Third Floor</div>';

    baseStartup = FloorSwitchWidget.prototype.startup;

    FloorSwitchWidget.prototype.startup = function() {

        console.log('FloorSwitchWidget startup');

        baseStartup.call(this);

        map = this.map;

        var elem1 = document.getElementById('first');

        var elem2 = document.getElementById('second');

        elem1.addEventListener('click', getFirst);

        elem2.addEventListener('click', getSecond);

    };

    function getFirst() {

        console.log(' 1st clicked')

        arcgisUtils.createMap("99f08409990c4ac9bf49920d111c0d25", "map").then(function(response) {

            map = response.map;

        });

    }

    function getSecond() {

        console.log(' 2nd clicked')

        arcgisUtils.createMap("1508e30da03f4b2f83e6226435dfb172", "map").then(function(response) {

            map = response.map;

        });

    }

    FloorSwitchWidget.hasStyle = false;

    FloorSwitchWidget.hasUIFile = false;

    FloorSwitchWidget.hasLocale = false;

    FloorSwitchWidget.hasConfig = false;

    return FloorSwitchWidget;

});

[RickeyFight · Accepted solution]

Chad,

Here is the .js part of my floor switcher. The way I handled the floor change is setdefinitionexpression.

 var map, dialog;


 define([
 'dojo/_base/declare',
 'jimu/BaseWidget',
 'jimu/ConfigManager',
 'jimu/MapManager',
 'esri/urlUtils',
 'dojo/_base/array',
 'dojo/_base/query',
 "dojo/_base/connect",
 'esri/layers/ArcGISDynamicMapServiceLayer',
 'esri/layers/ArcGISTiledMapServiceLayer',
 'esri/layers/FeatureLayer',
 'esri/layers/ImageParameters',
 'esri/dijit/BasemapGallery',
 'esri/dijit/BasemapLayer',
 'esri/dijit/Basemap',
 'esri/basemaps',
 'esri/dijit/PopupTemplate',
     "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer", 'dojo/_base/html', 'dojo/on', "esri/symbols/TextSymbol",
         "esri/layers/LabelLayer", "esri/Color",
 'dojo/domReady!'
  ],
     function (
         declare,
         BaseWidget,
         ConfigManager,
         MapManager,
         urlUtils,
         array,
         query,
         connect,
         ArcGISDynamicMapServiceLayer,
         ArcGISTiledMapServiceLayer,
         FeatureLayer,
         ImageParameters,
         BasemapGallery,
         BasemapLayer,
         Basemap,
         esriBasemaps,
         PopupTemplate, SimpleFillSymbol, SimpleLineSymbol,
         SimpleRenderer, html, on, TextSymbol, 
         LabelLayer, Color) {
         //To create a widget, you need to derive from BaseWidget.
         return declare([BaseWidget], {
             // Custom widget code goes here 

             baseClass: 'definition_query',
             //this property is set by the framework when widget is loaded.
             //name: 'CustomWidget',

             //methods to communication with app container:
             postCreate: function () {
                 this.inherited(arguments);
                 console.log('postCreate');
             },

             startup: function () {
                 this.inherited(arguments);

    var states2 = new FeatureLayer("http://yourURL/arcgis/rest/services/sandbox/rickey_floorplanlines/MapServer/1", {
          mode: FeatureLayer.MODE_AUTO,visibility: false,
        
          outFields: ["*"]
        });
        states2.setDefinitionExpression("FLOOR = '1'");


        this.map.addLayer(states2);

         


                 var labelField = "Label";


                 // create a renderer for the states layer to override default symbology
                 var statesColor = new Color("#c92e49");
           
                 // create a feature layer to show country boundaries
                 var statesUrl = "http://yourURL/arcgis/rest/services/sandbox/rickey_PrePlan/MapServer/0";
                 var states = new FeatureLayer(statesUrl, {
                     id: "states",
                   opacity: 0.0,
                     outFields: ["Label"]
                 });
                states.setDefinitionExpression("FLOOR = '1'");
                 this.map.addLayer(states);


                // create a text symbol to define the style of labels
                 var statesLabel = new TextSymbol().setColor(statesColor);
                 statesLabel.font.setSize("11pt");
                 statesLabel.font.setFamily("arial");
                 var statesLabelRenderer = new SimpleRenderer(statesLabel);
                 var labels = new LabelLayer({
                     id: "labels"
                 });
                 // tell the label layer to label the countries feature layer 
                 // using the field named "admin"
                 labels.addFeatureLayer(states, statesLabelRenderer, "{" + labelField + "}");
                 // add the label layer to the map
                 this.map.addLayer(labels);


                 //setup click event for buttons 
                 query("select").forEach(function (node) {


                     on(node, "click", function (e) {
                         var target = e.target || e.srcElement;
                         switch (target.value) {
                         case "0":
                             defExp = "FLOOR='0'";
                             break;
                         case "1":
                             defExp = "FLOOR='1'";
                             break;
                         case "2":
                             defExp = "FLOOR='2'";
                             break;
                         case "3":
                             defExp = "FLOOR='3'";
                             break;
                         case "4":
                             defExp = "FLOOR='4'";
                             break;
                         case "5":
                             defExp = "FLOOR='5'";
                             break;
                         case "6":
                             defExp = "FLOOR='6'";
                             break;
                         case "7":
                             defExp = "FLOOR='7'";
                             break;
                         case "8":
                             defExp = "FLOOR='8'";
                             break;
                         case "9":
                             defExp = "FLOOR='9'";
                             break;
                         case "10":
                             defExp = "FLOOR='10'";
                             break;
                         case "11":
                             defExp = "FLOOR='11'";
                             break;
                         case "Clear":
                             defExp = "";
                             break;

                         }
                         states.setDefinitionExpression(defExp);
states2.setDefinitionExpression(defExp);
                             
                     });

                 });
             },
             onOpen: function () {
                 console.log('onOpen');
             },

             onClose: function () {
                 console.log('onClose');
             },

             onMinimize: function () {
                 console.log('onMinimize');
             },

             onMaximize: function () {
                 this.console.log('onMaximize');
             },

             onSignIn: function (credential) {
                 /* jshint unused:false*/
                 console.log('onSignIn');
             },

             onSignOut: function () {
                 console.log('onSignOut');
             },

             onPositionChange: function () {
                 console.log('onPositionChange');
             },

             resize: function () {
                 console.log('resize');
             }

             //methods to communication between widgets:

         });
     });

[ChadRicks]

Cool, thanks Rickey for the reply. I was just wondering why my portal webmaps weren't loading.

But the switch case looks like the way to go. Did you use the Local Layer widget with this application? If you're not too busy could you post the html or css or config that go along with the .js portion above?

[RickeyFight]

Chad,

I have the widget working for one definition query. I am currently working on multiple query widget. I am thinking like a filter widget. Yes if you look above at "var statesUrl" you will see that when the widget loads the layer is added to the map. Right now my solution is to have the widget open on load but I am trying to find a way to add when map loads.

If you want radio or checkbox  buttons change the html to radio or checkbox (<input type="checkbox" id="EastCoast"/>East Coast  ) and the .js line 108  to match the input type. In my case I want a drop down list so i have select.

  //setup click event for buttons

                 query("select").forEach(function (node) {

The html used is:

<div>


            Choose Floor Number:
        </center>
        <select id="s5" data-dojo-id="s5" data-dojo-attach-point="test" data-dojo-type="dijit/form/Select" data-dojo-props='test'>
            <option value="0">0</option>
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>


            <option value="" disabled="true">----------</option>
            <option value="Clear">All</option>
            <option value="11">None</option>
        </select>  
          
</div>
  
</div>

[NatashaManzuiga]

Hi Chad or Rickey, can you post the code of your widget?

Did you find the way to add  it when map loads?

I want to add it right down to the ZoomSlider widget.

Thanks,

Naty

[RickeyFight]

This is the widget

GitHub - daFiter/localLayer_filter: Esri Web AppBuilder filter Widget

I did get it to work with WAB 2.0 you will have to do some coding though 

[ChadRicks]

https://community.esri.com/thread/184265-simple-map-switcher-floor-switcher-widget