From 1895ff209840cc33d89b4589a8f78b0d4af1cc51 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Sat, 12 Aug 2017 08:24:38 +0200
Subject: [PATCH] added outdoor, satellite, openseamap

---
 rowers/interactiveplots.py | 42 ++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/rowers/interactiveplots.py b/rowers/interactiveplots.py
index b605dec1..3bd79517 100644
--- a/rowers/interactiveplots.py
+++ b/rowers/interactiveplots.py
@@ -713,13 +713,44 @@ def leaflet_chart(lat,lon,name=""):
     script = """
     <script>
       
-    var mymap = L.map('map_canvas').setView([{latmean},{lonmean}], 13);
       
-    L.tileLayer('https://api.tiles.mapbox.com/v4/{{id}}/{{z}}/{{x}}/{{y}}.png?access_token=pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA', {{
+    var streets = 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);
+    }}),
 
+    satellite = L.tileLayer('https://api.tiles.mapbox.com/v4/{{id}}/{{z}}/{{x}}/{{y}}.png?access_token=pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA', {{
+		maxZoom: 18,
+		id: 'mapbox.satellite'
+    }}),
+
+    outdoors = L.tileLayer('https://api.tiles.mapbox.com/v4/{{id}}/{{z}}/{{x}}/{{y}}.png?access_token=pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA', {{
+		maxZoom: 18,
+		id: 'mapbox.outdoors'
+    }});
+
+    var mymap = L.map('map_canvas', {{
+              center: [{latmean}, {lonmean}],
+              zoom: 13, 
+              layers: [streets, satellite]
+              }}).setView([{latmean},{lonmean}], 13);
+
+   var osmUrl='http://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png';
+   var osmUrlcolor='http://{{s}}.tilexxxxx.com/watercolor/{{z}}/{{x}}/{{y}}.jpg';
+
+    //create two TileLayer
+    var nautical=new L.TileLayer(osmUrl,{{
+             maxZoom:18}});
+
+
+
+    L.control.layers({{
+        "Streets": streets,
+        "Satellite": satellite,
+        "Outdoors": outdoors,
+        "Nautical": nautical,
+    }}).addTo(mymap);
+ 
     var marker = L.marker([{latbegin}, {longbegin}]).addTo(mymap);
     marker.bindPopup("<b>Start</b>");
     var emarker = new L.marker([{latend}, {longend}]).addTo(mymap);
@@ -741,7 +772,10 @@ def leaflet_chart(lat,lon,name=""):
           )
 
     div = """
-    <div id="map_canvas" style="width: 100%; height: 400px;"><p>&nbsp;</p></div>"""
+    <div id="map_canvas" style="width: 100%; height: 400px;"><p>&nbsp;</p></div>
+    """
+
+
 
     return script,div