GUI Filter Switch

EricBianchi1 · ‎04-11-2016

Hello!

I am looking for resources for researching how to create a GUI for my web map. The idea is to have three separate buttons that, when pressed, perform the designated filter for that operation. I know how to filter the map within the code, so that step is done.

If there are some examples that I could look at, sites I could visit, or personal coding advice to be given, I would much appreciate it.

Thanks!

EB

RobertScheitlin__GISP · ‎04-12-2016

EB,

Here is a sample:

<!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>Layer List Dijit</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

    <style>
        html,
        body,
        .container,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }

        #map {
            padding: 0;
        }

        #layerListPane {
            width: 25%;
        }

        .esriLayer {
            background-color: #fff;
        }

        .esriLayerList .esriList {
            border-top: none;
        }

        .esriLayerList .esriTitle {
            background-color: #fff;
            border-bottom: none;
        }

        .esriLayerList .esriList ul {
            background-color: #fff;
        }

        .toolbar {
          border-radius: 5px;
          background-color: #d5d5d5;
          padding: 4px;
          position: absolute;
          top: 20px;
          left: 60px;
          z-index: 3;
          border: 1px solid #57585A;
        }

        .button {
          border-radius: 8px;
          background-color: #fff;
          padding: 4px;
          float: left;
          margin: 0 5px;
          width: 18px;
          height: 18px;
          cursor: pointer;
          box-shadow: 1px 1px 1px #888888;
        }

        .button:hover {
          background-color: #fdfafa;
        }

        .button:active {
          box-shadow: -1px -1px 1px #888888;
        }

        .query1Btn {
          background-image: url("images/Filter16.png");
          background-size: 16px 16px;
          background-repeat: no-repeat;
          background-position: center;
        }

        .query2Btn {
          background-image: url("images/Layers.png");
          background-size: 16px 16px;
          background-repeat: no-repeat;
          background-position: center;
        }
    </style>
    <script>
        var dojoConfig = {
            parseOnLoad: true
        };
    </script>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
        require([
            "esri/arcgis/utils",
            "esri/dijit/LayerList",
            "dojo/on",
            "dojo/dom",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(
            arcgisUtils,
            LayerList,
            on,
            dom
        ) {
            //Create a map based on an ArcGIS Online web map id
            arcgisUtils.createMap("df8bcc10430f48878b01c96e907a1fc3", "map").then(function(response) {
                var myWidget = new LayerList({
                    map: response.map,
                    layers: arcgisUtils.getLayerList(response)
                }, "layerList");
                myWidget.startup();
                on(dom.byId("query1Btn"), "click", function(){
                  //do your stuff here
                  console.info("query btn 1 clicked");
                });
                on(dom.byId("query2Btn"), "click", function(){
                  //do your stuff here
                  console.info("query btn 2 clicked");
                });
            });

        });
    </script>
</head>

<body class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
        <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="layerList"></div>
        </div>
        <div id="toolbarDiv" class="toolbar">
          <div id="query1Btn" class="button query1Btn"></div>
          <div id="query2Btn" class="button query2Btn"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    </div>
</body>

</html>