❓ - icon image and icon title

[mstgnz]

Description

hello, first of all thanks for the package.

i need examples about icon image and icon content(title). can you help me.

public placemarkOptions: ymaps.IPlacemarkOptions = {}

// this is working.
this.placemarkOptions.iconColor = "red"

// this is not working
this.placemarkOptions.iconImageHref = "assets/img/incident.png"

<ya-map [center]="center" [options]="mapOptions">
    <ya-placemark [geometry]="center" [options]="placemarkOptions" (yadragend)="draggend($event)"></ya-placemark>
</ya-map>

I also want to use title and image for each icon in multiroute.

<ya-multiroute  [referencePoints]="markers"></ya-multiroute>

Can you share examples for these?

[ddubrava]

Hi!

To use the local image check this:

• https://stackblitz.com/edit/custom-placemark?file=src%2Fapp%2Fapp.component.ts

To customize a multiroute check this:

• https://yandex.com/dev/maps/jsbox/2.1/multiroute_view_options/ - example
• https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/multiRouter.MultiRoute#param-options - options

[mstgnz]

Thank you very much.

[ddubrava]

Thank you very much.

If you have any questions, feel free to ping me

[mstgnz]

Hi, @ddubrava I was able to define the icons with the links you gave, thank you very much, in the same document there were examples of icon content, hint content. I also made icon content definitions but they did not work.

<ya-map [center]="center" [options]="mapOptions">
    <ya-placemark [geometry]="center" [options]="placemarkOptions" (yadragend)="draggend($event)"></ya-placemark>
</ya-map>

this.placemarkOptions = {
      draggable: true,
      iconLayout: 'default#imageWithContent',
      iconImageHref: "assets/img/incident.png",
      iconImageSize: [35, 35],
      iconImageOffset: [-10, -10],
      // he doesn't see it from here.
      iconContent: "TEST",
      iconContentSize: [100, 50],
      iconContentOffset: [50, 50]
    }

[ddubrava]

You should define them in properties, not options. The library is just a wrapper, it takes your inputs and pass them to the API.

Check this

• https://stackblitz.com/edit/custom-placemark?file=src%2Fapp%2Fapp.component.ts
• https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Placemark#param-properties.

[mstgnz]

Thanks a lot, but how do we do the same in multiRoute objects. there is no multiRoute properties parameter.

I couldn't find an example of iconContent for multiRoute here

https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/multiRouter.MultiRoute#param-options

The code below is the running code.

<div class="container" style="width: 100%; height: 500px;">
  <ya-map [center]="center" [options]="mapOptions" [state]="{ controls: [] }">
      <ya-multiroute 
        [referencePoints]="markers"
        [options]="multirouteOptions"
      ></ya-multiroute>
  </ya-map>
</div>

public multirouteOptions: any = {}
ngOnInit(): void { 
    this.multirouteOptions = {
      wayPointStartIconLayout: "default#imageWithContent",
      wayPointStartIconImageHref: "assets/img/incident.png",
      wayPointStartIconImageSize: [30, 30],
      wayPointStartIconImageOffset: [-15, -15],
      wayPointFinishIconLayout: "default#imageWithContent",
      wayPointFinishIconImageHref: "assets/img/officeiconu.png",
      wayPointFinishIconImageSize: [30, 30],
      wayPointFinishIconImageOffset: [-15, -15]
    }
  }

[ddubrava]

In this example in customizeSecondPoint they access multiRoute.getWayPoints().get(1) and set iconContentLayout using yandexWayPoint.options.set. You can try to do the same thing.

To access multiRoute you need to use (ready) on your ya-multiroute to get the instance.

<ya-multiroute 
  [referencePoints]="markers"
  [options]="multirouteOptions"
  (ready)="onReady($event)"
></ya-multiroute>

onReady({ target }) {
  // do magic with the target, it's the instance
}

[ddubrava]

You can also pass a geometry.Point to reference points (see this). To create a geometry.Point you can use ymaps from a map ready event. And then you can create a point with your own options. Instead of modifying them in a multiroute.

[mstgnz]

<div class="container" style="width: 100%; height: 500px;">
  <ya-map [center]="center" [options]="mapOptions" [state]="{ controls: [] }">
      <ya-multiroute 
        [referencePoints]="markers"
        [options]="multirouteOptions"
        (ready)="onReady($event)"
      ></ya-multiroute>
  </ya-map>
</div>

onReady({ target }) {
    const yandexWayPoint = target.getWayPoints().get(1)
    yandexWayPoint.options.set({
        iconContentLayout: ymaps.templateLayoutFactory.createClass(
          '<span style="color: red;">TEST</span>'
        )
    })
}

result: undefined, i thing because

but, there is not problem here.

export class YandexLocationsComponent implements OnInit {

  @Input() locations: LocationInfo[] = []
  public center: number[] = []
  public markers: ymaps.IMultiRouteReferencePoint[] = []
  public mapOptions: ymaps.IMapOptions = {}
  public multirouteOptions: any = {}

problem is ymaps.templateLayoutFactory

[ddubrava]

I created an example, the first point is changed once you select two points. You can apply the same logic to your case.

https://stackblitz.com/edit/get-reference-points-via-route-panel-5me9gb

[mstgnz]

I got stuck in Angular typescript rules but that's okay, thank you for the solution and for taking the time to reply.