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>
Solved! Go to Solution.
Hank,
the unexpected token normally means you have a syntax error in your html. I would have to see all your html to know where though.
Hank,
As soon as I uncommitted and set the proxy url to my machines proxy it worked fine.
Hi Robert,
Thank you for the reply. I followed your instructions (set the proxy url to my machines proxy). However, I still saw the number on the screen.
Thanks,
Hank
Hank,
Then are you sure you have the "src" folder (the one contaning clusterfeaturelayer.js) in the same location as the html file
Hi Robert,
Thank you for the reply. I put the "src" folder in the same location as the html file.
Thanks,
Hank
By the way, I still see the number.
Thanks,
Hank
Hank,
Look at your browsers web console and see if there is an error. I have it working fine on my end using your data. The only thing I noticed is that there is not a TDS field in your data so I removed that one.
Hi Robert,
I tried to use the styled.html as my template and replaced the "url" with the TDS data url. It is working! However, in the default.html, I still see the number and error (the attached file, syntax error). I am not sure if the error could provide the helpful information.
Thanks,
Hank
Hank,
the unexpected token normally means you have a syntax error in your html. I would have to see all your html to know where though.