Select to view content in your preferred language

Leaflet Clustering points and ArcGIS API for Javascript

6489
8
03-24-2015 10:59 AM
RichardMoussopo
Frequent Contributor

I am really interested in using Clustering points from Esri leaflet and I tried the following

in my index page, I have these references:

<!-- Load Leaflet from CDN-->

  <link rel="stylesheet" href="https://community.esri.com//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />

  <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->

  <script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script>

        <!-- Include Leaflet.markercluster via rawgit.com, do not use in production -->

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.Default.css"/>

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.css"/>

<script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/leaflet.markercluster.js"></script>

<!-- Load Clustered Feature Layer from CDN -->

<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clus..."></script>

    <script src="http://js.arcgis.com/3.13/"></script>

And my code is as follow:

map = new Map("map", {
        basemap: "streets",
        center: [-98.198017, 37.485563],
        minZoom: 5,
        zoom: 5,
        slider:false
    });

   var fLayerTest = 'http://...fLayer/MapServer/0';


    var trees = L.esri.clusteredFeatureLayer(fLayerTest).addTo(map);

The code above won't work and also, it does not even give an error.

I am wondering if ArcGIS API is compatible with ESRI Leaflet... in terms of the map reference. Here is the Esri Leaflet I would like to use and at the same time keep the map instance as it is...

Clustering points | Esri Leaflet

0 Kudos
8 Replies
TomSellsted
MVP Regular Contributor

Richard,

I created a very simple cluster map with Leaflet.  I do like the way it clusters the points.  You can view source on it and see how I am using point clustering.  You can view it at:

http://www.yakimawa.gov/apps/postcard/appmap.html

The JavaScript API also allows for point clustering:

Point clustering | ArcGIS API for JavaScript

I am not sure you would want to mix both APIs.

Regards,

Tom

0 Kudos
ReneRubalcava
Honored Contributor

The cluster layer you are trying to use is specific to Leaflet and Esri-Leaflet.

To do clustering in the ArcGIS API for JavaScript, try this layer out. It's still in development, but Esri has forked it and there are already some pull requests to clean it up a bit.

RichardMoussopo
Frequent Contributor

Thank you both Tom and Rene, I guess I am going to use the Clustering in ArcGIS API for Javascript. I really wish I could use ESRI Leaflet for clustering. I tried tsellsteexample but I couldn't get the measurement widget to work as well as the Editor using attribute inspector as they are using the ArcGIS API for Javascript library.

0 Kudos
RichardMoussopo
Frequent Contributor

Hi Rene,

Sorry but I am still having a hard time implementing the points clustering using this example: Default Cluster Layer

0 Kudos
RichardMoussopo
Frequent Contributor

This is actually a very good concept. I hope this will be available in the 3.14 API. Also, on top of this, it would be great to add an option to be able to label features when displayed.

0 Kudos
NickCameron2
Regular Contributor

Hi Richard,

I had a similar requirement, not to use leaflet, but for clustering with flares....couldn't find a solution that fit my needs so created a custom layer. Just put it on github, you may find it useful.

https://github.com/nickcam/FlareClusterLayer

Cheers,

Nick

LadislavRozkosny
Deactivated User

Can you describe with more details how implement this script? I'm trying implement this to apps and i understand JS slightly. App show data from AGS. Thanks

0 Kudos
NickCameron2
Regular Contributor

Hi Ladislov,

Sorry I've only just noticed that your message existed.

If you check out the github page and the example in the link provided, the index.html page will give you an example of how to use it.

If by AGS you mean a feature layer from ArcGIS server, then it won't work directly with the layer, you'd have to query the feature layer then format the returned data into an array of javascript objects to feed to the cluster layer.

I've never had the use case to use a feature layer as a data source so never bothered to implement it.

Thanks,

Nick

0 Kudos