HtmlMarkerLayer loses data points on clustering

Question

HtmlMarkerLayer loses data points on clustering

Nikolay Mitikov 6

Use clustered pie chart html markers to display data leads to losing points.
That is clearly observed by using same datasource with additional bubbleLayer on top.

Unlike both 'atlas.layer.BubbleLayer' and 'atlas.layer.SymbolLayer', the 'atlas.layer.HtmlMarkerLayer' misses points:

The sample data is attached, for convenience IPs were changed to sequential numbers (1-53).

The markerCallback function prints Ip to console like:

            if (properties.cluster){  
                  datasource.getClusterLeaves(properties.cluster_id).then(leafs => {  
                    const props = leafs.reduce((a, v) => {  
                        const { data } = v;  
                        a.push(data.properties.Ip);  
                        return a;  
                    }, []);  

                      const message = props.join(', ');  
                      console.log(message);  
                  });  
            }  
            else  
            {  
                console.log(properties.Ip);  
            }...

The logs illustrate old-good bubble layer shows ip 51, but it is missing in console logs.
The test data attached.

Expected: No discrepancies between bubble and HtmlMarkerLayer.
Actual: Data points are missing, and appear only on super-close zoom.

205525-datajson.txt

Nikolay Mitikov 6 Reputation points

2022-05-25T15:29:50.85+00:00

Opened on github as well: https://github.com/Azure-Samples/azure-maps-html-marker-layer/issues/6
AshokPeddakotla-MSFT 35,971 Reputation points Moderator

2022-06-30T02:27:02.663+00:00

@Nikolay Mitikov If below suggestions answers your query, do click Accept Answer and Up-Vote for the same. And, if you have any further query do let us know.

2 answers

Your answer

Nikolay Mitikov 6 Reputation points

2022-05-25T15:29:50.85+00:00

Opened on github as well: https://github.com/Azure-Samples/azure-maps-html-marker-layer/issues/6
AshokPeddakotla-MSFT 35,971 Reputation points Moderator

2022-06-30T02:27:02.663+00:00

@Nikolay Mitikov If below suggestions answers your query, do click Accept Answer and Up-Vote for the same. And, if you have any further query do let us know.

Answer 1

rbrundritt 20,836 Microsoft Employee Moderator

Where did you get the html marker JavaScript file from? I just noticed that the Azure Maps sample site appears to be using an older version that is buggy, while the files in the dist folder of the HTML Marker module project are more up to date. I suspect this is the issue as I'm seeing different less markers when using the version from the sample site.

rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2022-05-26T16:22:13.827+00:00

Note that the min file should be closer to 11kb, not 9kb.
António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2022-06-03T10:58:36.28+00:00
Hello @Nikolay Mitikov ,

Please share with us if you have any other questions related with your original post. Otherwise could you go ahead and mark the above as answer?

Thank you so much.

Remember:

Please accept an answer if correct. Original posters help the community find answers faster by identifying the correct answer. Here is how.

Answer 2

Nikolay Mitikov 6

Hi @rbrundritt , thanks for the hint, indeed pulling later version from dist folder made things slightly better.

However, still a portion of data is lost, like point 14, please refer to attached log:
A) Initial load is over, no point 14; I print "render over, no point 14" into console
B) I zoom in and observe point 14 to appear in German cluster

Expected - it is processed on initial load at once.
Actual - Missed on initial load.

215688-point-14-is-lost.log

Regards,
Nik

rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2022-06-28T16:23:30.543+00:00

Are you seeing this when zoomed out a lot (i.e. there is more than one "world" visible on the map, or the anti-Merdian is in view (-180/180 longitude). If so, then the likely cause of the issue is that HTML markers are only rendered on a single world, while other native layers are repeated across globes. As such, it's possible that the odd marker will be slightly out of view of the main world, but in view in another world.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2022-06-28T17:26:27.687+00:00

After further testing, the above is very unlikely to be the issue as the map actually does render the required markers in view in that situation.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2022-06-28T17:30:51.31+00:00
Think I found a possible issue in your analyzing code, the getClusterLeaves function returns the first 10 leaves by default. Looking at your log where the issue occurs, there are two clusters that have ten leaves listed, thus there is a good chance this is the issue. This function has the following signiture getClusterLeaves(clusterId: number, limit: number, offset: number). You can step through groups of leaves, or set the limit to Infinity, and it will return all leaves. So, try modifying your call to getClusterLeaves to the following:

datasource.getClusterLeaves(properties.cluster_id).then(leafs => { const props = leafs.reduce((a, v) => { const { data } = v; a.push(data.properties.Ip); return a; }, []); const message = props.join(', '); console.log(message); }, Infinity);
Nikolay Mitikov 6 Reputation points

2022-06-29T07:51:12.39+00:00

Thanks, your suggestion in github issue was right, by default we get only 10 points, so increasing limit had proven to show everything <3

Share via

HtmlMarkerLayer loses data points on clustering

2 answers

Your answer