Hi All,
I tried to modified the ESRI/cluster-layer-js created by Allan Laframboise. Basically, I replaced the data url to my data url ("http://129.138.12.30:6080/arcgis/rest/services/Water/HCO3_All/FeatureServer/0") in "url" in the default.html. Then I also update two parameters such as "returnLimit" : 10000 and "maxSingles": 10000 in the default.html. However, I can only see the number on the screen (the attached file, number on the screen). In addition, the other attached file (REST INFO) shows the data info on the rest server. Could anyone show your valuable opinions on this issue?
Thanks,
Hank
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Default Cluster Layer</title>
<link rel="shortcut icon" href="https://community.esri.com//esri.github.io/quickstart-map-js/images/favicon.ico">
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script type="text/javascript">
window.dojoConfig = {
async: true,
packages: [
{
name: 'app',
location: window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/src'
}
]};
</script>
<!-- ArcGIS API for JavaScript library references -->
<script src="https://js.arcgis.com/3.15compact"></script>
<script>
require(["esri/map",
"esri/dijit/Geocoder",
"esri/dijit/HomeButton",
"esri/InfoTemplate",
"esri/graphic",
"app/clusterfeaturelayer",
"dojo/domReady!"],
function (Map, Geocoder, HomeButton, InfoTemplate, Graphic, ClusterFeatureLayer) {
// esriConfig.defaults.io.proxyUrl = "http://maps.nmt.edu/DotNet/proxy.ashx";
// esriConfig.defaults.io.alwaysUseProxy = false;
// Locals
var map,
popup,
clusterLayer,
geocoder,
infoTemplate,
selectedSym;
// Create map
map = new Map("mapDiv", {
basemap: "dark-gray",
center: [-43, 40],
zoom: 3
});
// Add clusters
map.on("load", function () {
// Add layer
addClusterLayer();
addClusterLayerEvents();
});
// Save the last selected graphic
map.infoWindow.on("selection-change", function () {
addSelectedFeature();
});
// Create widget
geocoder = new Geocoder({
value: "Washington, D. C., District of Columbia, United States",
autoNavigate: true,
maxLocations: 25,
autoComplete: true,
arcgisGeocoder: {
outFields: "Place_addr, PlaceName, Score"
},
map: map
}, "search");
geocoder.startup();
var home = new HomeButton({
map: map
}, "homeButton");
home.startup();
// Set popup
popup = map.infoWindow;
popup.highlight = false;
popup.titleInBody = false;
popup.domNode.className += " light";
// Popup content
infoTemplate = new InfoTemplate("<b>City Data</b>", "<p>NAME: ${CITY_NAME}</p><p>COUNTRY: ${CNTRY_NAME}</p><p>CAPITAL: ${ADMIN_NAME}</p><p>POPULATION: ${POP}</p>");
// Create a feature layer to get feature service
function addClusterLayer() {
clusterLayer = new ClusterFeatureLayer({
"url": "http://129.138.12.30:6080/arcgis/rest/services/Water/HCO3_All/FeatureServer/0",
"distance": 50,
"id": "clusters",
"labelColor": "#fff",
"resolution": map.extent.getWidth() / map.width,
"singleTemplate": infoTemplate,
"useDefaultSymbol": false,
"zoomOnClick": true,
"returnLimit" : 10000,
"showSingles": true,
"maxSingles": 10000,
"objectIdField": "OBJECTID",
// "spatialReference":4269,
outFields: ["TDS", "LONG", "LAT", "DataSource"]
});
map.addLayer(clusterLayer);
}
// Hide popup if selected feature is clustered
function onClustersShown(clusters) {
var i = 0,
extent;
if (map.infoWindow.isShowing && map.infoWindow._lastSelected) {
for (i; i < clusters.length; i++) {
if (clusters.attributes.clusterCount > 1) {
extent = clusterLayer._getClusterExtent(clusters);
if (extent.contains(map.infoWindow._lastSelected.geometry)) {
map.infoWindow.hide();
break;
}
}
}
}
}
// Wire cluster layer events
function addClusterLayerEvents() {
// Clusters drawn
clusterLayer.on("clusters-shown", onClustersShown);
}
// Set selected
function addSelectedFeature() {
var selIndex = map.infoWindow.selectedIndex,
selFeature;
if (selIndex !== -1) {
selFeature = map.infoWindow.features[selIndex];
// Remove old feature first
removeSelectedFeature();
// Add new graphic
map.infoWindow._lastSelected = new Graphic(selFeature.toJson());
map.infoWindow._lastSelected.setSymbol(selectedSym);
map.graphics.add(map.infoWindow._lastSelected);
}
}
// Remove selected
function removeSelectedFeature() {
if (map.infoWindow._lastSelected) {
map.graphics.remove(map.infoWindow._lastSelected);
map.infoWindow._lastSelected = null;
}
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="search"></div>
<div id="homeButton"></div>
</body>
</html>
