1 files changed, 44 insertions, 0 deletions
diff --git a/src/components/app/map/elements/TilePlusIcon.js b/src/components/app/map/elements/TilePlusIcon.js
new file mode 100644
index 00000000..b96bf0f5
--- /dev/null
+++ b/src/components/app/map/elements/TilePlusIcon.js
@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group, Line} from "react-konva";
+import {TILE_PLUS_COLOR} from "../../../../util/colors";
+import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
+    const linePoints = [
+        [
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+        ],
+        [
+            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+        ],
+    ];
+    return (
+        <Group>
+            {linePoints.map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    lineCap="round"
+                    stroke={TILE_PLUS_COLOR}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+};
+
+TilePlusIcon.propTypes = {
+    pixelX: PropTypes.number,
+    pixelY: PropTypes.number,
+    mapScale: PropTypes.number,
+};
+
+export default TilePlusIcon;