Giter VIP home page Giter VIP 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

Watchers

 avatar  avatar

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.