Sizing on mobile, attribution collapsed by default

assets/js/components/icons/map-info-icon.tsx

@@ -0,0 +1,14 @@
+import React, {FC} from "react";
+type Props = {
+  size?: number;
+};
+const MapInfoIcon: FC<Props> = (props) => {
+  const {size = 24} = props;
+  return (
+    <svg width={size} height={size} fill-rule="evenodd" viewBox="0 0 20 20">
+      <path d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0" />
+    </svg>
+  );
+};
+
+export default MapInfoIcon;

assets/js/map/map-container.tsx

@@ -19,22 +19,26 @@ import React, {
   useRef,
   useState,
 } from "react";
+import {MapLayerMouseEvent} from "react-map-gl";
 import {
   MapRef,
   Map as ReactMapGl,
   useControl,
+  AttributionControl,
   ViewStateChangeEvent,
 } from "react-map-gl/maplibre";
 import {useAppStore} from "../store/store";
 import {colorToRGBA, findLastLabelLayerId} from "../store/utils";
-import {useDrawHandler} from "./use-draw-handlers";
-
-import {MapLayerMouseEvent} from "react-map-gl";
+import {CursorPresenceOverlay} from "./cursor-presence-overlay";
+import CustomOverlay from "./custom-overlay";
 import MapControlsContainer from "./map-controls-container";
+import {useDrawHandler} from "./use-draw-handlers";
 import {useKeyStrokes} from "./use-key-strokes";
 import {usePanning} from "./use-panning";
-import CustomOverlay from "./custom-overlay";
-import {CursorPresenceOverlay} from "./cursor-presence-overlay";
+import {Button} from "../components/ui/button";
+import {InfoIcon} from "lucide-react";
+import {cn} from "../components/ui/utils";
+import MapInfoIcon from "../components/icons/map-info-icon";
 
 const defaultColor: [number, number, number, number] = [150, 150, 150, 200];
 
@@ -161,8 +165,10 @@ export const MapContainer: FC = () => {
     );
   }
 
+  const [showAttribution, setShowAttribution] = useState(false);
+
   return (
-    <div className="map-container absolute w-[100vw] h-[100vh] top-0 left-0">
+    <div className="map-container absolute inset-0 pb-safe-bottom">
       <ReactMapGl
         ref={mapRef}
         {...mapViewState}
@@ -172,6 +178,7 @@ export const MapContainer: FC = () => {
         onLoad={onMapLoad}
         onMove={handleMove}
         onMouseMove={handleMouseMove}
+        attributionControl={false}
       >
         <DeckGLOverlay
           layers={layers}
@@ -185,6 +192,18 @@ export const MapContainer: FC = () => {
         <CustomOverlay>
           <CursorPresenceOverlay />
         </CustomOverlay>
+        {showAttribution ? (
+          <AttributionControl compact customAttribution="© MapCanv" />
+        ) : (
+          <Button
+            size="icon"
+            variant="ghost"
+            className="absolute bottom-[10px] right-[10px] rounded-full bg-white h-6 w-6"
+            onClick={() => setShowAttribution(true)}
+          >
+            <MapInfoIcon />
+          </Button>
+        )}
       </ReactMapGl>
 
       <MapControlsContainer mapRef={mapRef} />

assets/js/map/types.ts

@@ -19,8 +19,8 @@ export const DrawingMode = {
   SELECT: "select",
   SELECT_RECT: "select:rect",
   MOVE: "move",
-  DRAW_LINE: "draw:line",
   DRAW_POLYGON_FREEHAND: "draw:polygon-freehand",
+  DRAW_LINE: "draw:line",
   DRAW_POLYGON: "draw:polygon",
   // DRAW_HEXAGON: "draw:hexagon",
 } as const satisfies Record<string, string>;

assets/tailwind.config.js

@@ -18,6 +18,12 @@ module.exports = {
   ],
   theme: {
     extend: {
+      spacing: {
+        "safe-bottom": "env(safe-area-inset-bottom)",
+        "safe-top": "env(safe-area-inset-top)",
+        "safe-left": "env(safe-area-inset-left)",
+        "safe-right": "env(safe-area-inset-right)",
+      },
       colors: {
         brand: "#FD4F00",
         border: "hsl(var(--border))",

lib/mapcanv/features_agent.ex

@@ -42,4 +42,11 @@ defmodule MapCanv.FeaturesAgent do
       end
     end)
   end
+
+  # Removes the Yjs document for the given GUID
+  def remove_document(guid) do
+    Agent.update(__MODULE__, fn state ->
+      Map.delete(state, guid)
+    end)
+  end
 end

lib/mapcanv_web/channels/drawing_channel.ex

@@ -83,6 +83,7 @@ defmodule MapCanvWeb.DrawingChannel do
       # This was the last user, perform the cleanup
       #cleanup_ydoc(guid)
       IO.inspect("Cleaning up resources for drawing channel with guid: #{guid}")
+      FeaturesAgent.remove_document(guid)
     end
 
     :ok