plan: added trip to planner so we can plan multiple possibilities and

map to list view using leaflet

1 files changed, 18 insertions, 2 deletions

diff --git a/app/planner/templates/planner/list.html b/app/planner/templates/planner/list.html
index 8575d4a..12b72a3 100644
--- a/app/planner/templates/planner/list.html
+++ b/app/planner/templates/planner/list.html
@@ -16,7 +16,23 @@
             {% if object.has_electric %}<li class="water">electric</li>{% endif %}
     </article>{% endfor %}
     </div>
-<div class="map">
-    <iframe src="https://www.google.com/maps" width="100%" height="90%" frameborder="0" style="border:0" allowfullscreen></iframe>
+<div id="map">
 </div>
     {% endblock %}
+
+    {% block js %}
+ <link rel="stylesheet" src="/media/js/leaflet-1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" />
+<script src="/media/js/leaflet-1.7.1/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="></script>
+    <script>
+// initialize the map on the "map" div with a given center and zoom
+var map = new L.Map('map', {
+  center: new L.LatLng(51.46, -0.205),
+  zoom: 15
+});
+// create a new tile layer
+var tileUrl = 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=c9a9f0c5edfd4ce2948f49b51f533ad2',
+layer = new L.TileLayer(tileUrl, {maxZoom: 18});
+// add the layer to the map
+map.addLayer(layer);
+</script>
+{% endblock %}