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