PruneCluster icon indicating copy to clipboard operation
PruneCluster copied to clipboard

Cluster not updating custom (rotationAngle & rotationOrigin) data fields in realtime

Open lkgamor opened this issue 3 years ago • 1 comments

Great library by the way. I absolutely love how it handles clustering.

So I'm using the library to simulate clustering of markers that are actual vehicle gps tracking data. I realized the library doesn't support marker rotation based on vehicle bearings so I added leaflet.rotatedMarker.js. This means I either had to override the PreapareLeafletMarker method or update the method directly in the library to include the new functions I needed ( i.e the setRotationAngle and the setRotationOrigin functions).

Now the issue is the positions of the vehicles get updated on the map but the rotationAngles do not get updated in realtime until I pan, zoom-in or zoom-out the map.

So are there any extra changes needed within the library to effect the realtime rotationAngle update much like how the position updates occur?

CODE SAMPLE

HTML <script th:src="@{/assets/js/vendor/leaflet/leaflet.rotatedMarker.js}"></script> <script th:src="@{/assets/js/vendor/prune/PruneCuster.js}"></script>

JS

PrepareLeafletMarker: function (marker, data, category) { if (data.rotationAngle) { marker.setRotationAngle(data.rotationAngle); } if (data.rotationOrigin) { marker.setRotationOrigin(data.rotationOrigin); } } markerAlreadyExists, getExistingMaker and validCoordinates functions have been omitted for brivity switch (markerAlreadyExists) { case true: const existingMarker = getExistingMaker(vehicleId);
switch (validCoordinates(existingMarker.position.lat, existingMarker.position.lng)) { case true: existingMarker.position.lat = VEHICLE_LATITUDE; existingMarker.position.lng = VEHICLE_LONGITUDE; existingMarker.data.rotationOrigin = 'center'; existingMarker.data.rotationAngle = VEHICLE_HEADING; pruneCluster.ProcessView(); break; case false: existingMarker.data.rotationOrigin = 'center'; existingMarker.data.rotationAngle = VEHICLE_HEADING; pruneCluster.ProcessView(); break; } break;case false: switch (validCoordinates(VEHICLE_LATITUDE, VEHICLE_LONGITUDE)) { case true:
const marker = new PruneCluster.Marker(VEHICLE_LATITUDE, VEHICLE_LONGITUDE, { rotationAngle: VEHICLE_HEADING, rotationOrigin: 'center' }); marker.data.forceIconRedraw = true; marker.data.id = vehicleId; markers.push(marker); pruneCluster.RegisterMarker(marker); break; } break;` #190

lkgamor avatar Oct 30 '20 10:10 lkgamor

same here

aybarska avatar Feb 10 '21 13:02 aybarska