Added name display to tile

src/components/map/MapTile.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Flex, Image as UIImage, IconButton, Box } from "theme-ui";
+import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui";
 
 import db from "../../database";
 
@@ -126,6 +126,24 @@ function MapTile({
         sx={{ width: "100%", height: "100%", objectFit: "contain" }}
         src={mapSource}
       />
+      <Flex
+        sx={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background:
+            "linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%);",
+          alignItems: "flex-end",
+          justifyContent: "center",
+        }}
+        p={2}
+      >
+        <Text as="p" variant="heading">
+          {map.name}
+        </Text>
+      </Flex>
       {/* Show expand button only if both reset and remove is available */}
       {isSelected && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>