Changing rotation for IMarkerIconInfo does not update marker's rotation. about angular-maps HOT 11 CLOSED

Could you please provide some more detail? Please explain what you are trying to accomplish and if possible provide a plunk or code sample.

from angular-maps.

This is my markers.

<x-map-marker *ngFor="let m of markers"
            [Latitude]="m.latitude" 
            [Longitude]="m.longitude" 
            [IconInfo]="m.iconInfo"
            > 
            <x-info-box [DisableAutoPan]="true" [Title]="m.title" [Description]="m.info">
                <x-info-box-action [Label]="'Click Me'" (ActionClicked)="_click()"></x-info-box-action>
            </x-info-box>   
        </x-map-marker>

And markers type definition

export interface IMarker
{
    id: string;
    latitude: number;
    longitude: number;
    title: string;
    info: string;
    data: any;

    iconInfo: IMarkerIconInfo;
}

Update marker's latitude/longitude works, the marker on map got updated.

But when I update "iconInfo.rotation", the marker's rotation doesn't get updated. I have to create a new IMarkerIconInfo with the new rotation value to replace iconInfo, then it works.

Thanks!

from angular-maps.

Ah yes, I see. This is not supported at this time by simply updating the rotation value. The reason for this is that creation of rotated markers is expensive (we are creating a canvas, rotating it, rendering the icon into the canvas and then convert the canvas into a data uri.

How many markers and what frequency of updates to the rotation are you looking at? If it is updating only every few seconds on a small number of markers you can achieve a rotation by updating the marker with new icon info.

from angular-maps.

Yes, it's what I thought.
We had a project to work with canvas marks on map, and it consumes resources. We have hundreds of realtime targets to move on map.

But thank you very much for your response! Your project here helps.

from angular-maps.

Well, a hundreds is not terrible. Individual markers perform well into the low thousands. If each marker would update every 100ms, would that be sufficient? Are you streaming the updated data in via sockets or are you polling for new data?

from angular-maps.

Through sockets. But we don't need refresh that quick. :) As long as it could be updated through databind.

from angular-maps.

let me see whether I can put an example together....

from angular-maps.

@chuyelong : so check this out... http://plnkr.co/edit/E52n0k?p=preview This rotates the marker by 5 degrees every 200 ms. It looks pretty smooth. CPU and GPU usage seems moderate, but you'd have to see whether this scales up to 100s of markers. I think it should,

Note that there is a bug (apparently) in the logic to create the rotated image, I got to look into that (or you can, and submit a pull request ;)). The code for this is in src/models/marker.ts, method CreateRotatedImageMarker. it is apparently incorrectly offsetting the canvas...

from angular-maps.

I did work on this canvas rotation issue before. But sorry, I'm so busy these days. Maybe later, will check to see if I can find the solution I had before.

Thanks!

Yelong

from angular-maps.

Found the issue on the rotation. I should have that corrected soon...

from angular-maps.

Corrected the rotation bug. http://plnkr.co/edit/E52n0k?p=preview now correctly rotates the marker... Hope that helps.

from angular-maps.