https://playlistretreat.com/assets/js/leaflet-scripts.js

1let locationLatLng = [30.415075, -86.658633];
2let zoom = 14;
3let routingMapTile = 'https://tile.openstreetmap.de/{z}/{x}/{y}.png?z={z}&x={x}&y={y}';
4let popupContent = '<div class="map-popup-content"><h3>Basement</h3><p>135W, 46nd Street, New York</p><a id="mapDirectionBtn" href="#" class="btn btn-primary btn-sm d-flex align-items-center justify-content-center custom-roboto gap-10 btn-map-direction" type="button" data-bs-toggle="modal" data-bs-target="#RoutingMapModal">Get Direction <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg></a></div>';
5let markerIcon = L.divIcon({
6    html: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>',
7    iconSize: [40, 40],
8    //iconAnchor: [150, 280],
9    popupAnchor: [-10, -30],
10    className: 'eventiva-marker-icon'
11});
12
13let waypointCurrentIcon = L.divIcon({
14  html: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-crosshair2" viewBox="0 0 16 16"><path d="M8 0a.5.5 0 0 1 .5.5v.518A7.001 7.001 0 0 1 14.982 7.5h.518a.5.5 0 0 1 0 1h-.518A7.001 7.001 0 0 1 8.5 14.982v.518a.5.5 0 0 1-1 0v-.518A7.001 7.001 0 0 1 1.018 8.5H.5a.5.5 0 0 1 0-1h.518A7.001 7.001 0 0 1 7.5 1.018V.5A.5.5 0 0 1 8 0Zm-.5 2.02A6.001 6.001 0 0 0 2.02 7.5h1.005A5.002 5.002 0 0 1 7.5 3.025V2.02Zm1 1.005A5.002 5.002 0 0 1 12.975 7.5h1.005A6.001 6.001 0 0 0 8.5 2.02v1.005ZM12.975 8.5A5.002 5.002 0 0 1 8.5 12.975v1.005a6.002 6.002 0 0 0 5.48-5.48h-1.005ZM7.5 12.975A5.002 5.002 0 0 1 3.025 8.5H2.02a6.001 6.001 0 0 0 5.48 5.48v-1.005ZM10 8a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"/></svg>',
15  iconSize: [30, 30],
16  popupAnchor: [0, 0],
17  className: 'eventiva-marker-icon eventiva-current-marker-icon'
18});
19
20let waypointDestinationIcon = L.divIcon({
21  html: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>',
22  iconSize: [30, 30],
23  popupAnchor: [0, 0],
24  className: 'eventiva-marker-icon eventiva-destination-marker-icon'
25});
26
27let quadtreeOpened = false;
28
29//routin map
30var routingMap;
31
32
33//get current location latlng
34function getCurrentLocationLatLng(callback) {
35    // Check if geolocation is supported by the browser
36    if ("geolocation" in navigator) {
37      
38      navigator.geolocation.getCurrentPosition(function (position) {
39        // Get the latitude and longitude from the position object
40        const latitude = position.coords.latitude;
41        const longitude = position.coords.longitude;
42  
43        // Create an array with latitude and longitude
44        const locationArray = [latitude, longitude];
45        
46        // Call the provided callback function with the location array
47        callback(locationArray);
48      }, function (error) {
49        // Handle errors, if any
50        switch(error.code) {
51          case error.PERMISSION_DENIED:
52            console.error("User denied the request for Geolocation.");
53            break;
54          case error.POSITION_UNAVAILABLE:
55            console.error("Location information is unavailable.");
56            break;
57          case error.TIMEOUT:
58            console.error("The request to get user location timed out.");
59            break;
60          case error.UNKNOWN_ERROR:
61            console.error("An unknown error occurred.");
62            break;
63        }
64      });
65    } else {
66      console.error("Geolocation is not supported by this browser.");
67    }
68}
69
70function display_routing(){
71    getCurrentLocationLatLng(function(locationArray) {
72        var userLatLng = L.latLng(locationArray[0], locationArray[1]);        
73        var destinationLatLng = L.latLng(locationLatLng[0], locationLatLng[1]);
74        
75        var waypoints = [
76          userLatLng,
77          destinationLatLng
78        ];
79
80        //routing
81        if(!quadtreeOpened){
82            quadtreeOpened = true;
83            L.Routing.control({
84                waypoints: waypoints,
85                routeWhileDragging: true,
86                collapsible: true
87            }).addTo(routingMap);
88

89            // Add custom markers for waypoints
90            waypoints.forEach(function (waypoint, index) {
91              var marker = L.marker(waypoint, {
92                  icon: (index === 0) ? waypointCurrentIcon : waypointDestinationIcon
93              }).addTo(routingMap);
94
95              // You can also add a popup or tooltip to the markers if needed
96              marker.bindPopup("Waypoint " + (index + 1));
97            });
98        }
99
100        // Pan the map to show all markers
101        let bounds = L.latLngBounds([userLatLng].concat(destinationLatLng));
102        routingMap.fitBounds(bounds);
103
104    });
105}
106
107const mapModal = document.getElementById('RoutingMapModal');
108if (mapModal) {
109  mapModal.addEventListener('shown.bs.modal', event => {
110    //map inside modal (routing map)
111    routingMap = L.map('RoutingMap').setView(locationLatLng, zoom);
112
113    L.tileLayer(routingMapTile, {
114        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">Eventiva</a> contributors'
115    }).addTo(routingMap);
116
117    display_routing();
118  });
119}