I currently have this code here where I want to add custom icon that I will design.

plotRoute(): void {
        if (this.selectedOrder) {
            this.primengTableHelper.showLoadingIndicator();

            this._itsHttpService.GetOrder(this.selectedOrder.orderId).subscribe({
                next: (results) => {
                    const pickup = results['stops'].find((stop: any) => stop.isPickup);
                    const dropOff = results['stops'].find((stop: any) => stop.isDropOff);

                    if(!pickup && !dropOff && !this.mapAdmin){
                        this.primengTableHelper.hideLoadingIndicator();
                        return;
                    }

                    if(this.routingControl){
                        this.mapAdmin.removeControl(this.routingControl)
                    }

                    
                        this.routingControl = L.Routing.control({
                            waypoints: [
                                L.latLng(pickup.location.latitude, pickup.location.longitude),
                                L.latLng(dropOff.location.latitude, dropOff.location.longitude),
                            ],
                            routeWhileDragging: true,
                            createMarker: (i: number, waypoint: L.Routing.Waypoint, n: number) => {

                            }
                        }).addTo(this.mapAdmin);
                    
                    
                    this.primengTableHelper.hideLoadingIndicator();
                },
                error: (err) => {
                    console.error('Failed to load order details:', err);
                    this.notify.error(this.l('FailedToLoadOrderDetails'));
                    this.primengTableHelper.hideLoadingIndicator();
                },
            });
        }
    }

    createIcon(label: string): L.DivIcon {
        return L.divIcon({
            className: 'custom-marker',
            html: `<div style="background-color: black; color: white; padding: 5px; border-radius: 50%;">${label}</div>`,
            iconSize: [20, 20],
        });
    }

but I get the error: Object literal may only specify known properties, and 'createMarker' does not exist in type 'RoutingControlOptions'.ts(2353)

is there another solution I can use to go about this?

I currently have this code here where I want to add custom icon that I will design.

plotRoute(): void {
        if (this.selectedOrder) {
            this.primengTableHelper.showLoadingIndicator();

            this._itsHttpService.GetOrder(this.selectedOrder.orderId).subscribe({
                next: (results) => {
                    const pickup = results['stops'].find((stop: any) => stop.isPickup);
                    const dropOff = results['stops'].find((stop: any) => stop.isDropOff);

                    if(!pickup && !dropOff && !this.mapAdmin){
                        this.primengTableHelper.hideLoadingIndicator();
                        return;
                    }

                    if(this.routingControl){
                        this.mapAdmin.removeControl(this.routingControl)
                    }

                    
                        this.routingControl = L.Routing.control({
                            waypoints: [
                                L.latLng(pickup.location.latitude, pickup.location.longitude),
                                L.latLng(dropOff.location.latitude, dropOff.location.longitude),
                            ],
                            routeWhileDragging: true,
                            createMarker: (i: number, waypoint: L.Routing.Waypoint, n: number) => {

                            }
                        }).addTo(this.mapAdmin);
                    
                    
                    this.primengTableHelper.hideLoadingIndicator();
                },
                error: (err) => {
                    console.error('Failed to load order details:', err);
                    this.notify.error(this.l('FailedToLoadOrderDetails'));
                    this.primengTableHelper.hideLoadingIndicator();
                },
            });
        }
    }

    createIcon(label: string): L.DivIcon {
        return L.divIcon({
            className: 'custom-marker',
            html: `<div style="background-color: black; color: white; padding: 5px; border-radius: 50%;">${label}</div>`,
            iconSize: [20, 20],
        });
    }

but I get the error: Object literal may only specify known properties, and 'createMarker' does not exist in type 'RoutingControlOptions'.ts(2353)

is there another solution I can use to go about this?

• angular
• typescript
• leaflet
• leaflet-routing-machine

1 Answer 1

I would recommend you to use basic marker and refactor the function in order to instantiate it with L.marker :

this.routingControl = L.Routing.control({
    waypoints: [
        L.latLng(pickup.location.latitude, pickup.location.longitude),
        L.latLng(dropOff.location.latitude, dropOff.location.longitude),
    ],
    routeWhileDragging: true,
    createMarker: (i: number, waypoint: L.Routing.Waypoint, n: number) => {
        return L.marker(waypoint.latLng, {
            icon: this.createIcon(i.toString()), // Custom icon if needed
        });
    }
}).addTo(this.mapAdmin);

You can check this documentation to prevent any syntax error : https://leafletjs/reference.html#marker