leaflet-routing.ts

import L from 'leaflet';                                                                                                                                                                                                                       
import 'leaflet-routing-machine';                                                                                                                                                                                                              
import data from '../../data.json';                                                                                                                                                                                                            
                                                                                                                                                                                                                                               
const tileLayerUrl = `https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png`;                                                                                                                                           
const attribution = `Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,                                                                                                                                  
                    <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>`                                                                                                                                                    
                                                                                                                                                                                                                                               
const map = L.map('map', {                                                                                                                                                                                                                     
    center: [ 53.821798, -1.344509 ],                                                                                                                                                                                                          
    zoom: 13                                                                                                                                                                                                                                   
});                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                               
// Add the map tiles                                                                                                                                                                                                                           
L.tileLayer(tileLayerUrl, {                                                                                                                                                                                                                    
    maxZoom: 18,                                                                                                                                                                                                                               
    attribution,                                                                                                                                                                                                                               
    id: 'streets'                                                                                                                                                                                                                              
}).addTo(map);                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                               
const points = [                                                                                                                                                                                                                               
    L.latLng(...data.location),                                                                                                                                                                                                                
    ...data.deliveries.map(d => L.latLng(...d.location)),                                                                                                                                                                                      
    L.latLng(...data.location)                                                                                                                                                                                                                 
];                                                                                                                                                                                                                                             
const routing = L.Routing.control({                                                                                                                                                                                                            
    waypoints: points,                                                                                                                                                                                                                         
    lineOptions: { styles: [{color: '#666'}]}                                                                                                                                                                                                  
                                                                                                                                                                                                                                               
});                                                                                                                                                                                                                                            
routing.addTo(map);                                                                                                                                                                                                                            
routing.hide();                                                                                                                                                                                                                                
                                                                                                                                                                                                                                               
// Add a marker to the map                                                                                                                                                                                                                     
const icon = L.icon({ iconUrl: './images/location.png', iconAnchor: [32, 16] });                                                                                                                                                               
L.marker([53.821798, -1.344509], { icon }).addTo(map);

leaflet.ts

import L from 'leaflet';                                                                                                                                                                                                                       
                                                                                                                                                                                                                                               
const tileLayerUrl = `https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png`;                                                                                                                                           
                                                                                                                                                                                                                                               
const map = L.map('map').setView([53.821798, -1.344509], 13);                                                                                                                                                                                  
L.tileLayer(tileLayerUrl, {                                                                                                                                                                                                                    
    maxZoom: 18,                                                                                                                                                                                                                               
    attribution: `Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,                                                                                                                                     
            <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>`,                                                                                                                                                           
    id: 'streets',                                                                                                                                                                                                                             
}).addTo(map);                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                               
const icon = L.icon({ iconUrl: './images/location.png' });                                                                                                                                                                                     
L.marker([53.821798, -1.344509], { icon }).addTo(map);