#332 remove map component - WIP testing other possibilities

Author: andrewtavis

README.md

@@ -357,7 +357,6 @@ We would like to thank all the great software that made activist's development p
 
 - Countless [Nuxt modules](https://nuxt.com/modules)
 - [OpenStreetMap](https://www.openstreetmap.org)
-- [Leaflet](https://leafletjs.com/)
 
 ### Our partners
 

frontend/components/media/MediaMap.vue

@@ -1,210 +1,3 @@
 <template>
-  <div class="map card-style">
-    <div
-      ref="map"
-      id="map-div"
-      class="w-full h-full select-none saturate-[1.15] dark:hue-rotate-180 dark:invert rounded-md sm:rounded-lg"
-      :alt="$t('components.media-map.img-alt-text')"
-    ></div>
-    <div
-      :key="rerenderKey"
-      class="flex flex-col items-center justify-center h-full px-5 pb-5 text-2xl text-center space-y-5 text-light-cta-orange dark:text-dark-cta-orange"
-      :class="{ hidden: !errorOccurred }"
-    >
-      <p>{{ $t("components.media-map.error-message") }}</p>
-      <p>{{ $t("components.media-map.sorry-message") }}</p>
-    </div>
-  </div>
+  <div class="card-style"></div>
 </template>
-
-<script setup lang="ts">
-import type { MapOptions } from "leaflet";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-
-const props = defineProps<{
-  addresses: string[];
-  title: string;
-  type: string;
-}>();
-
-const rerenderKey = ref(0);
-const map = ref();
-
-type Marker = {
-  address: string;
-  lat: number;
-  lon: number;
-};
-
-let errorOccurred: boolean = false;
-
-function handleMapError(error: Error) {
-  console.error(error);
-  errorOccurred = true;
-
-  // TODO: More helpful and better looking error messages.
-  rerenderKey.value += 1; // rerender the error div
-  map.value.style.opacity = 0;
-  map.value.style.position = "absolute";
-}
-
-function drawMap(avgLat: number, avgLon: number, markers: Marker[]) {
-  const mapOptions: MapOptions = {
-    center: [avgLat, avgLon],
-    zoom: 13,
-    attributionControl: false,
-  };
-
-  const leafletMap = L.map("map-div", mapOptions);
-
-  const layer = new L.TileLayer(
-    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-  );
-  leafletMap.addLayer(layer);
-
-  const colorMode = useColorMode();
-  let eventColor = "";
-  if (props.type === "action") {
-    if (colorMode.value == "dark") {
-      eventColor = "#DD7E6B";
-    } else {
-      eventColor = "#9A031E";
-    }
-  } else {
-    if (colorMode.value == "dark") {
-      eventColor = "#6D9EEB";
-    } else {
-      eventColor = "#006DAA";
-    }
-  }
-
-  const markerHTMLStyles = `
-  background-color: ${eventColor};
-  width: 2rem;
-  height: 2rem;
-  display: block;
-  left: -1rem;
-  top: -1.5rem;
-  position: relative;
-  border-radius: 2rem 2rem 0;
-  transform: rotate(45deg);
-  border: 1px solid #D8DEE4`;
-
-  const mapIcon = L.divIcon({
-    className: "my-custom-pin",
-    iconAnchor: [0, 24],
-    popupAnchor: [0, -36],
-    html: `<span style="${markerHTMLStyles}" />`,
-  });
-
-  markers.map((marker: Marker) => {
-    const pin = L.marker([marker.lat, marker.lon], { icon: mapIcon });
-    // Add location pin to map.
-    pin.addTo(leafletMap);
-    pin.on("click", function () {
-      L.popup()
-        .setLatLng(pin.getLatLng())
-        .setContent(
-          `
-          <div class="flex bg-[#F6F8FA] rounded-lg">
-            <div class="flex flex-col w-3/5 px-2 pt-1 pb-2 space-y-1">
-              <p class="text-sm font-bold">${props.title}</p>
-              <p class="text-xs font-semibold">Date and time</p>
-              <p class="text-xs font-semibold">${marker.address}</p>
-              <a href="/home" class="attend-btn py-[0.5rem] px-[1.125rem] bg-[#F1993D] text-[#F6F8FA] font-medium rounded-md w-fit">
-                Attend
-              </a>
-            </div>
-            <div class="w-2/5 border-l-[24px] border-[#9A031E] bg-[#898688] rounded-r-md">
-              <img src=""/>
-            </div>
-          </div>
-        `
-        )
-        .openOn(leafletMap);
-    });
-  });
-}
-
-/*
-    NOTE: Below is an example of the code to use when the backend code
-    is up and running, removing most of the logic from the frontend.
-
-    const props = defineProps<{
-        locations: Marker[],
-        averageLat: number,
-        averageLon: number
-    }>();
-
-    onMounted(() => {
-        drawMap(props.averageLat, props.averageLon, props.locations);
-    });
-*/
-
-onMounted(() => {
-  const markers: Marker[] = [];
-  let averageLat: number = 0;
-  let averageLon: number = 0;
-
-  props.addresses.forEach((address: string, index: number) => {
-    const formattedAddress = address.replace(/ /g, "+"); // replace spaces with +
-
-    const osmURL =
-      "https://nominatim.openstreetmap.org/search?q=" +
-      formattedAddress +
-      "&format=json";
-
-    fetch(osmURL) // get the latitude and longitude of the address
-      .then((response) => response.json())
-      .then((data) => {
-        if (data.length == 0) {
-          handleMapError(new Error("OSM: Provided address not found."));
-          return;
-        }
-
-        const latitude = data[0].lat;
-        const longitude = data[0].lon;
-
-        markers[index] = { address: address, lat: latitude, lon: longitude };
-        averageLat += +latitude;
-        averageLon += +longitude;
-
-        if (index == props.addresses.length - 1) {
-          // Calculate  averages for centerpoint of map.
-          averageLat /= props.addresses.length;
-          averageLon /= props.addresses.length;
-          drawMap(averageLat, averageLon, markers);
-        }
-      })
-      .catch((error: Error) => {
-        handleMapError(error);
-      });
-  });
-});
-</script>
-
-<style>
-.leaflet-container a.leaflet-popup-close-button {
-  color: #f6f8fa;
-}
-
-.leaflet-container a.attend-btn {
-  color: #f6f8fa;
-}
-
-.leaflet-container p {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.leaflet-popup-content-wrapper {
-  border-radius: 5px;
-}
-
-.leaflet-popup-content {
-  margin: 0rem;
-  width: 100%;
-  height: 100%;
-}
-</style>

frontend/i18n/en-US.json

@@ -230,9 +230,6 @@
   "components.landing-tech-banner.open-source-tagline": "Trust through Transparency",
   "components.landing-tech-banner.open-source-text": "We're dedicated to working in the open to build trust with our partner organizations and fellow activists. Building the place for activism the world over takes a lot of effort, so please come join us!",
   "components.logo-activist.aria-label": "The activist logo that links to the home page",
-  "components.media-map.error-message": "There was a problem with the map service.",
-  "components.media-map.img-alt-text": "Map displaying a pin at the location of this event.",
-  "components.media-map.sorry-message": "Sorry about that!",
   "components.meta-tag-stars.label": "stars",
   "components.meta-tag.supporters_lower": "supporters",
   "components.modal-command-palette.jump-to": "Jump to",

frontend/package.json

@@ -10,7 +10,14 @@
   },
   "devDependencies": {
     "@headlessui/vue": "^1.7.16",
-    "@types/leaflet": "^1.9.3",
+    "@nuxt/content": "^2.3.0",
+    "@nuxt/devtools": "^1.0.6",
+    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/device": "^3.1.0",
+    "@nuxtjs/i18n": "^8.0.0-beta.7",
+    "@nuxtjs/tailwindcss": "^6.2.0",
+    "@pinia/nuxt": "^0.5.1",
     "@types/node": "^20.10.5",
     "@types/uuid": "^9.0.5",
     "@types/zxcvbn": "^4.4.4",
@@ -20,14 +27,6 @@
     "eslint-plugin-vue": "^9.17.0",
     "nuxt": "^3.8.2",
     "nuxt-icon": "^0.6.7",
-    "@nuxt/content": "^2.3.0",
-    "@nuxt/devtools": "^1.0.6",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/device": "^3.1.0",
-    "@nuxtjs/i18n": "^8.0.0-beta.7",
-    "@nuxtjs/tailwindcss": "^6.2.0",
-    "@pinia/nuxt": "^0.5.1",
     "rollup": "^3.0.0",
     "typescript": "^5.1.3",
     "vite": "^5.0.12",
@@ -38,11 +37,9 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/plausible": "^0.2.1",
     "@popperjs/core": "^2.11.8",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "axios": "^1.6.0",
     "dotenv": "^16.3.1",
     "eslint-config-prettier": "^9.0.0",
-    "leaflet": "^1.9.4",
     "nuxt-mail": "^4.0.2",
     "pinia": "^2.1.6",
     "prettier": "^3.0.3",

frontend/pages/events/[id]/about.vue

@@ -76,9 +76,6 @@
           v-if="event.inPersonLocation"
           class="w-full h-full"
           :class="{ 'lg:hidden': textExpanded }"
-          :addresses="[event.inPersonLocation]"
-          :type="event.type"
-          :title="event.name"
         />
       </div>
       <CardGetInvolved

frontend/yarn.lock

@@ -1700,11 +1700,6 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/geojson@*":
-  version "7946.0.13"
-  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.13.tgz#e6e77ea9ecf36564980a861e24e62a095988775e"
-  integrity sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==
-
 "@types/hast@^3.0.0", "@types/hast@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.3.tgz#7f75e6b43bc3f90316046a287d9ad3888309f7e1"
@@ -1724,13 +1719,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/leaflet@^1.9.3":
-  version "1.9.8"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.8.tgz#32162a8eaf305c63267e99470b9603b5883e63e8"
-  integrity sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==
-  dependencies:
-    "@types/geojson" "*"
-
 "@types/lodash@^4.14.165":
   version "4.14.202"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
@@ -1979,13 +1967,6 @@
     "@volar/language-core" "1.11.1"
     path-browserify "^1.0.1"
 
-"@vue-leaflet/vue-leaflet@^0.10.1":
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz#17330515629d500ac113009a49f8cf98d140e8cc"
-  integrity sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==
-  dependencies:
-    vue "^3.2.25"
-
 "@vue-macros/common@^1.8.0":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/@vue-macros/common/-/common-1.10.0.tgz#585615f25415f78862ee1b85bc06860e1c1eb4d7"
@@ -5060,11 +5041,6 @@ lazystream@^1.0.0:
   dependencies:
     readable-stream "^2.0.5"
 
-leaflet@^1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
-  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -8724,7 +8700,7 @@ vue-tsc@^1.8.8:
     "@vue/language-core" "1.8.26"
     semver "^7.5.4"
 
-vue@^3.2.25, vue@^3.3.8:
+vue@^3.3.8:
   version "3.3.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.13.tgz#f03098fa1b4e7cc88c133bef92260b55e3767002"
   integrity sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==