interactive compare map (not working)

rowers/interactiveplots.py

@@ -2047,6 +2047,145 @@ def leaflet_chart(lat,lon,name=""):
 
 
 
+    return script,div
+
+def leaflet_chart_compare(latlondf,name=""):
+    if lat.empty or lon.empty:
+        return [0,"invalid coordinate data"]
+
+
+    # Throw out 0,0
+    df = pd.DataFrame({
+        'lat':lat,
+        'lon':lon
+        })
+
+    df = df.replace(0,np.nan)
+    df = df.loc[(df!=0).any(axis=1)]
+    df.fillna(method='bfill',axis=0,inplace=True)
+    df.fillna(method='ffill',axis=0,inplace=True)
+    lat = df['lat']
+    lon = df['lon']
+    if lat.empty or lon.empty:
+        return [0,"invalid coordinate data"]
+
+    latmean = lat.mean()
+    lonmean = lon.mean()
+    latbegin = lat[lat.index[0]]
+    longbegin = lon[lon.index[0]]
+    latend = lat[lat.index[-1]]
+    longend = lon[lon.index[-1]]
+
+    coordinates = zip(lat,lon)
+
+    scoordinates = "["
+
+    for x,y in coordinates:
+        scoordinates += """[{x},{y}],
+        """.format(
+            x=x,
+            y=y
+            )
+
+    scoordinates += "]"
+
+    script = """
+    <script>
+
+    var streets = L.tileLayer(
+    'https://api.mapbox.com/styles/v1/{{id}}/tiles/{{z}}/{{x}}/{{y}}?access_token={{accessToken}}', {{
+    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
+    tileSize: 512,
+    maxZoom: 18,
+    zoomOffset: -1,
+    id: 'mapbox/streets-v11',
+    accessToken: 'pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA'
+}}
+    ),
+
+
+    satellite = L.tileLayer(
+    'https://api.mapbox.com/styles/v1/{{id}}/tiles/{{z}}/{{x}}/{{y}}?access_token={{accessToken}}', {{
+    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
+    tileSize: 512,
+    maxZoom: 18,
+    zoomOffset: -1,
+    id: 'mapbox/satellite-v9',
+    accessToken: 'pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA'
+}}
+    ),
+
+    outdoors = L.tileLayer(
+    'https://api.mapbox.com/styles/v1/{{id}}/tiles/{{z}}/{{x}}/{{y}}?access_token={{accessToken}}', {{
+    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
+    tileSize: 512,
+    maxZoom: 18,
+    zoomOffset: -1,
+    id: 'mapbox/outdoors-v11',
+    accessToken: 'pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA'
+}}
+    );
+
+
+
+    var mymap = L.map('map_canvas', {{
+              center: [{latmean}, {lonmean}],
+              zoom: 13,
+              layers: [streets, satellite]
+              }}).setView([{latmean},{lonmean}], 13);
+
+    var navionics = new JNC.Leaflet.NavionicsOverlay({{
+         navKey: 'Navionics_webapi_03205',
+         chartType: JNC.NAVIONICS_CHARTS.NAUTICAL,
+         isTransparent: true,
+         zIndex: 1
+    }});
+
+
+   var osmUrl2='http://tiles.openseamap.org/seamark/{{z}}/{{x}}/{{y}}.png';
+   var osmUrl='http://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png';
+
+
+    //create two TileLayer
+    var nautical=new L.TileLayer(osmUrl,{{
+             maxZoom:18}});
+
+
+    L.control.layers({{
+        "Streets": streets,
+        "Satellite": satellite,
+        "Outdoors": outdoors,
+        "Nautical": nautical,
+    }},{{
+        "Navionics":navionics,
+    }}).addTo(mymap);
+
+    var marker = L.marker([{latbegin}, {longbegin}]).addTo(mymap);
+    marker.bindPopup("<b>Start</b>");
+    var emarker = new L.marker([{latend}, {longend}]).addTo(mymap);
+    emarker.bindPopup("<b>End</b>");
+
+    var latlongs = {scoordinates}
+    var polyline = L.polyline(latlongs, {{color:'red'}}).addTo(mymap)
+    mymap.fitBounds(polyline.getBounds())
+
+    </script>
+      """.format(
+          latmean=latmean,
+          lonmean=lonmean,
+          latbegin = latbegin,
+          latend=latend,
+          longbegin=longbegin,
+          longend=longend,
+          scoordinates=scoordinates,
+          )
+
+    div = """
+    <div id="map_canvas" style="width: 100%; height: 100%; min-height: 100vh"><p>&nbsp;</p></div>
+    """
+
+
+
     return script,div
 
 def leaflet_chart2(lat,lon,name=""):