PruneCluster
PruneCluster copied to clipboard
Cluster not updating custom (rotationAngle & rotationOrigin) data fields in realtime
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
same here