CanvasMarker - HowTo about angular-maps HOT 7 CLOSED

Sorry, for the late response. Yes, I'll put on on plunker the next days or so... But it boils down to setting your icon info on the marker like so:

<x-map-marker                             
   [Latitude]="..."
   [Longitude]="..."
   [Title]="...."
   [IconInfo]="{
      id: "someid"
      markerType: _markerTypeId.CanvasMarker,
      size: { width: 100, height: 100 },
      points: [
         { x: x1, y: y1},
         { x: x2, y: y2},
         { x:  x3, y: y3},
         { x: x4, y: y4},
      ]
      markerOffsetRatio: { x: 0.5, y: 0.5 }           
   }"
   (MarkerClick)="...">
</x-map-marker>

with canvas based markers, you need to supply the desired size of your marker in pixels (type ISize) and the points to draw on the canvas (an array of IPoints). Both of these are part of the IMarkerIconInfo you attach to the IconInfo property of the marker (IMarkerIconInfo.size and IMarkerIconInfo.points respectively).

The canvas icon will be drawn on the canvas by iterating over the IPoints in IMarkerIconInfo.points and drawing a line from one point to the next. So the order of the points does matter. The start point of the path is determined by IMarkerIconInfo.drawingOffset. If that is not present, the path starts at {0, 0}. You can also specify IMarkerIconInfo.rotation if you want to rotate you marker on the canvas. Depending in where the sharp point of your marker is, you can use IMarkerIconInfo.markerOffsetRatio to shift the marker vertically or horizontally by a percentage of its size, so as to align the sharp point with the actual geo coordinate of the map. The might require some tweaking, but generally, you want to make sure you marker does not drift when you zoom in/out.

Generally, when I do canvas icons, I start with some graph paper to draw out the icon i want to create. That will give me the succession of points.

You can try it out with the following, which should give you a little red rotated arrow like marker:

const iconInfo: IMarkerIconInfo = {
     markerType: MarkerTypeId.CanvasMarker,
     rotation: 45,
     drawingOffset: { x: 24, y: 0 },
     points: [
       { x: 10, y: 40 },
       { x: 24, y: 30 },
       { x: 38, y: 40 },
       { x: 24, y: 0 }
     ],
     color: '#f00',
     size: { width: 48, height: 48 }
};

from angular-maps.

from angular-maps.

Thanks for closing this issue but how about some new samples :)

We really need one that will show how to use a callback for scaledimagemarker and I guess it will be same for the rest

from angular-maps.

Yes, will put one out there, over the next few days. You are correct, all the callback based ones work the same way. The need for the callback is rooted in the fact that those methods use html elements to do the actual work (like an image element) which effectively work asynchronously.

Generally, the principle is to pass a callback in IMarkerIconInfo. This call back is called once the actual marker creation is complete with two parameters: a string containing the icon data uri and the IMarkerIconInfo populated with the actual icon size (in IMarkerIconInfo.size).

For markers created that way, they will be initially created with an empty pushpin (as those methods return an empty string). Therefore, in the callback the pushpin will need to be updated with the the actual marker data passed in... I guess it'd be nicer if I would incorporate this natively in the CreateMarker method of the MapService....

from angular-maps.

@emVdovin : re the scaledimagemarker... I was in the process of putting an example together, but doing so it occurred to me that this is unnecessarily convoluted (all the callback markers really). So I refactored to make the callback execution internal. As a result, the callback markers will work the same way as the other markers. You can checkout the changes in the callback-markers branch. I validated the functionality with Bing, but need to do some more testing in Google. Also, there are some pending pull requests I need to process first. I think I'll have this stuff merged into the main branch by the end of the week and published.

from angular-maps.

from angular-maps.

@emVdovin: I merged the marker changes and published in version 0.5.4, I added some samples for markers as well. Please see the sample page in the wiki: https://github.com/infusion-code/angular-maps/wiki/Samples.

from angular-maps.