loc: made walks display track on map

1 files changed, 69 insertions, 1 deletions

diff --git a/app/locations/templates/locations/track_detail.html b/app/locations/templates/locations/track_detail.html
index 6339852..df71d94 100644
--- a/app/locations/templates/locations/track_detail.html
+++ b/app/locations/templates/locations/track_detail.html
@@ -1,5 +1,7 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
+{% block extrahead %}
+{% endblock %}
 {%block bodyid%}class="detail"{%endblock%}								
 {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
 {% block primary %}
@@ -21,7 +23,7 @@
             </header>
 
             <div class="e-content entry-content post-body" itemprop="articleBody">
-            <img src="{{object.get_image_url}}" alt="{{object.title}} map"  />
+            <div id=map></div>
             <div class="-cover">
                 <dl class="book-metadata">
                     {% if object.distance %}<dt>Distance</dt>
@@ -74,4 +76,70 @@
         </nav>{%endwith%}{%endwith%}
         </div>
     </main>
+{{ object.gpx_file.raw_data|json_script:"track" }}
+{% endblock %}
+{% block js %}
+<script src="/media/js/leaflet-1.7.1/leaflet.js"></script>
+<script src="/media/js/gpx.min.js"></script>
+<script>
+var map = document.getElementById("map");
+map.style.height = "300px"
+map.style.width= "100%"
+var centerCoord = new L.LatLng({{object.lat}}, {{object.lon}});
+var zoom = 13;
+var themap = L.map('map', { scrollWheelZoom: "onFocus" }).setView(centerCoord, zoom);
+L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
+}).addTo(themap);
+map.style.height = "300px"
+map.style.width= "100%"
+var gpx = JSON.parse(document.getElementById('track').textContent);
+new L.GPX(gpx, {
+  async: true,
+  polyline_options: {
+    color: 'green',
+    opacity: 0.75,
+    weight: 2,
+    lineCap: 'round'
+  },
+  marker_options: {
+    startIconUrl: '',
+    endIconUrl: '',
+    shadowUrl: ''
+  }
+}).on('loaded', function(e) {
+  themap.fitBounds(e.target.getBounds());
+}).addTo(themap);
+get_distance_imp()
+</script>
 {% endblock %}
+{% comment %}
+<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
+<script src="/media/js/detail.min.js"></script>
+<script src="/media/js/GPXParser.js"></script>
+{{ object.gpx_file.raw_data|json_script:"track" }}
+<script>
+var gpx = new gpxParser(); //Create gpxParser Object
+var track = JSON.parse(document.getElementById('track').textContent);
+gpx.parse(track); //parse gpx file from string data
+var totalDistance = gpx.tracks[0].distance.total;
+var map = document.getElementById("map");
+map.style.height = "300px"
+map.style.width= "100%"
+var centerCoord = new L.LatLng({{object.lat}}, {{object.lon}});
+var zoom = 13;
+var themap = L.map('map', { scrollWheelZoom: "onFocus" }).setView(centerCoord, zoom);
+L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>'}).addTo(themap);
+
+
+function drawTrack(track) {
+    let coordinates = track.points.map(p => [p.lat.toFixed(5), p.lon.toFixed(5)]);
+    var polyline = L.polyline(coordinates, {weight: 6, color: 'darkred'});
+    console.log(polyline);
+    polyline.addTo(themap);
+    // zoom the map to the polyline
+    //themap.fitBounds(polyline.getBounds());
+}
+drawTrack(gpx.tracks[0]);
+</script>
+{% endcomment %}