Added icons for GPX display

templates/sar_details.html

@@ -11,7 +11,7 @@
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
 
     <!-- Include leaflet-gpx plugin -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.1/gpx.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
 
     <style>
         #map {
@@ -40,7 +40,8 @@
                                         <p>Created at: {{ sar.SARCall.created }}</p>
                                         <p>Last updated: {{ sar.SARCall.updated }}</p>
                                     </div>
-                                    <p><strong>Coordination manager:</strong> {{ sar.SARCall.coordination_officer.full_name }}</p>
+                                    <p><strong>Coordination
+                                        manager:</strong> {{ sar.SARCall.coordination_officer.full_name }}</p>
                                     <p><strong>Search manager:</strong> {{ sar.SARCall.search_officer.full_name }}</p>
                                     <p>Status: {{ sar.SARStatus.name }}</p>
                                     {% if is_logged_in %}
@@ -157,7 +158,8 @@
 
         <!-- Add Comment Form -->
         {% if is_logged_in %}
-        <form action="{{ url_for('add_comment', sar_call_id=sar.SARCall.id) }}" method="post" enctype="multipart/form-data">
+            <form action="{{ url_for('add_comment', sar_call_id=sar.SARCall.id) }}" method="post"
+                  enctype="multipart/form-data">
                 <div class="form-group">
                     <label for="text">Comment:</label>
                     <textarea name="text" class="form-control"></textarea>
@@ -210,7 +212,14 @@
             fetch('/get_gpx/' + gpxId)
                 .then(response => response.text())
                 .then(gpxData => {
-                    new L.GPX(gpxData, {async: true}).on('loaded', function (e) {
+                    new L.GPX(gpxData, {
+                        async: true,
+                        marker_options: {
+                            startIconUrl: '/static/pin-icon-start.png',
+                            endIconUrl: '/static/pin-icon-end.png',
+                            shadowUrl: '/static/pin-shadow.png'
+                        }
+                    }).on('loaded', function (e) {
                         map.fitBounds(e.target.getBounds());
                     }).addTo(map);
                 })