ThinkGeo.com    |     Documentation    |     Premium Support

Conditional ClusterMarkerStyle

#1

Hello,

I’m adding my markers to an InMemoryMarkerOverlay, and applying ValueMarkerStyles to define which icon, a red dot or green dot, will represent each marker. So far it’s working fine, but I’d like to cluster these markers in a way that if any marker in the cluster should be represented by a red dot, the cluster marker is also a red dot; otherwise it’s a green dot. This is the code I’m using to generate the markers (based on another thread I found) -

    private InMemoryMarkerOverlay getMarkers()
    {
        //Create a InMemoryMarkerOverlay with one feature column named "ValueColumn"
        InMemoryMarkerOverlay markerOverlay = new InMemoryMarkerOverlay("Markers", new FeatureSourceColumn[] { new FeatureSourceColumn("AlertStatus") });

        //Style for 'ok' markers
        var okStyle = new PointMarkerStyle()
        {
            WebImage = new WebImage(@"/Content/MapPins/greendot.png"),

        };

        //Style for 'alert' markers
        var alertStyle = new PointMarkerStyle()
        {
            WebImage = new WebImage(@"/Content/MapPins/reddot.png"),
        };

        //Add styles to a valueMarkerStyle, assign to the styles to the respective values.
        ValueMarkerStyle valueMarkerStyle = new ValueMarkerStyle("AlertStatus");
        valueMarkerStyle.ValueItems.Add(new MarkerValueItem("Ok", okStyle));
        valueMarkerStyle.ValueItems.Add(new MarkerValueItem("Alert", alertStyle));

        //sample 'ok' marker.
        var okMarker = new PointShape(-80, 33).ConverToMeter();
        var okMarkerColumnValues = new Dictionary<string, string> { { "AlertStatus", "Ok" } };

        //sample 'alert' marker
        var alertMarker = new PointShape(-80.1, 33).ConverToMeter();
        var alertMarkerColumnValues = new Dictionary<string, string> { { "AlertStatus", "Alert" } };

        //add the featueres to the marker overlay
        markerOverlay.FeatureSource.BeginTransaction();
        markerOverlay.FeatureSource.AddFeature(okMarker, okMarkerColumnValues);
        markerOverlay.FeatureSource.AddFeature(alertMarker, alertMarkerColumnValues);
        markerOverlay.FeatureSource.CommitTransaction();

        //Set CustomMarkerStyle for markerOverlay. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        markerOverlay.ZoomLevelSet.ZoomLevel01.CustomMarkerStyle = valueMarkerStyle;
        markerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

        //return the overlay, add it to map.customoverlays
        return markerOverlay;
    }

In addition to that, when the user zooms into a cluster, the markers should show their respective icons (red or green dot, regardless of the cluster’s icon.

Hope it makes sense what I’m trying to accomplish. Any assistance would be appreciated.

Thanks.

#2

Hi Eric,

I think we can implement this function through multiple marker overlay and ZoomLevelSet.
We just apply marker style to the specified Zoomlevel, please view the code snippets below:

        //Create a InMemoryMarkerOverlay with one feature column named "ValueColumn"
        InMemoryMarkerOverlay markerOverlay = new InMemoryMarkerOverlay("Markers", new FeatureSourceColumn[] { new FeatureSourceColumn("AlertStatus") });

        //Style for 'ok' markers
        var okStyle = new PointMarkerStyle()
        {
            WebImage = new WebImage(@"/Content/MapPins/greendot.png"),

        };

        //Style for 'alert' markers
        var alertStyle = new PointMarkerStyle()
        {
            WebImage = new WebImage(@"/Content/MapPins/reddot.png"),
        };

        //Add styles to a valueMarkerStyle, assign to the styles to the respective values.
        ValueMarkerStyle valueMarkerStyle = new ValueMarkerStyle("AlertStatus");
        valueMarkerStyle.ValueItems.Add(new MarkerValueItem("Ok", okStyle));
        valueMarkerStyle.ValueItems.Add(new MarkerValueItem("Alert", alertStyle));

        //sample 'ok' marker.
        var okMarker = new PointShape(-80, 33);
        var okMarkerColumnValues = new Dictionary<string, string> { { "AlertStatus", "Ok" } };

        //sample 'alert' marker
        var alertMarker = new PointShape(-80.1, 33);
        var alertMarkerColumnValues = new Dictionary<string, string> { { "AlertStatus", "Alert" } };

        //add the featueres to the marker overlay
        markerOverlay.FeatureSource.BeginTransaction();
        markerOverlay.FeatureSource.AddFeature(okMarker, okMarkerColumnValues);
        markerOverlay.FeatureSource.AddFeature(alertMarker, alertMarkerColumnValues);
        markerOverlay.FeatureSource.CommitTransaction();

        //Set CustomMarkerStyle for markerOverlay. 
        markerOverlay.ZoomLevelSet.ZoomLevel16.CustomMarkerStyle = valueMarkerStyle;//~~~~~~~~~~~~~~~~~~~
        markerOverlay.ZoomLevelSet.ZoomLevel16.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;//~~~~~~~~~~~~~~~~~~~

        //Style for 'ok' Cluster
        var okClusterStyle = new PointMarkerStyle()
        {
            WebImage = new WebImage(@"/Content/MapPins/greencluster.png"),
        };
        //Style for 'alert' Cluster
        var alertClusterStyle = new PointMarkerStyle()
        {
            WebImage = new WebImage(@"/Content/MapPins/redcluster.png"),
        };

        //Add styles to a valueMarkerStyle, assign to the styles to the respective values.
        ValueMarkerStyle valueMarkerStyleForCluster = new ValueMarkerStyle("AlertStatus");
        valueMarkerStyleForCluster.ValueItems.Add(new MarkerValueItem("Ok", okClusterStyle));
        valueMarkerStyleForCluster.ValueItems.Add(new MarkerValueItem("Alert", alertClusterStyle));


        // sample "Cluster", please modify it by the actual data. 
        double clusterCenterX = 0;
        double clusterCenterY = 0;
        string clusterAlertStatus = "Ok";

        var clusterMarker = new PointShape(clusterCenterX, clusterCenterY);
        var clusterColumnValues = new Dictionary<string, string> { { "AlertStatus", clusterAlertStatus } };

        //add the featueres to the marker overlay
        InMemoryMarkerOverlay clusterMarkerOverlay = new InMemoryMarkerOverlay();

        clusterMarkerOverlay.FeatureSource.BeginTransaction();
        clusterMarkerOverlay.FeatureSource.AddFeature(clusterMarker, clusterColumnValues);
        clusterMarkerOverlay.FeatureSource.CommitTransaction();

        //Set CustomMarkerStyle for markerOverlay. 
        clusterMarkerOverlay.ZoomLevelSet.ZoomLevel01.CustomMarkerStyle = valueMarkerStyle;//~~~~~~~~~~~~~~~~~~~
        clusterMarkerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level15;//~~~~~~~~~~~~~~~~~~~

If something misunderstood here, please provide more information.

Thanks,
Emil

#3

Thanks Emil, I see what you’re doing, and it gives me some ideas. I was hoping to use it in combination with the ClusterMarkerStyle somehow though. Is this possible? I don’t think the zoomlevel approach is suitable since there can be clustered markers within a group of clustered markers based on their relative distance from each other.

#4

Hi Eric,

Here attached is a sample shows how to work it with the ClusterMarkerStyle. Please check it out.

ConditionalClusterMarkerStyleSample.zip (75.5 KB)

Thanks,
Peter

#5

Works great. Thanks Peter!

#6

It’s my pleasure.

Thanks,
Peter