Return layer element coordinates on mouseclick (#43)

* Return layer element coordinates on layer click
equinor · Sep 15, 2019 · 1092d03 · 1092d03
1 parent 4b93ce4
commit 1092d03
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/demo/example-data/layered-map.json b/src/demo/example-data/layered-map.json
diff --git a/src/lib/components/LayeredMap.js b/src/lib/components/LayeredMap.js
@@ -35,6 +35,7 @@ class LayeredMap extends Component {
                      zoom={-3}
                      minZoom={-5}
                      attributionControl={false}
+
                      crs={CRS.Simple}>
                     { this.props.showScaleY &&
                         <VerticalZoom position='topleft' scaleY={this.props.scaleY} minScaleY={1} maxScaleY={10} />
@@ -49,7 +50,12 @@ class LayeredMap extends Component {
                         ))}
                         {this.props.layers.filter(layer => !layer.base_layer).map((layer) => (
                             <Overlay checked={layer.checked} name={layer.name} key={layer.name}>
-                                <CompositeMapLayer layer={layer} hillShading={this.state.hillShading} />
+                                <CompositeMapLayer 
+                                    lineCoords={(coords) => setProps({'polyline_points': coords})}
+                                    polygonCoords={(coords) => setProps({'polygon_points': coords})}
+                                    layer={layer} 
+                                    hillShading={this.state.hillShading} 
+                                />
                             </Overlay>
                         ))}
                     </LayersControl>
@@ -135,17 +141,17 @@ LayeredMap.propTypes = {
     draw_toolbar_marker: PropTypes.bool,
 
     /**
-     * The coordinates of the edited polyline
+     * Dash provided prop that returns the coordinates of the edited or clicked polyline
      */
     polyline_points: PropTypes.array,
 
     /**
-     * The coordinates of the edited closed polygon
+     * Dash provided prop that returns the coordinates of the edited or clicked polygon
      */
     polygon_points: PropTypes.array,
 
     /**
-     * The coordinates of the edited marker
+     * Dash provided prop that returns the coordinates of the edited or clicked marker
      */
     marker_point: PropTypes.array,
 

diff --git a/src/lib/private_components/layered-map-resources/CompositeMapLayer.react.js b/src/lib/private_components/layered-map-resources/CompositeMapLayer.react.js
@@ -24,20 +24,24 @@ class CompositeMapLayer extends Component {
 
     renderItem(item, index) {
         if (item.type === 'polyline') {
+            const positions = item.positions.map(xy => yx(xy))
             return (
                 <Polyline
+                    onClick={() => this.props.lineCoords(positions)}
                     color={item.color}
-                    positions={item.positions.map(xy => yx(xy))}
+                    positions={positions}
                     key={index}>
                     {this.renderTooltip(item)}
                 </Polyline>
             )
         }
         if (item.type === 'polygon') {
+            const positions = item.positions.map(xy => yx(xy))
             return (
                 <Polygon
+                    onClick={() => this.props.polygonCoords(positions)}
                     color={item.color}
-                    positions={item.positions.map(xy => yx(xy))}
+                    positions={positions}
                     key={index}>
                     {this.renderTooltip(item)}
                 </Polygon>
@@ -89,7 +93,15 @@ CompositeMapLayer.propTypes = {
     /* Data for one single layer. See parent component LayeredMap for documentation.
      */
     layer: PropTypes.object,
-    hillShading: PropTypes.bool
+
+    /* Add hillshading to an image layer*/
+    hillShading: PropTypes.bool,
+
+    /* Coordinates for selected polyline*/
+    lineCoords: PropTypes.func,
+
+    /* Coordinates for selected polygon*/
+    polygonCoords: PropTypes.func
 };