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>
