How can I retreive the source of a marker ?

Question

I am using Azure maps to render markers on a map (pretty simple) using Javascript.

The data I'm using is split in multiple datasources (and I cannot merge them to have only one).
Each datasource have a Cluster layer, and a symbol layer.
Each cluster have a click event where I get the Cluster Expansion Zoom to zoom in where the cluster breaks into smaller clusters or markers.

Is there a way to get the source used by the cluster when I click on it (since the getClusterExpansionZoom() method is in the source object)?

Currently, I am looping through all the sources, and trying to get the zoom level, but I think this is not the right way to do it.

Thanks everyone :)

Answer 1

Ok, so you must be using the HTML marker layer then which is an extension module, as that would be the only way to create a cluster using an HTML marker. HTML markers don't normally connect to data sources and thus have no references to them. The HTML marker layer wraps a hidden bubble layer that's connected to a data source, and then creates/removes HTML markers as the map moves. One solution to your problem would be to create a different event handler for each data source you have. Here is a simple example that does this:

//A function that wraps a data source and returns an event handler function.
function markerClicked(source) {
    return function(e) {
        var marker = e.target;

        if (marker.properties.cluster) {
            //Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.
            source.getClusterExpansionZoom(marker.properties.cluster_id).then(function (zoom) {

                //Update the map camera to be centered over the cluster.
                map.setCamera({
                    center: marker.getOptions().position,
                    zoom: zoom,
                    type: 'ease',
                    duration: 200
                });
            });
        } else {
            //Code for single marker location.

        }
    };          
}

var markerLayer = new atlas.layer.HtmlMarkerLayer(datasource, null, {
    markerCallback: function (id, position, properties) {
        //Your logic for creating markers.
    }
});

//Add click event, wrap data source with handler.
map.events.add('click', markerLayer, markerClicked(datasource));

Answer 2

There is a way to get this using undocumented parts of the API. The GeoJSON feature used to represent the cluster has a "source" property, which is the ID of the data source. You can use this to look up the data source in the map. Here is an example:

var source = map.sources.getById(e.shapes[0].source);

Answer 3

My object does not have the property
shapes
. In fact, the object I get from the click event on the cluster is an htmlMarker. I access it by using
e.target
(with
e
the event function parameter), and it has the following properties :