Multi color pin points. about angular-maps HOT 2 CLOSED

This can be easily accomplished in a number of ways. In order of ease and complexity descending, I would recommend the following approaches:

1. Define your various markers as an array of IMarkerIconInfo. In your x-map, use ngFor in conjunction with x-map-marker to create your markers. Bind the IconInfo property of the marker to a method called GetMarkerInfo(): IMarkerIconInfo or some such. Implement this method in your component class to return the appropriate IMarkerIconInfo from your array of IMarkerIconInfo. You can pass any iteration variables into that method to implement the logic to select the appropriate IMarkerIconInfo.

2. Define your various markers as an array of IMarkerIconInfo. Sort your markers into different arrays, one array for each color. Use a x-map-layer for each color and use an ngFor inside each layer with x-map-markers and the appropriate array for the color to render your markers. Each marker would use the appropriate positional element of your array of IMarkerIconInfo. The example at https://plnkr.co/XAokXU shows this approach.

3. Use x-map-maker-layer component (particularly if you have thousands of markers). It works a bit different and takes MarkerOptions as an input. This input expects an array of type IMarkerOptions (one for each marker), which in turn has an IMarkerIconInfo representing the icon for each marker. An example for this is at http://plnkr.co/bb8wu5 (you got to click to populate the markers).

Note that for all these, when you assemble your IMarkerIconInfo, make sure you set the id property of the IMarkerIconInfo. It is a string and you can make it whatever you want it to be, but is has to uniquely identify the marker image (so your red marker must have a different id from from green marker etc.). If you do not set this property, then for each marker, we will generate an entirely new image, which with a large number of markers is very costly. If you set the id, we will look up already created images that match that id, which is a lot more performant...

Happy coding.

from angular-maps.

Hi @thor-schueler I went with the second approach and it solved my problem.
This is exactly what i was looking for.

Thank you very much for you quick help. 👍

from angular-maps.