leaflet maps working

rowers/templates/workout_form.html

@@ -225,36 +225,12 @@
       #map_canvas {position: relative; top: 0; right: 0; bottom: 0; left: 0;}
       
     </style>
-    <div id="map_canvas" style="width: 100%; height: 400px;"><p>&nbsp;</p></div>
+
+
+    {{ mapdiv|safe }}
+
     
-     <script>
-      
-      var mymap = L.map('map_canvas').setView([{{ latmean }}, {{ longmean }}], 13);
-      
-      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA', {
-		maxZoom: 18,
-		id: 'mapbox.streets'
-      }).addTo(mymap);
-
-      var marker = L.marker([{{ latbegin }}, {{ longbegin }}]).addTo(mymap);
-      marker.bindPopup("<b>Start</b>");
-      var emarker = L.marker([{{ latend }}, {{ longend }}]).addTo(mymap);
-      emarker.bindPopup("<b>End</b>");
-      var coordinates = {{ coordinates|safe }};
-
-
-      var latlongs = [];
-      
-      coordinates.forEach(function(entry){
-        var xy = [entry.x,entry,y];
-        latlongs.push(xy);
-      });
-
-      var line = L.PolyLine(latlongs, {color: 'blue'}).addTo(mymap);      
-      mymap.fitBounds(line.getBounds());
-
-    </script>
-   
+    {{ mapscript|safe }}
 
     </div>
   </div>