Updated base map in mapping to render more geographic features with ArcGIS World Imagery and reduced margins to increase size of graph components, updated tests to look for scattermapbox instead of scattergeo.

Author: egrace479

components/divs.py

@@ -3,7 +3,7 @@
 # Fixed styles and sorting options
 H1_STYLE = {'textAlign': 'center', 'color': 'MidnightBlue'}
 H4_STYLE = {'color': 'MidnightBlue', 'margin-bottom' : 10}
-HALF_DIV_STYLE = {'width': '48%', 'display': 'inline-block'}
+HALF_DIV_STYLE = {'height': '48%', 'width': '48%', 'display': 'inline-block'}
 QUARTER_DIV_STYLE = {'width': '24%', 'display': 'inline-block'}
 BUTTON_STYLE = {'color': 'MidnightBlue', 
                 'background-color': 'BlanchedAlmond', 
@@ -267,7 +267,10 @@ def get_main_div(hist_div, img_div):
 
         # Graphs - Distribution (histogram or map), then pie chart
         html.Div([
-            dcc.Graph(id = 'dist-plot')], style = HALF_DIV_STYLE),
+            dcc.Loading(id = 'dist-plot-loading',
+                            type = "circle",
+                            color = 'DarkMagenta',
+                            children = dcc.Graph(id = 'dist-plot'))], style = HALF_DIV_STYLE),
         html.Div([
             dcc.Graph(id = 'pie-plot')], style = HALF_DIV_STYLE),
 

components/graphs.py

@@ -26,7 +26,14 @@ def make_hist_plot(df, x_var, color_by, sort_by):
                         color = color_by,
                         color_discrete_sequence = px.colors.qualitative.Bold).update_xaxes(categoryorder = sort_by)
 
-    fig.update_layout(title = {'text': f'Distribution of {x_var} Colored by {color_by}'})
+    fig.update_layout(title = {'text': f'Distribution of {x_var} Colored by {color_by}'},
+                      font = {'size': 16},
+                      margin = {
+                            'l': 30,
+                            'r': 20,
+                            't': 35,
+                            'b': 20
+                        })
 
     return fig
 
@@ -46,23 +53,16 @@ def make_map(df, color_by):
     df = df.copy()
     # only use entries that have valid lat & lon for mapping
     df = df.loc[df['lat-lon'].str.contains('unknown') == False]
-    fig = px.scatter_geo(df,
-                        lat = df.lat,
-                        lon = df.lon,
-                        projection = "natural earth",
+    fig = px.scatter_mapbox(df,
+                        lat = "lat",
+                        lon = "lon",
+                        #projection = "natural earth",
                         custom_data = ["Samples_at_locality", "Species_at_locality", "Subspecies_at_locality"],
-                        size = df.Samples_at_locality,
+                        size = "Samples_at_locality",
                         color = color_by,
                         color_discrete_sequence = px.colors.qualitative.Bold,
                         title = "Distribution of Samples")
 
-    fig.update_geos(fitbounds = "locations",
-                    showcountries = True, countrycolor = "Grey",
-                    showrivers = True,
-                    showlakes = True,
-                    showland = True, landcolor = "wheat",
-                    showocean = True, oceancolor = "LightBlue")
-    
     fig.update_traces(hovertemplate = 
                         "Latitude: %{lat}<br>"+
                         "Longitude: %{lon}<br>" +
@@ -71,6 +71,25 @@ def make_map(df, color_by):
                         "Subspecies at lat/lon: %{customdata[2]}<br>"
     )
 
+    fig.update_layout(
+        font = {'size': 16},
+        margin = {
+            'l': 20,
+            'r': 20,
+            't': 35,
+            'b': 20
+        },
+        mapbox_style = "white-bg",
+        mapbox_layers = [{
+            "below": "traces",
+            "sourcetype": "raster",
+            "sourceattribution": "Esri, Maxar, Earthstar Geographics, and the GIS User Community",
+            "source": ["https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"]
+            # Usage and Licensing (ArcGIS World Imagery): https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer
+            # Style: https://roblabs.com/xyz-raster-sources/styles/arcgis-world-imagery.json
+        }]
+    )
+
     return fig
 
 def make_pie_plot(df, var):
@@ -97,6 +116,13 @@ def make_pie_plot(df, var):
                  color_discrete_sequence = px.colors.qualitative.Bold)
         pie_fig.update_traces(textposition = 'inside', textinfo = 'percent+label')
 
-    pie_fig.update_layout(title = {'text': f'Percentage Breakdown of {var}'})
+    pie_fig.update_layout(title = {'text': f'Percentage Breakdown of {var}'},
+                          font = {'size': 16},
+                          margin = {
+                                'l': 20,
+                                'r': 20,
+                                't': 35,
+                                'b': 20
+                            })
 
     return pie_fig

tests/components/test_graphs.py

@@ -25,7 +25,7 @@ def test_make_map():
     # Map plot output
     output = make_map(processed_df, "Species")
     output_data = output['data', 0]
-    assert output_data.type == "scattergeo"
+    assert output_data.type == "scattermapbox"
     #test for uknowns in data and check it's proper type
     assert 'unknown' not in output_data['customdata']
 

tests/test_app_callbacks.py

@@ -34,7 +34,7 @@ def test_update_dist_plot_call():
 
     # Map plot output
     output2 = update_dist_plot('Species', 'Subspecies', 'alpha', "Show Histogram", jsonified_data)
-    assert output2['data', 0].type == "scattergeo"
+    assert output2['data', 0].type == "scattermapbox"
 
 
 def test_update_pie_plot():