Added the ability to search by the user's current location & Custom message for the state of Florida

website/components/LocationFiltersForm.vue

@@ -113,18 +113,30 @@
     <div class="col-auto">
       <button type="submit" class="btn btn-primary btn-lg">Search</button>
     </div>
+    <div class="col-auto">
+      <button type="submit" class="btn btn-primary btn-lg" @click="Location">Find Locations near me</button>
+    </div>
+        <div class="col-auto">
+      <button type="submit" class="btn btn-primary btn-lg" @click="clearLoc">Clear Location</button>
+    </div>
   </form>
 </template>
-
 <script>
 export default {
   data() {
     return {
       pendingQueryParams: {},
     };
   },
-
   computed: {
+    queryLoc:{
+      get(){
+        return this.$route.query.loc || "";
+      },
+      set(_lat, _lon){
+        this.pendingQueryParams.loc = [_lon,_lat];
+      }
+    },
     queryZip: {
       get() {
         return this.$route.query.zip || "";
@@ -184,6 +196,10 @@ export default {
     submitForm() {
       const newQuery = { ...this.$route.query, ...this.pendingQueryParams };
 
+      if (newQuery.loc === ""){
+        delete newQuery.loc;
+      }
+
       if (newQuery.zip === "") {
         delete newQuery.zip;
       }
@@ -214,6 +230,23 @@ export default {
       });
       this.pendingQueryParams = {};
     },
+  Location(){
+    navigator.geolocation.getCurrentPosition(position => {
+      this.pendingQueryParams.loc = [position.coords.longitude,position.coords.latitude];
+      this.pendingQueryParams.zip = "";
+      this.submitForm();
+    },
+    error => {
+      console.log(error);
+      alert("Location is not enabled. Please enable location services.");
+    },
+    );
+  },
+  clearLoc(){
+    this.pendingQueryParams.loc = "";
+    this.pendingQueryParams.zip = ""
+    this.submitForm();
+  }
   },
 };
 </script>

website/components/LocationMap.vue

@@ -42,6 +42,10 @@ export default {
       return this.$store.state.usStates.usState;
     },
 
+    locCoords(){
+      return this.$store.getters["usStates/getMapLocCoords"];
+    },
+
     zipCoords() {
       return this.$store.getters["usStates/getMapZipCoords"];
     },
@@ -63,10 +67,31 @@ export default {
       this.setMapBounds();
     },
 
+    locCoords() {
+      if (this.locMarker) {
+        if (this.locCoords) {
+
+          if(this.zipMarker){
+            this.zipMarker.remove();
+          }
+            this.locMarker.setLngLat(this.locCoords).addTo(this.map);
+
+        } else {
+          this.locMarker.remove();
+        }
+      }
+    },
+
     zipCoords() {
       if (this.zipMarker) {
         if (this.zipCoords) {
+
+          if(this.locMarker){
+            this.locMarker.remove();
+          }
+
           this.zipMarker.setLngLat(this.zipCoords).addTo(this.map);
+
         } else {
           this.zipMarker.remove();
         }
@@ -109,6 +134,8 @@ export default {
       });
       this.mapSource = this.map.getSource("locations");
 
+      this.locMarker = new Marker();
+
       this.zipMarker = new Marker();
 
       this.map.addLayer({

website/pages/_state.vue

@@ -32,7 +32,8 @@
                   You may be able to signup for vaccines with a health care
                   provider in your area (Kaiser, SCL Health, your county, etc.),
                   in which case you will be contacted when it's your turn and
-                  you may not need this tool.
+                  you may not need this tool. We recommend viewing other options 
+                  in the case that you are not able to schedule a vaccine through this tool.
                 </p>
                 <a
                   href="https://covid19.colorado.gov/for-coloradans/vaccine/where-can-i-get-vaccinated"
@@ -41,6 +42,31 @@
                   <font-awesome-icon icon="arrow-alt-circle-right"
                 /></a>
               </template>
+              <template v-else-if="usStateCode == 'FL'">
+                <p class="lead">
+                  Visit
+                  <a
+                    href="https://floridahealthcovid19.gov/vaccines/vaccine-locator/"
+                    class="text-white"
+                    ><strong class="fw-bold">FloridaHealth.gov</strong></a
+                  >
+                  for detailed information about your county's vaccine options
+                  and review whether or not you are eligible yet.
+                </p>
+                <p class="lead">
+                  You may be able to signup for vaccines with a health care
+                  provider or there may be other options in your area, 
+                  such as through a Public University (not supported). 
+                  We recommend viewing other options in the case that you are not able
+                  to schedule a vaccine through this tool.
+                </p>
+                <a
+                  href="https://floridahealthcovid19.gov/vaccines/vaccine-locator/"
+                  class="btn btn-light fw-bold fs-5 text-primary"
+                  >Visit FloridaHealth.gov
+                  <font-awesome-icon icon="arrow-alt-circle-right"
+                /></a>
+              </template>
               <template v-else>
                 <p class="lead">
                   Be sure to visit your own state's official vaccination website
@@ -50,7 +76,8 @@
                 <p class="lead">
                   You may be able to signup for vaccines with a health care
                   provider or there may be other options in your area, in which
-                  case you may not need this tool.
+                  case you may not need this tool. We recommend viewing other options 
+                  in the case that you are not able to schedule a vaccine through this tool.
                 </p>
               </template>
             </div>

website/pages/index.vue

@@ -53,7 +53,7 @@ export default {
     return {
       title: "COVID-19 Vaccine Spotter",
       description:
-        "A tool to help you track down COVID-19 vaccine appointment openings at your state's pharmacies. Updated every minute.",
+        "A tool to help you track down COVID-19 vaccine appointment openings at your state's pharmacies. Updated every minute!",
       states: [],
     };
   },

website/store/usStates.js

@@ -19,20 +19,45 @@ export const state = () => ({
 });
 
 export const getters = {
+  getMapLocCoords(state,getters,rootState){
+    let locCoords;
+
+    const queryLoc = rootState.route.query.loc;
+
+    if (queryLoc) {
+      locCoords = queryLoc;
+    }
+    return locCoords;
+  },
+
   getMapZipCoords(state, getters, rootState) {
     let zipCoords;
 
     const queryZip = rootState.route.query.zip;
     if (queryZip) {
       zipCoords = rootState.postalCodes.postalCodes[queryZip];
     }
-
     return zipCoords;
   },
 
   getMapBounds(state, getters, rootState) {
     let bounds;
 
+    const queryLoc = rootState.route.query.loc;
+    if (queryLoc) {
+      const queryLocCoords = queryLoc;
+      if (queryLocCoords) {
+        const queryRadius = rootState.route.query.radius;
+        if (queryRadius) {
+          bounds = bbox(
+            circle(queryLocCoords, parseInt(queryRadius, 10), {
+              units: "miles",
+            })
+          );
+        }
+      }
+    }
+
     const queryZip = rootState.route.query.zip;
     if (queryZip) {
       const queryZipCoords = rootState.postalCodes.postalCodes[queryZip];
@@ -48,6 +73,7 @@ export const getters = {
       }
     }
 
+
     if (!bounds && state.usState.metadata.bounding_box) {
       bounds = bbox(state.usState.metadata.bounding_box);
     }
@@ -117,6 +143,56 @@ export const getters = {
       return include;
     });
 
+    const queryLoc = rootState.route.query.loc;
+    if (queryLoc) {
+      const queryLocCoords = queryLoc;
+      if (!queryLocCoords) {
+        locations = [];
+      } else {
+        let radius;
+        const queryRadius = rootState.route.query.radius;
+        if (queryRadius) {
+          radius = parseInt(queryRadius, 10) * MILE_TO_KM;
+        }
+
+        const locationsIndex = new KDBush(
+          locations,
+          (l) => l.geometry.coordinates[0],
+          (l) => l.geometry.coordinates[1]
+        );
+        locations = geokdbush.around(
+          locationsIndex,
+          queryLocCoords[0],
+          queryLocCoords[1],
+          undefined,
+          radius
+        );
+
+        locations = locations.map((feature) => {
+          let distance =
+            geokdbush.distance(
+              queryLocCoords[0],
+              queryLocCoords[1],
+              feature.geometry.coordinates[0],
+              feature.geometry.coordinates[1]
+            ) * KM_TO_MILE;
+
+          if (distance < 10) {
+            distance = distance.toFixed(1);
+          } else {
+            distance = distance.toFixed(0);
+          }
+
+          return {
+            ...feature,
+            distance,
+          };
+        });
+
+        locations.sort((a, b) => a.distance - b.distance);
+      }
+    }
+
     const queryZip = rootState.route.query.zip;
     if (queryZip) {
       const queryZipCoords = rootState.postalCodes.postalCodes[queryZip];