How to change color of spider cluster icons ? Eg- for each spider clusters - i want to assign different colors. about azuremapscodesamples

[rbrundritt]

If you look in the sample file, there are three layers:

• Bubble layer - used for the clustered points
• Symbol layer - to display the cluster point_count value as text
• Symbol layer (shapeLayer) - Renders the individual points on the map.

If you want to change the color of clusters, modify the bubble layer options. Currently it uses a stepped expression to customize the color based on the number of points in the cluster:

color: [
	'step',
	['get', 'point_count'],
	'rgba(0,255,0,0.8)',            //Default to green. 
	100, 'rgba(255,255,0,0.8)',     //If the point_count >= 100, color is yellow.
	750, 'rgba(255,0,0,0.8)'        //If the point_count >= 750, color is red.
]

If you want to change the color of the icon shapeLayer like this:

var shapeLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'marker-red'
},
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
});

If you want to change the color of individual points in the shapeLayer, then it gets a bit more difficult. If you have a finite number of colors, then you can either use the built in icons that are different colors (black, blue dark blue, red, yellow), or you can add custom icons to the map sprite and use those like in this example: https://azuremapscodesamples.azurewebsites.net/index.html?sample=Data-driven%20symbol%20icons If you want the icon to look like the built in one, you can use the built-in icon templates:

• https://azuremapscodesamples.azurewebsites.net/index.html?sample=Symbol%20layer%20with%20built-in%20icon%20template
• https://azuremapscodesamples.azurewebsites.net/index.html?sample=All%20built-in%20icon%20templates%20as%20symbols

From there you can have a property in your shape data that indicates which icon to use, and then use a style expression to determine which icon to display.

[krunal8123]

This is not what i was asking for sir.

I want to change each spider cluster icons marked in image as arrow. How to perform this ?

Also, I want popup on each of the cluster icons marked as arrow ? how to achieve them. As per the code given by you - popup is seen but its not for individual icon. How to perform this as well ?

[rbrundritt]

The would be the third scenario I outlined "If you want to change the color of individual points in the shapeLayer...".

[krunal8123]

I am getting an error - Error: Uncaught (in promise): Error: this._geoJSONIndex.getLeaves is not a function while calling getClusterLeaves function. Please guide me related to this.

This is my code -

 this.datasource = new atlas.source.DataSource(null, {
  cluster: true,
  clusterRadius: 45,
  clusterMaxZoom: 15
 });

const polygonDatasource = new atlas.source.DataSource();
this.maper.sources.add([polygonDatasource, this.datasource]);
this.clusterLayer = new atlas.layer.SymbolLayer(this.datasource, null, {
  iconOptions: {
    image: 'marker-blue',
  },
  textOptions: {
    textField: ['get', 'point_count_abbreviated'],
    offset: [0, -1.2],
    color: '#ffffff',
    size: 14
  },
  filter: ['has', 'point_count'],   // Filter individual points from this layer.
});

   this.maper.events.add('click', this.clusterLayer, (e) => {
      if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
    //Get the clustered point from the event.
      var cluster = e.shapes[0];


    //Get all points in the cluster. Set the offset to 0 and the limit to Infinity to return all points.
    // ).then(function (points) {
     this.datasource.getClusterLeaves(cluster.properties.cluster_id, Infinity, 0).then((e) => {
      // Print cluster leaves in the console
      var html = ['<div style="padding:10px;">Cluster<br/><ul>'];

      //Create a list of links for each point. Use one of the properties as the display text. Pass the ID of each shape into a function when clicked.
      for (var i = 0; i < e.length; i++) {
        html.push('<li><a href="javascript:void(0)" onclick="shapeSelected(\'', e[i].getId(), '\')">', e[i].getProperties().title, '</a></li>');
      }

      html.push('</ul></div>');

      //Update the content and position of the popup.
      popup.setOptions({
        content: html.join(''),
        position: cluster.geometry.coordinates,
        pixelOffset: [0, -18]
      });

      //Open the popup.
      popup.open(this.maper);
    });
  }
})

this.maper.events.add('mouseleave', this.clusterLayer, () => {
  polygonDatasource.clear();
});
this.polyGroupLayer = new atlas.layer.PolygonLayer(polygonDatasource);
this.lineGroupLayer = new atlas.layer.LineLayer(polygonDatasource);

this.symbolLayer = new atlas.layer.SymbolLayer(this.datasource, null, {
  filter: ['!', ['has', 'point_count']]   // Filter out clustered points from this layer.
});

this.addGroupLayer.push(this.polyGroupLayer, this.lineGroupLayer, this.clusterLayer, this.symbolLayer);

this.maper.layers.add(this.addGroupLayer);
if (this.parameterForSpiderCluster === 'poclivetracking') {
  this.spiderClusterLayer = new SpiderClusterManager(this.maper, this.clusterLayer, this.symbolLayer, {
    featureSelected: (shape, cluster) => {
      if (cluster) {
        this.showPopup(cluster.geometry.coordinates, shape.getProperties(), [0, 0], popup);
      } else {
        this.showPopup(shape.getCoordinates(), shape.getProperties(), [0, -20], popup);
      }
    },
    featureUnselected: function () {
      popup.close();
    }
  });
}
this.removeGroupLayer.push(this.polyGroupLayer.id, this.lineGroupLayer.id, this.clusterLayer.id, this.symbolLayer.id, this.spiderClusterLayer);

this.datasource.add(latlng);
this.clusterFisrtTimeLoaded = false;

I am getting an error at this.datasource.getClusterLeaves(cluster.properties.cluster_id, Infinity, 0).then((e) => {.

What i am trying to achieve is get a popup on clicking on cluster.

[rbrundritt]

I've never seen that error before. I believe the only time that should occur is if cluster is set to false. But your code has it set to true, as it should. Try adding a break point and inspecting the datasource object. Try calling getOptions on it to verify cluster is set to true before calling the getClusterLeaves function.

[rbrundritt]

I dug through the spider cluster code and found a bug that was preventing custom styles for the spider pins from being carried over from the unclustered layer. I've just checked in the fix, grab the latest code. This is likely unrelated to the getClusterLeaves issue you came across.

[krunal8123]

There is some serious issue with this.datasource.getClusterLeaves function. While debugging some times i get the data and some times i am getting the error - Error: this._geoJSONIndex.getLeaves is not a function Please provide the link for the latest code. And i have tried getOptions - cluster is set to true only.

[krunal8123]

There is some serious issue with this.datasource.getClusterLeaves function. While debugging some times i get the data and some times i am getting the error - Error: this._geoJSONIndex.getLeaves is not a function Please provide the link for the latest code. And i have tried getOptions - cluster is set to true only.

waiting for your reply @rbrundritt Sir.

[rbrundritt]

The latest code was checked into this repo.

The error you are getting I have never had anyone else ever encounter and am unable to reproduce it myself, so its a bit difficult to debug. My current guess is that it may be one of the following:

• The data is changing when getClusterLeaves is being called.
• A scoping issue of some sort with "this".
• Possibly some invalid data in the data source that is breaking the clustering index.

If you can share your project, I'd be happy to try running and seeing if I can reproduce the issue on my side with it.

Note that this is not an official support channel for Azure Maps. I'll help you in my spare time because I like to solve problems and play with maps, but I'm not a full time support person. Other support channels include https://azure.com/support and the developer forums:

https://stackoverflow.com/questions/tagged/azure-maps

https://docs.microsoft.com/en-us/answers/topics/azure-maps.html

[krunal8123]

I can't share my project. I am a developer and contract based. Can you help me by taking my anydesk or team viewer ?

[rbrundritt]

Instead of adding a click event to the clusterLayer, try using the featureSelected function. This custom module is wrapping and overriding some of the layers functionality, it's possible that adding that additional event may be causing issues.

Also, for the clusterLayer icon options, you may want to add the following icon options:

iconOptions: {
    image: 'marker-blue',
    allowOverlap: true,
    ignorePlacement: true
},