topic Re: Custom Floor switcher widget WAB in Web AppBuilder Custom Widgets Questions

Custom Floor switcher widget WAB

ChadRicks — Mon, 04 May 2015 19:50:31 GMT

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;

});

Re: Custom Floor switcher widget WAB

RickeyFight — Sun, 12 Dec 2021 10:38:46 GMT

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:

         });
     });

Re: Custom Floor switcher widget WAB

ChadRicks — Mon, 04 May 2015 23:31:55 GMT

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?

Re: Custom Floor switcher widget WAB

RickeyFight — Sun, 12 Dec 2021 10:38:49 GMT

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>

Re: Custom Floor switcher widget WAB

NatashaManzuiga — Wed, 20 Jul 2016 15:09:20 GMT

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

Re: Custom Floor switcher widget WAB

RickeyFight — Thu, 21 Jul 2016 14:21:49 GMT

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

Re: Custom Floor switcher widget WAB

ChadRicks — Mon, 10 Oct 2016 16:34:20 GMT

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