Closed mstgnz closed 7 months ago
Hi!
To use the local image check this:
To customize a multiroute check this:
Thank you very much.
Thank you very much.
If you have any questions, feel free to ping me
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]
}
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
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]
}
}
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
}
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.
<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
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
I got stuck in Angular typescript rules but that's okay, thank you for the solution and for taking the time to reply.
Description
hello, first of all thanks for the package.
i need examples about icon image and icon content(title). can you help me.
I also want to use title and image for each icon in
multiroute
.Can you share examples for these?