AGS Query Filtered graphics

Water Quality Query and hide graphics

by Bryan McIntosh

HTML

<head>
    <title>Water Quality Map</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <script>
        var dojoConfig = {
            parseOnLoad: true
        };
    </script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
       dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("esri.dijit.Popup");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("esri.dijit.Geocoder");

        var map;
        var geocoder;
        var graphicWQLayer;

        function init() {
            //Have Feature Layer
            //Run selectFeatures option
            //Use results of SelectFeatures instead of filtered Graphics for OnClick Dojofilter

            var popup = new esri.dijit.Popup({
                fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
            }, dojo.create("div"));

            map = new esri.Map("map", {
                basemap: "topo",
                center: [-80.551, 43.612],
                zoom: 9,
                infoWindow: popup
            });
            geocoder = new esri.dijit.Geocoder({
                map: map
            }, "search");
            geocoder.startup();

            dojo.addClass(map.infoWindow.domNode, "myTheme");

            dojo.connect(map, "onClick", function(evt) {
                var extentGeom = pointToExtent(map, evt.mapPoint, 10);
                var filteredGraphics = dojo.filter(graphicWQLayer.graphics, function(graphic) {
                    return...

CSS

html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .esriScalebar {
            padding: 20px 20px;
        }
        #map {
            padding:0;
        }
        #search {
            display: block;
            position: absolute;
            z-index: 2;
            top: 20px;
            left: 74px;
        }
        #dataFilter {
            display: block;
            position: absolute;
            z-index: 3;
            top: 60px;
            left: 74px;
            background-color: #fff;
        }