Giter Club home page Giter Club logo

cluster-layer-js's Introduction

Cluster Layer JS

An easy way to cluster 1000s of features for any point feature service. Set the styles, sizes and density to best fit your data.

View demo

Features

  • Auto cluster features
  • Set styles, colors, sizes and density
  • Format Infowindow for clusters and singles
  • Compatible with bootstrap and bootstrap-map-js

App

Example

// Create a cluster layer for a point feature service

clusterLayer = new ClusterFeatureLayer({
    "url": "http://services.arcgis.com/oKgs2tbjK6zwTdvi/arcgis/rest/services/Major_World_Cities/FeatureServer/0",
    "distance": 75,
    "id": "clusters",
    "labelColor": "#fff",
    "resolution": map.extent.getWidth() / map.width,
    "singleTemplate": infoTemplate,
    "useDefaultSymbol": false,
    "zoomOnClick": true,
    "showSingles": true,
    "objectIdField": "FID",
    outFields: ["NAME", "COUNTRY", "POPULATION", "CAPITAL"]
});

map.addLayer(clusterLayer);

Requirements

Resources

Developer Notes

  • Be sure to set the distance (pixels), the size will depend on the size of your styled clusters
  • By default it pulls 1000 features at time
  • You can also set the max features to cluster, it can process 100,000 in about 8-10s
  • Here are the constructor options (more work needs to be done here to set better defaults)
	// options:
    //     url:    string
    //        URL string. Required. Will generate clusters based on Features returned from map service.
    //     outFields:    Array?
    //        Optional. Defines what fields are returned with Features.
    //     objectIdField:    String?
    //        Optional. Defines the OBJECTID field of service. Default is 'OBJECTID'.
    //     where:    String?
    //        Optional. Where clause for query.
    //     useDefaultSymbol:    Boolean?
    //        Optional. Use the services default symbology for single features.
    //     returnLimit:    Number?
    //        Optional. Return limit of features returned from query. Default is 1000.
    //     distance:    Number?
    //         Optional. The max number of pixels between points to group points in the same cluster. Default value is 50.
    //     labelColor:    String?
    //         Optional. Hex string or array of rgba values used as the color for cluster labels. Default value is #fff (white).
    //     labelOffset:    String?
    //         Optional. Number of pixels to shift a cluster label vertically. Defaults to -5 to align labels with circle symbols. Does not work in IE.
    //     resolution:    Number
    //         Required. Width of a pixel in map coordinates. Example of how to calculate:
    //         map.extent.getWidth() / map.width
    //     showSingles:    Boolean?
    //         Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.
    //     zoomOnClick:    Boolean?
    //         Optional. Will zoom the map when a cluster graphic is clicked. Default is true.
    //     singleSymbol:    MarkerSymbol?
    //         Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.
    //     singleRenderer:    Renderer?
    //         Optional. Can provide a renderer for single features to override the default renderer.
    //     singleTemplate:    PopupTemplate?
    //         PopupTemplate. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as 'attribute = value' (not recommended).
    //     disablePopup:    Boolean?
    //         Optional. Disable infoWindow for cluster layer. Default is false.
    //     maxSingles:    Number?
    //         Optional. Threshold for whether or not to show graphics for points in a cluster. Default is 1000.
    //     font:    TextSymbol?
    //         Optional. Font to use for TextSymbol. Default is 10pt, Arial.
    //     spatialReference:    SpatialReference?
    //         Optional. Spatial reference for all graphics in the layer. This has to match the spatial reference of the map. Default is 102100. Omit this if the map uses basemaps in web mercator.

Credits

  • The core code was borrowed from the ArcGIS sample but much of it was re-written
  • Odoe also contributed as well

Contributing

Anyone and everyone is welcome to contribute. Please see our guidelines for contributing.

Licensing

Copyright 2015 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

[](Esri Tags: ArcGIS Web Mapping Bootstrap Cluster Points) [](Esri Language: JavaScript)

cluster-layer-js's People

Contributors

alaframboise avatar ppossanzini avatar ssylvia avatar steveoh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cluster-layer-js's Issues

esri dev summit

HI Admin,

This is phani.I spoke with you in esri dev summit asking for the support of this cluster layer for 4.X esri javascript.Can you please let me know when you will upload the new version of cluster layer which supports 4.x version.

Thanks in advance.

Show connections

Hello

This feature is quite nice but there is one problem. We can't see all related points when click in a cluster point (click on the cluster '3' and showing some radial lines to this three points related).

Would be nice to have this implementation. We can't figure out the elements of each cluster.

See sample: http://lele3p.altervista.org/examples/cluster27/index.html

Sincerelly
Ezequias Rocha

webpack / typings / Arcgis 3.18 / Angular2

Our project relies on ClusterLayer. It was working when we were using SystemJS and Visual Studio. Now that we have separated the front end from the back end and use VS Code primarily as our front-end editor, ClusterLayer no longer works. We are also now using webpack. We are having a hard time getting ClusterLayer.js to work in 3.18 with our new configuation. After creating a typings file for it, tsc compiles and the site runs without error. However, for some reason no clusters are showing up. Can you offer any advice or do you know of anyone who has a similar setup to ours that we could use to help us along? Thanks,
Kai

Does this support creating several clusterLayers?

When I try to instantiate several cluster layers, only the first one created shows up on the map. I traced it back to _setMap not being called for the other ones, even though I call map.addLayer(clusterLayer) for each. I cant seem to find why the remaining layers do not appear.

`_reCluster` not firing on `extent-change`

Looks like as of PR #15 _reCluster is no longer being fired on the map's extent-change event. gh-pages hasn't been updated since the merge, so everything appears fine there, but master is broken.

Click issues in Chrome

Hello,
I have been having single and cluster click issues in Chrome. This has been happening on both your demo and my local copy. Basically the click event does not fire and the extent change event fires,

It is VERY hard to duplicate and the only way to get the click back is to close all instances of the browser. Clearing the cache, hard refresh does not work. Its very strange.

Is this a known issue?

chrome version: 48.0.2564.97 m

Thanks,

Andrew

Built in 4.0 ?

Does this Cluster Layer works in the Esri Javascript 4.0 (Currently in beta) ? If not, will this cluster layer become a build-in feature within the upcoming ArcGIS Esri JavaScript 4.0 Framework ?

Cluster click problem on Chrome

Hello,
I have been having single and cluster click issues in Chrome. This has been happending on both yoru demo and my local copy. Basically the click event does not fire and the extent change event fires,

It is VERY hard to duplicate and othe only way to get the click back is to close all instacnes of the beowser. Clearning the cache, hard refresh does not work. Its very strange.

Is this a known issue?

Thanks,

Explore ways to not query for every feature

https://github.com/Esri/cluster-layer-js/blob/master/src/clusterfeaturelayer.js#L470-L483

                if (uncached.length > this._returnLimit) {
                    while(uncached.length) {
                        // Improve performance by just passing list of IDs
                        this._query.objectIds = uncached.splice(0, this._returnLimit - 1);
                        queries.push(this.queryTask.execute(this._query));
                    }
                    all(queries).then(lang.hitch(this, function(res) {
                        var features = arrayUtils.map(res, function(r) {
                            return r.features;
                        });
                        this._onFeaturesReturned({
                            features: merge(features)
                        });
                    }));

really puts the rage on an arcgis server that has more than a good demos worth of features. I sort of figured that returnLimit would act on a feature layer's virtual grid instead of doing snap shot style spin up a query task to download every feature - In our case being 15mb's gzipped. Should this cluster layer inherit from FeatureLayer to get access to the virtual grid instead of graphics layer?

In the future there is going to have to be server side point clustering to handle these scenarios. Are you in the loop enough to know if that is on the right peoples radar?

Point label and zoom

Is there a way to hide point labels when zooming. At current time, labels become visible as you zoom in, but once visible they are not hiding again after zooming out. Can you control label visibility within the cluster based on zoom level

Thank you

Still clicking issues

Clicking on clusters neither zooms or shows any popup (IE or Chrome, local or in the hosted examples). Clicking on singles doesn't show a popup either (although hovering on a single in the styled example does). Is this still actively being worked on?

Clusters do not always wrap around beyond 180 E/W

Has anyone else noticed that getting clusters and individual points to draw beyond +/-180 lng is not consistent? When zoomed out to the world and panning E/W, I occasionally notice "flashing" visibility of where they should be, but more often they do not show up. Both the repo's demo and my own experiments in wkid 102100 are experiencing this.

I started playing around within the _inExtent method with normalizing the map's extent and I see that in fact the valid array is getting more cached clusters pushed to it than before; however, I'm still trying to learn my way around from the map's extent-change to this layer's clusters-shown emit to see what else may be causing this. Has anyone already looked into this? If not, I'd be glad to dive in further.

Refreshing the layer with new query parameters

Hi @alaframboise, I'm implementing clusterfeaturelayer.js into a WAB widget. I'm using the layer as the result for a widget that executes queries (with where, geometry, unit, distance params) on a FL.

The user will be updating and executing the search multiple times, but I don't see a way to modify the clusterfeaturelayer once it has been instantiated and added to the map. It appears the CFL has a refresh method, but it doesn't appear to be working. Also, I'm not sure how to set new params.

Can you think of a quick way to do this? Ideally, it'd look something like this:

        this._clusterLayer.setWhere(whereString);
        if (this._searchByLocation == true) {
          this._clusterLayer.setGeometry(this._clickLocation);
          this._clusterLayer.setDistance($(".dist-input").val());
          this._clusterLayer.setUnits( $(".unit-input").val());
        }
        this._clusterLayer.refresh();

I've also modified your code slightly to take geometry params, as well:

      this._where = options.where || null;
      this._geom = options.geometry || null;
      this._dist = options.distance || null;
      this._units = options.units || null;
    // Get the features by IDs
    _getObjectIds: function(extent) {
      // debug
      // this._startGetOids = new Date().valueOf();
      // console.debug('#_getObjectIds start');

      if (this.url) {
        var ext = extent || this._map.extent;
        this._query.objectIds = null;
        if (this._where) {
          this._query.where = this._where;
        }
        if (this._geom) {
          this._query.geometry = this._geom;
        } else if (!this.MODE_SNAPSHOT) {
          this._query.geometry = ext;
        }
        if (this._dist) {
          this._query.distance = this._dist;
        }
        if (this._units) {
          this._query.units = this._units;
        }
        if (!this._query.geometry && !this._query.where) {
          this._query.where = '1=1';
        }
        this.queryTask.executeForIds(this._query).then(
          lang.hitch(this, '_onIdsReturned'), this._onError
        );
      }
    },

Multiple renderer in single feature layer

Trying to add ClassBreakRenderer for clustering behaviour and for showing different color symbol for single location based on input field, so i tried to use UniqueValueRenderer in same layer too, but seems we can 't use more than one renderer.
Either we can have clustering behaviour or UniqueValueRenderer based on some input attribute value,,
if any one tried and able to get it,please tell how to do it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.