angulartypescriptleafletngx-leaflet

leaflet Property-Routing-does-not-exist-on-type-typeof-import


I have made a post but not getting any responses. Im new to leaflet and dont know whats going on or why. I believe I added everything the documents say to add but I'm still getting the error.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

import L from 'leaflet';

ERROR TypeError: Cannot read property 'control' of undefined

My Code here:

var polylineRouteB = L.Routing.control({...});

Solution

  • In order your L.Routing class not to be undefined you need to get a reference to the map and use it there when map is loaded but before this step you need to configure angular.json to search your assets folder for the markers icons otherwise this issue arises.

    import { 
        latLng, 
        tileLayer, 
        Icon, icon, Marker
    } from 'leaflet';
    
    import 'leaflet';
    import 'leaflet-routing-machine';
    declare let L;
    ...
    
    // Override default Icons
    private defaultIcon: Icon = icon({
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png'
    });
    
    ngOnInit() {
        Marker.prototype.options.icon = this.defaultIcon;
    }
    
    onMapReady(map: L.Map) {
        L.Routing.control({
            waypoints: [
                L.latLng(57.74, 11.94),
                L.latLng(57.6792, 11.949)
            ],
            routeWhileDragging: true
        }).addTo(map);
    }
    

    Template

    <div style="height: 800px;"
        leaflet 
        [leafletOptions]="options"
        (leafletMapReady)="onMapReady($event)">
    </div>
    

    Demo

    Note also that his library does not permit unlimited requests to the server thus it returns frequently 429 HTTP responses.