Hide specific graphic from graphics layer ArcGIS

481
1
02-22-2023 10:32 PM
aggarwalarpit93
New Contributor II

Hello, I have a feature layer which has the list of all the districts. I have added a graphics layer and added multiple point markers in this graphics on different locations.

By default all the markers are displayed on the map. Now, what I want is whenever I click on a particular district, it should show only those markers. I have added geocoding and everything to determine where user is clicking and added custom attributes in the point graphic as well to identify which markers should be under that clicked district.

I am just not able to filter the specific point marker and show hide them. Here is the sample code:

 

<script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/LayerList",
            "esri/widgets/Expand",
            "esri/layers/GraphicsLayer",
            "esri/symbols/PictureMarkerSymbol",
            "esri/rest/locator",
            "esri/Graphic",
            "esri/rest/support/Query",
            ], (esriConfig, Map, MapView, FeatureLayer, LayerList, Expand, GraphicsLayer, PictureMarkerSymbol, locator, Graphic, Query) => {

            esriConfig.apiKey= API_KEY;

            const map = new Map();

            const districtLayer = new FeatureLayer({
                url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/22",
            });

            map.add(districtLayer);

            const view = new MapView({
                map: map,
                center: [85.7780685, 25.8560264],
                scale: 1800000,
                container: "viewDiv",
            });

            // adding a marker
            const markerList = new GraphicsLayer();
            map.add(markerList);

            addMarkerToMap('Saran', markerList, "https://cdn-icons-png.flaticon.com/512/2991/2991148.png");
            addMarkerToMap('Siwan', markerList, "https://cdn-icons-png.flaticon.com/512/2991/2991148.png");

            const serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

            // hide markers on click of map
            view.whenLayerView(districtLayer).then(function(layerView){
                view.on("click", (event) => {

                    // display if clicked on marker
                    const opts = {
                        exclude: districtLayer
                    }
                    view.hitTest(event, opts).then(function (response) {
                        if (response.results.length) { // clicked on marker
                            const graphic = response.results[0].graphic;
                            const attributes = graphic.attributes;
                            console.log(attributes);
                        }else{ // clicked on map

                            locator.locationToAddress(serviceUrl, { location: event.mapPoint }).then(function(response) {
                                
                                const districtName = response.attributes.Subregion;

                                // create query to filter clicked district
                                var query = new Query();
                                query.where = " D_NAME = '" + districtName + "'";

                                // filter dsitrict layer to get clicked district
                                layerView.queryFeatures(query).then((results) => {
                                    console.log(results.features[0].attributes);
                                    // code here to hide other markers
                                });

                            }, function(err) { // Show no address found
                                console.log("No address found.", evt.mapPoint);
                            });
                        }
                    });
                });
            });


            // function to add marker
            function addMarkerToMap(location, alertType, icon) {
                const geocodingServiceUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

                const params = {
                    address: {
                        "address": location + ", Bihar"
                    }
                }

                locator.addressToLocations(geocodingServiceUrl, params).then((results) => {

                    const point = {
                        type: "point",
                        longitude: results[0].location.longitude.toFixed(5),
                        latitude: results[0].location.latitude.toFixed(5)
                    };

                    var markerSymbol =  new PictureMarkerSymbol({
                        "url":icon,
                        "height":10,
                        "width":10,
                    });

                    const pointGraphic = new Graphic({
                        geometry: point,
                        symbol: markerSymbol,
                        attributes: {
                            "district": location
                        }
                    });

                    alertType.add(pointGraphic);
                });
            }
        });
    </script>

 

0 Kudos
1 Reply
UndralBatsukh
Esri Regular Contributor

Hi there, 

So I created this simple codepen based on your description. Hopefully this will be helpful. In this codepen, I am comparing an attribute of a polygon feature with an attribute of a point feature. If they match, I toggle the point feature visibility. 

https://codepen.io/U_B_U/pen/mdGEBGj?editors=1000

 

0 Kudos