Hi all,
My have a small issue, but it feels challenging as I am new here. When a cluster image is clicked, it should zoom to the maximum level and display only the points data without the cluster.
The code below handles the click event on each cluster image and zooms to the maximum level, but it zooms to the wrong location. I expect it to zoom to the specific location where all the data inside the clicked cluster image is available.
please provide guidance on how to handle this scenario?
Thanks
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>GeoJSONLayer | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>
<script>
require(["esri/Map", "esri/layers/GeoJSONLayer", "esri/views/MapView"], (
Map,
GeoJSONLayer,
MapView
) => {
const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
const template = {
title: "Earthquake Info",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: 'time',
format: {
dateFormat: 'short-date-short-time'
}
}
]
};
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [{
type: "size",
field: "mag",
stops: [{
value: 2.5,
size: "4px"
},
{
value: 8,
size: "40px"
}
]
}]
};
const geojsonLayer = new GeoJSONLayer({
url: url,
featureReduction: {
type: "cluster",
clusterRadius: "150px",
popupTemplate: {
title: "Cluster summary",
content: "This cluster contains {cluster_count} points."
},
symbol: {
type: "picture-marker",
url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQa88gtYlcIGYRv5X5yEs7NbJ5JkJdDvzCmLf41BtSCgHqCodZV2fa4ZIjCjroPj27SQCE&usqp=CAU",
},
},
popupTemplate: template,
renderer: renderer,
orderBy: {
field: "mag"
}
});
const map = new Map({
basemap: "gray-vector",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [-168, 46],
zoom: 2,
map: map
});
//onclick of cluster image
view.on("click", (event) => {
view.hitTest(event).then(({ results }) => {
console.log(results[0])
if(results[0].graphic.attributes.cluster_count && results[0].graphic.attributes.cluster_count > 1){
view.goTo(results[0].graphic.geometry).then(() => {
view.zoom = 23;
})
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>