Add attribution control banner

cypress/e2e/map.cy.ts

@@ -95,4 +95,19 @@ describe("Map", () => {
 
     cy.url().should("not.contain", "lng=-82.401078");
   });
+
+  it.only("Attribution control displays the proper message and link", () => {
+    loadMap("/");
+
+    cy.get(".leaflet-control-attribution").contains(
+      "Brought to you by HackGreenville Labs. Click here to contribute!"
+    );
+
+    // Get contribution link and ensure that the URL is as expected
+    cy.get(
+      ".leaflet-control-container > div.leaflet-bottom.leaflet-right > div > a:nth-child(2)"
+    )
+      .should("have.attr", "href")
+      .and("match", /https:\/\/data.openupstate.org\/contribute/);
+  });
 });

src/@vue-leaflet/vue-leaflet.d.ts

@@ -2,4 +2,5 @@ declare module "@vue-leaflet/vue-leaflet" {
   import type { DefineComponent } from "vue";
   export const LMap: DefineComponent;
   export const LTileLayer: DefineComponent;
+  export const LControlAttribution: DefineComponent;
 }

src/components/MainMap.vue

@@ -5,7 +5,11 @@ import type { Map, GeoJSON, LayersControlEvent } from "leaflet";
 </script>
 
 <script setup lang="ts">
-import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import {
+  LMap,
+  LTileLayer,
+  LControlAttribution,
+} from "@vue-leaflet/vue-leaflet";
 import { useMapStore } from "../stores/map";
 import { useRoute, useRouter } from "vue-router";
 import type { Feature } from "geojson";
@@ -203,13 +207,21 @@ function toTitleCase(string: string) {
       :minZoom="7"
       :maxZoom="20"
       :center="mapStore.locationArray"
+      :options="{
+        attributionControl: false,
+      }"
       @ready="initializeMap"
     >
+      <l-control-attribution
+        position="bottomright"
+        prefix="Brought to you by <a href='https://hackgreenville.com/'>HackGreenville Labs</a>. <a href='https://data.openupstate.org/contribute'>Click here</a> to contribute!"
+      />
       <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
         name="OpenStreetMap"
-      ></l-tile-layer>
+        attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
+      />
     </l-map>
   </div>
 </template>