AnsweredAssumed Answered

Only see the number on the screen by the ClusterFeatureLayer

Question asked by chyang0107 on Apr 18, 2016
Latest reply on Apr 18, 2016 by rscheitlin

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="//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[i].attributes.clusterCount > 1) {

                        extent = clusterLayer._getClusterExtent(clusters[i]);

                        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>

Attachments

Outcomes