Draw and edit markers, polylines and polygons on a Leaflet map (#30)

* Added leaflet draw functionality

* Added svg-inline-loader

* Updated example

* Updated package-lock

* Added proptypes. Linting

* Linting

* Remove copied asset files. Remove svg loader. Replaced if else with switch statement

* Updated package.lock

* Linting

* Added polygon edit functionality

* Added missing key in map layer item list

* linting

* Update Dash prop on saved edit of polygon

* Added proptype for polygonCoords

* Renamed function

* Use index instead of item name in React key

* Replaced switch with if statement. changed a variable scope from var to let.

* Replace switch statement with if statement

* Remove debug log message

* Remove debug log messages

Author: HansKallekleiv

examples/example_layered_map.py

@@ -6,9 +6,11 @@
 from matplotlib import cm
 
 import dash
+from dash.dependencies import Input, Output
 import dash_html_components as html
 import webviz_subsurface_components
 
+
 def array_to_png(Z, shift=True, colormap=False):
     '''The layered map dash component takes in pictures as base64 data
     (or as a link to an existing hosted image). I.e. for containers wanting
@@ -106,23 +108,15 @@ def array_to_png(Z, shift=True, colormap=False):
             'data':
                 [
                     {
-                     'type': 'image',
-                     'url': map_data,
-                     'colormap': colormap,
-                     'unit': 'm',
-                     'minvalue': min_value,
-                     'maxvalue': max_value,
-                     'bounds': [[432205, 6475078],
-                                [437720, 6481113]]
+                        'type': 'image',
+                        'url': map_data,
+                        'colormap': colormap,
+                        'unit': 'm',
+                        'minvalue': min_value,
+                        'maxvalue': max_value,
+                        'bounds': [[432205, 6475078],
+                                   [437720, 6481113]]
                     },
-                    {
-                     'type': 'polyline',
-                     'positions': [[433204, 6475077],
-                                   [436204, 6480077],
-                                   [437204, 6475077]],
-                     'color': 'green',
-                     'tooltip': 'This is a green fault line'
-                    }
                 ]
         },
         {
@@ -132,17 +126,17 @@ def array_to_png(Z, shift=True, colormap=False):
             'data':
                 [
                     {
-                     'type': 'image',
-                     'url': map_data,
-                     'bounds': [[432205, 6475078],
-                                [437720, 6481113]]
+                        'type': 'image',
+                        'url': map_data,
+                        'bounds': [[432205, 6475078],
+                                   [437720, 6481113]]
                     }
                 ]
         },
         {
             'name': 'Some overlay layer',
             'base_layer': False,
-            'checked': True,
+            'checked': False,
             'data':
                 [
                     {
@@ -166,11 +160,10 @@ def array_to_png(Z, shift=True, colormap=False):
 
     with open('../src/demo/example-data/layered-map.json', 'w') as fh:
         json.dump({
-                    'map_bounds': map_bounds,
-                    'center': center,
-                    'layers': layers
-                   }, fh)
-
+            'map_bounds': map_bounds,
+            'center': center,
+            'layers': layers
+        }, fh)
 
     app = dash.Dash(__name__)
 
@@ -180,7 +173,25 @@ def array_to_png(Z, shift=True, colormap=False):
             map_bounds=map_bounds,
             center=center,
             layers=layers
-        )
+        ),
+        html.Pre(id='polyline'),
+        html.Pre(id='marker'),
+        html.Pre(id='polygon'),
     ])
 
+    @app.callback(Output('polyline', 'children'),
+                  [Input('volve-map', 'line_points')])
+    def get_edited_line(coords):
+        return f'Edited polyline: {json.dumps(coords)}'
+
+    @app.callback(Output('marker', 'children'),
+                  [Input('volve-map', 'marker_point')])
+    def get_edited_line(coords):
+        return f'Edited marker: {json.dumps(coords)}'
+
+    @app.callback(Output('polygon', 'children'),
+                  [Input('volve-map', 'polygon_points')])
+    def get_edited_line(coords):
+        return f'Edited closed polygon: {json.dumps(coords)}'
+
     app.run_server(debug=True)