From 4af48ceb688748bffe82574150f91cd53ceba290 Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Thu, 11 Oct 2018 18:39:40 -0700
Subject: [PATCH 1/7] search with lunr implemented, working on styleing the
 search results

---
 _includes/shelter_map.html | 332 ++++++++++++++++++++++++++-----------
 _layouts/home.html         |   6 +-
 _sass/_shelter-map.scss    |  56 ++++++-
 3 files changed, 294 insertions(+), 100 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index 2082aef..50c241e 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -1,13 +1,19 @@
+
 <div id="map-container" class="shelter-map_container">
     <div id="map">
     </div>
     <div class="shelter-map_info">
-        <div class="map-controls">
+        <div class="shelter-map-controls">
             <button id="ShelterFilterToggle" class="button is-info is-small" onclick="toggleFiltersVisibility();">
                 <svg id="icon-filter" viewBox="0 0 32 32" aria-label="filter icon">
                     <path d="M16 0c-8.837 0-16 2.239-16 5v3l12 12v10c0 1.105 1.791 2 4 2s4-0.895 4-2v-10l12-12v-3c0-2.761-7.163-5-16-5zM2.95 4.338c0.748-0.427 1.799-0.832 3.040-1.171 2.748-0.752 6.303-1.167 10.011-1.167s7.262 0.414 10.011 1.167c1.241 0.34 2.292 0.745 3.040 1.171 0.494 0.281 0.76 0.519 0.884 0.662-0.124 0.142-0.391 0.38-0.884 0.662-0.748 0.427-1.8 0.832-3.040 1.171-2.748 0.752-6.303 1.167-10.011 1.167s-7.262-0.414-10.011-1.167c-1.24-0.34-2.292-0.745-3.040-1.171-0.494-0.282-0.76-0.519-0.884-0.662 0.124-0.142 0.391-0.38 0.884-0.662z"></path>
                 </svg>
                 Filters</button>
+            <div id="ShelterSearch" class="field search-wrapper">
+                <div class="control">
+                    <input class="input" type="text" id="ShelterSearchInput" placeholder="Search Shelters" >
+                </div>
+            </div>
         </div>
         <ul id="ShelterFiltersUL" class="filters tabs">
             <!--<li class="filter-item" id="ShelterFilter_All" onclick="onFilterClick(this.id)">All</li>-->
@@ -17,12 +23,143 @@
             <!--<li class="filter-item" id="ShelterFilter_SuppliesNeeded" onclick="onFilterClick(this.id)">Supplies Needed</li>-->
             <!--<li class="filter-item" id="ShelterFilter_VolunteersNeeded" onclick="onFilterClick(this.id)">Volunteers Needed</li>-->
         </ul>
+        <ul id="SearchResultsList"></ul>
     </div>
 </div>
+
+
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.js"></script>-->
+<script src="https://unpkg.com/lunr/lunr.js"></script>
+
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.js"></script>
 <script>
     window.shelters = null;
     let sheltersShown = [];
     let currentFilterActions = [];
+    let currentPopup;
+
+
+
+    /**
+     * Search
+     */
+
+    /**
+     * builds a searchable lunr index from an array of documents.
+     *
+     * @param documents
+     * @return {*}
+     */
+    function buildIndex(documents) {
+        return lunr(function () {
+            this.ref('id');
+            this.field('shelter');
+            this.field('address');
+            this.field('county');
+            this.field('zip');
+            this.field('city');
+            this.field('notes');
+
+            documents.forEach(function (doc) {
+                this.add(doc)
+            }, this)
+        });
+    }
+
+    function searchShelters(query, fuzz = 2) {
+        query = query
+            .replace(' ', `~${fuzz} `);
+            if (query[-1] !== ' ') {
+                query = query.concat(`~${fuzz}`);
+            }
+        const matches = buildIndex(shelters).search(query);
+        const matchedIds = matches.map(match => match.ref);
+        return shelters.filter(shelter => {
+            for (let id of matchedIds) {
+                if (+id === +shelter.id) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+
+    //
+    // function renderSearch() {
+    //     map.addControl(new MapboxGeocoder({
+    //         accessToken: mapboxgl.accessToken,
+    //         localGeocoder: searchShelters,
+    //         zoom: 14,
+    //         placeholder: "Enter search e.g. Lincoln Park"
+    //     }));
+    // }
+
+
+    const onSearchInput$ = Rx.Observable.fromEvent(
+            document.getElementById('ShelterSearchInput'),
+            'keyup'
+        );
+
+    onSearchInput$.distinctUntilChanged()
+        .debounceTime(1000)
+        .subscribe(res => {
+            const results = searchShelters(res.target.value);
+            renderSearchResults(results)
+        });
+
+    function renderSearchResults(results) {
+        let template = ``;
+        const resultsRef = document.getElementById('SearchResultsList');
+        for (let result of results) {
+            template += searchResultTemplate(result);
+        }
+        resultsRef.innerHTML = template;
+    }
+
+    function searchResultTemplate(props) {
+        return `
+            <li class="search-result_item" onclick="moveTo(${props.longitude}, ${props.latitude}, ${props.id})">
+                <div class="search-result_name"><bold>${props.shelter}</bold></div>
+                <div class="search-result_address"><small>${isFullAddress(props) ? props.address : shelterAddressToString(props)}</small></div>
+           </li>
+        `;
+
+    }
+
+    function moveTo(lng, lat, shelterId){
+        console.log('cords?', lng, lat);
+        map.flyTo({
+            center: [+lng, +lat],
+            zoom: 9
+        });
+        // map.fireEvent('click', {latlng: L.latLng(+lat, +lng)});
+        for ( let shelter of sheltersShown) {
+            console.log(+shelter.id, shelterId);
+            if (+shelter.id === +shelterId) {
+                console.log('hit', shelter.id, shelterId);
+                const popup = new mapboxgl.Popup({
+                    offset: 25,
+                    className: 'shelter-popup'
+                });
+                if (currentPopup) {
+                    currentPopup.remove();
+                }
+                currentPopup = popup;
+                popup.setLngLat([shelter.longitude, shelter.latitude])
+                    .setHTML(popupTemplate(shelter))
+                    .addTo(map);
+            }
+        }
+    }
+
+
+
+    /**
+     *  /End Search
+     */
 
     const SHELTER_API = 'https://hurricane-florence-api.herokuapp.com/api/v1/shelters';
     // const SHELTER_API  = 'https://irma-api.herokuapp.com/api/v1/shelters';
@@ -37,12 +174,7 @@
         zoom: 7.3
     });
     var oReq = new XMLHttpRequest();
-    oReq.onload = function (e) {
-        if (!(e && e.target && e.target.response && e.target.response.shelters))
-            return console.error('error fetching shelter JSON');
-        window.shelters = sheltersShown = e.target.response.shelters;
-        populateMarkers(sheltersShown);
-    };
+    oReq.onload = onShelterFetch;
     oReq.open('GET', SHELTER_API, true);
     oReq.responseType = 'json';
     oReq.send();
@@ -55,83 +187,15 @@
         trackUserLocation: true
     }));
 
-    /**
-     * Builds a HTML template (Popup) from a shelter object.
-     *
-     * @params shelter
-     * @returns {string}
-     */
-    function popupTemplate(shelter) {
-
-        const phoneLink = `
-            <div class="phone">
-                <svg id="icon-phone" height="32px" viewBox="0 0 32 32" aria-label="phone icon">
-                    <path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
-                </svg>
-                <div class="phone-details" aria-label="shelter phone number">
-                    <a class="phone" role="link" href="tel:${shelter.cleanPhone}">${shelter.phone}</a>
-                </div>
-            </div>
-        `;
-
-        const address = `
-            <div class="address">
-                <svg id="icon-address" height="32px" viewBox="0 0 32 32" aria-label="address icon">
-                    <path d="M0 32h16v-32h-16v32zM10 4h4v4h-4v-4zM10 12h4v4h-4v-4zM10 20h4v4h-4v-4zM2 4h4v4h-4v-4zM2 12h4v4h-4v-4zM2 20h4v4h-4v-4zM18 10h14v2h-14zM18 32h4v-8h6v8h4v-18h-14z"></path>
-                </svg>
-                <div class="address-details" aria-label="address details">
-                    ${isFullAddress(shelter) ? shelter.address : shelterAddressToString(shelter)}
-                </div>
-            </div>
-        `;
-
-        const note = `
-            <div class="note">
-                <label><strong>Note:</strong></label>
-                <div class="note-details" aria-label="Notes for shelter">
-                    ${urlsToAnchors(shelter.notes)}
-                </div>
-            </div>
-        `;
-
-        const petsNote = `
-            <div class="note">
-                <label><strong>Pets:</strong></label>
-                <div class="note-details" aria-label="Notes for shelter pets policy">
-                    ${urlsToAnchors(shelter.pets_notes)}
-                </div>
-            </div>
-        `;
-
-        return `
-            <header class="popup-header">
-                <p class="is-size-4 has-text-centered">${shelter.shelter}</p>
-            </header>
-            <div class="shelter-details">
-                <div class="content is-size-6 has-text-left">
-                    ${!!shelter.address ? address : ``}
-                    ${isPhone(shelter) ? phoneLink : ``}
-                    <div class="controls">
-                        ${!!shelter.address
-            ? `
-                            <a class="directions button is-link" target="_blank" href="https://www.google.com/maps/dir/current+location/${encodeURIComponent(shelterAddressToString(shelter))}" aria-label="Get directions button">
-                                <svg id="icon-directions" height="100%" viewBox="0 0 32 32" aria-label="directions icon">
-                                    <path d="M17 32c-0.072 0-0.144-0.008-0.217-0.024-0.458-0.102-0.783-0.507-0.783-0.976v-15h-15c-0.469 0-0.875-0.326-0.976-0.783s0.129-0.925 0.553-1.123l30-14c0.381-0.178 0.833-0.098 1.13 0.199s0.377 0.749 0.199 1.13l-14 30c-0.167 0.358-0.524 0.577-0.906 0.577zM5.508 14h11.492c0.552 0 1 0.448 1 1v11.492l10.931-23.423-23.423 10.931z"></path>
-                                </svg>
-                                <div class="separator"></div>
-                                <label>Directions</label>
-                            </a>
-                        `
-            : ``}
-                    </div>
-                    ${!!shelter.notes ? note : ``}
-                    ${!!shelter.pets_notes ? petsNote : ``}
-                </div>
-            </div>
-        `;
+    function onShelterFetch(e) {
+        if (!(e && e.target && e.target.response && e.target.response.shelters)) {
+            return console.error('error fetching shelter JSON');
+        }
+        window.shelters = sheltersShown = e.target.response.shelters;
+        populateMarkers(sheltersShown);
+        console.log(shelters);
     }
 
-
     /**
      * https://github.com/hurricane-response/florence-api/issues/53
      *
@@ -235,13 +299,13 @@
         for (let i = 0; i < sheltersShown.length; i++) {
             const el = document.createElement('div');
             el.className = 'marker';
-            const popup = new mapboxgl.Popup({
+            sheltersShown[i].popup = new mapboxgl.Popup({
                 offset: 25,
                 className: 'shelter-popup'
             }).setHTML(popupTemplate(sheltersShown[i]));
             sheltersShown[i].marker = new mapboxgl.Marker(el)
                 .setLngLat([sheltersShown[i].longitude, sheltersShown[i].latitude])
-                .setPopup(popup)
+                .setPopup(sheltersShown[i].popup)
                 .addTo(map);
         }
     }
@@ -271,24 +335,14 @@
         if (filterButtonRef.className.match('active') ) {
             currentFilterActions = currentFilterActions.filter(val => val !== action);
             if (!ifIsAll()) {
-                const nextSheltersShown = currentFilterActions.reduce((nextShown, action) => {
-                    return nextShown = filterReducer(nextShown, action);
-                }, shelters);
-
-                populateMarkers(nextSheltersShown);
-
+                filterRenderMarkersByActions(currentFilterActions);
             }
             filterButtonRef.className = filterButtonRef.className.replace(' active', '');
 
         } else {
             currentFilterActions = [action, ...currentFilterActions];
             if (!ifIsAll()) {
-                const nextSheltersShown = currentFilterActions.reduce((nextShown, action) => {
-                    return nextShown = filterReducer(nextShown, action);
-                }, shelters);
-
-                populateMarkers(nextSheltersShown);
-
+                filterRenderMarkersByActions(currentFilterActions);
             }
             filterButtonRef.className = filterButtonRef.className.concat(' active');
         }
@@ -302,6 +356,14 @@
         }
     }
 
+    function filterRenderMarkersByActions(actions) {
+        const nextSheltersShown = actions.reduce((nextShown, action) => {
+            return nextShown = filterReducer(nextShown, action);
+        }, shelters);
+
+        populateMarkers(nextSheltersShown);
+    }
+
     function filterReducer(current, action) {
         switch(action) {
             case'All':
@@ -321,4 +383,82 @@
                 return current;
         }
     }
+
+    /**
+     * Builds a HTML template (Popup) from a shelter object.
+     *
+     * @params shelter
+     * @returns {string}
+     */
+    function popupTemplate(shelter) {
+
+        const phoneLink = `
+            <div class="phone">
+                <svg id="icon-phone" height="32px" viewBox="0 0 32 32" aria-label="phone icon">
+                    <path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
+                </svg>
+                <div class="phone-details" aria-label="shelter phone number">
+                    <a class="phone" role="link" href="tel:${shelter.cleanPhone}">${shelter.phone}</a>
+                </div>
+            </div>
+        `;
+
+        const address = `
+            <div class="address">
+                <svg id="icon-address" height="32px" viewBox="0 0 32 32" aria-label="address icon">
+                    <path d="M0 32h16v-32h-16v32zM10 4h4v4h-4v-4zM10 12h4v4h-4v-4zM10 20h4v4h-4v-4zM2 4h4v4h-4v-4zM2 12h4v4h-4v-4zM2 20h4v4h-4v-4zM18 10h14v2h-14zM18 32h4v-8h6v8h4v-18h-14z"></path>
+                </svg>
+                <div class="address-details" aria-label="address details">
+                    ${isFullAddress(shelter) ? shelter.address : shelterAddressToString(shelter)}
+                </div>
+            </div>
+        `;
+
+        const note = `
+            <div class="note">
+                <label><strong>Note:</strong></label>
+                <div class="note-details" aria-label="Notes for shelter">
+                    ${urlsToAnchors(shelter.notes)}
+                </div>
+            </div>
+        `;
+
+        const petsNote = `
+            <div class="note">
+                <label><strong>Pets:</strong></label>
+                <div class="note-details" aria-label="Notes for shelter pets policy">
+                    ${urlsToAnchors(shelter.pets_notes)}
+                </div>
+            </div>
+        `;
+
+        return `
+            <header class="popup-header">
+                <p class="is-size-4 has-text-centered">${shelter.shelter}</p>
+            </header>
+            <div class="shelter-details">
+                <div class="content is-size-6 has-text-left">
+                    ${!!shelter.address ? address : ``}
+                    ${isPhone(shelter) ? phoneLink : ``}
+                    <div class="controls">
+                        ${!!shelter.address
+            ? `
+                            <a class="directions button is-link" target="_blank" href="https://www.google.com/maps/dir/current+location/${encodeURIComponent(shelterAddressToString(shelter))}" aria-label="Get directions button">
+                                <svg id="icon-directions" height="100%" viewBox="0 0 32 32" aria-label="directions icon">
+                                    <path d="M17 32c-0.072 0-0.144-0.008-0.217-0.024-0.458-0.102-0.783-0.507-0.783-0.976v-15h-15c-0.469 0-0.875-0.326-0.976-0.783s0.129-0.925 0.553-1.123l30-14c0.381-0.178 0.833-0.098 1.13 0.199s0.377 0.749 0.199 1.13l-14 30c-0.167 0.358-0.524 0.577-0.906 0.577zM5.508 14h11.492c0.552 0 1 0.448 1 1v11.492l10.931-23.423-23.423 10.931z"></path>
+                                </svg>
+                                <div class="separator"></div>
+                                <label>Directions</label>
+                            </a>
+                        `
+            : ``}
+                    </div>
+                    ${!!shelter.notes ? note : ``}
+                    ${!!shelter.pets_notes ? petsNote : ``}
+                </div>
+            </div>
+        `;
+    }
+
+
 </script>
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
index 5ce5811..8428459 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -17,9 +17,11 @@
     </div>
     <section class="hero is-large">
 
-        <div class="container">
+        <div class="container shelter-map">
             <h1 class="title is-centered">Hurricane Michael Response</h1>
-            {% include shelter_map.html %}
+            <div class="map-wrapper">
+                {% include shelter_map.html %}
+            </div>
         </div>
     </section>
     <main role="main">
diff --git a/_sass/_shelter-map.scss b/_sass/_shelter-map.scss
index 8a479c7..f0ea453 100644
--- a/_sass/_shelter-map.scss
+++ b/_sass/_shelter-map.scss
@@ -1,4 +1,4 @@
-$map-height: 90vh;
+$map-height: 100%;
 
 .shelter-popup > .mapboxgl-popup-content {
   padding: 0;
@@ -21,10 +21,22 @@ $map-height: 90vh;
 
 }
 
+.container.shelter-map {
+  //position: relative;
+}
+
 #map-container {
   overflow: hidden;
 }
 
+.map-wrapper {
+  //position: absolute;
+  margin: auto;
+  max-width: 100vw;
+  min-width: 90vw;
+}
+
+
 #map-container.shelter-map_container #map {
   min-height: $map-height;
   max-height: $map-height;
@@ -34,9 +46,15 @@ $map-height: 90vh;
   position: absolute;
   top: 10px;
   left: 10px;
-  height: 0;
+  //height: 0;
+  width: 100%;
+  max-width: 80vw;
 }
 
+.shelter-map-controls {
+  display: flex;
+  justify-content: flex-start;
+}
 // Filter Controls
 
 #ShelterFilterToggle, #geolocate {
@@ -82,4 +100,38 @@ $map-height: 90vh;
   &.visible {
     transform: translateX(0);
   }
+}
+
+#ShelterSearch {
+  //position: relative;
+  width: 100%;
+
+  & .control {
+    width: 100%;
+    padding: 0 6px;
+  }
+
+}
+
+#SearchResultsList {
+  position: absolute;
+  top: 39px;
+  left: 82px;
+  max-height: 200px;
+  overflow: auto;
+  background: rgba(245, 245, 245, 0.87);
+  padding: 0 3px;
+  right: 8px;
+}
+
+.search-result_item {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  background: rgba(195, 243, 255, 0.42);
+  margin-bottom: 4px;
+
+  div {
+    padding: 0 6px;
+  }
 }
\ No newline at end of file

From 91c42a946865497a60fe1444bca4d85f1727da28 Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Thu, 11 Oct 2018 20:31:57 -0700
Subject: [PATCH 2/7] built search feature and refactore map control UI to fit
 in with search results.

---
 _includes/shelter_map.html | 51 ++++++++++++++++++--------------------
 _sass/_shelter-map.scss    | 31 ++++++++++++++++++++---
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index 9b095ea..e2b7a59 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -3,10 +3,13 @@
     </div>
     <div class="shelter-map_info">
         <div class="shelter-map-controls">
-            <div id="ShelterSearch" class="field search-wrapper">
+            <div id="ShelterSearch" class="field has-addons search-wrapper">
                 <div class="control">
                     <input class="input" type="text" id="ShelterSearchInput" placeholder="Search Shelters" >
                 </div>
+                <a class="control">
+                    <button class="button is-danger" onclick="clearSearch();">X</button>
+                </a>
             </div>
             <button id="ShelterFilterToggle" class="button is-info is-small" onclick="toggleFiltersVisibility();">
                 <svg id="icon-filter" viewBox="0 0 32 32" aria-label="filter icon">
@@ -128,11 +131,15 @@
             'keyup'
         );
 
-    onSearchInput$.distinctUntilChanged()
+    onSearchInput$
         .debounceTime(1000)
         .subscribe(res => {
-            const results = searchShelters(res.target.value);
-            renderSearchResults(results)
+            if (!res.target.value) {
+                clearSearch()
+            } else {
+                const results = searchShelters(res.target.value);
+                renderSearchResults(results)
+            }
         });
 
     function renderSearchResults(results) {
@@ -144,14 +151,9 @@
         resultsRef.innerHTML = template;
     }
 
-    function searchResultTemplate(props) {
-        return `
-            <li class="search-result_item" onclick="moveTo(${props.longitude}, ${props.latitude}, ${props.id})">
-                <div class="search-result_name"><bold>${props.shelter}</bold></div>
-                <div class="search-result_address"><small>${isFullAddress(props) ? props.address : shelterAddressToString(props)}</small></div>
-           </li>
-        `;
-
+    function clearSearch() {
+        document.getElementById('ShelterSearchInput').value = '';
+        document.getElementById('SearchResultsList').innerHTML = '';
     }
 
     function moveTo(lng, lat, shelterId){
@@ -180,8 +182,6 @@
         }
     }
 
-
-
     /**
      *  /End Search
      */
@@ -203,7 +203,6 @@
     var navControl = new mapboxgl.NavigationControl();
     map.addControl(navControl, 'bottom-right');
     map.addControl(new mapboxgl.GeolocateControl({
-        className: 'control-geolocate',
         positionOptions: {
             enableHighAccuracy: true
         },
@@ -407,6 +406,16 @@
         }
     }
 
+
+    function searchResultTemplate(props) {
+        return `
+            <li class="search-result_item" onclick="moveTo(${props.longitude}, ${props.latitude}, ${props.id})">
+                <div class="search-result_name"><bold>${props.shelter}</bold></div>
+                <div class="search-result_address"><small>${isFullAddress(props) ? props.address : shelterAddressToString(props)}</small></div>
+           </li>
+        `;
+    }
+
     /**
      * Builds a HTML template (Popup) from a shelter object.
      *
@@ -483,16 +492,4 @@
         `;
     }
 
-    /**
-     * Legend Controls
-     */
-
-    function toggleLegend() {
-        const legendRef = document.getElementById('LegendDetails');
-        if (legendRef.className.match('visible')) {
-            legendRef.className = legendRef.className.replace(' visible', '');
-        } else {
-            legendRef.className = legendRef.className.concat(' visible');
-        }
-    }
 </script>
\ No newline at end of file
diff --git a/_sass/_shelter-map.scss b/_sass/_shelter-map.scss
index fdb12b9..cda7ac7 100644
--- a/_sass/_shelter-map.scss
+++ b/_sass/_shelter-map.scss
@@ -43,9 +43,9 @@ $map-height: 100%;
 }
 
 .shelter-map_info {
-  right: 131px;
   position: absolute;
   top: 10px;
+  right: 138px;
   left: 10px;
 }
 .shelter-map-controls {
@@ -55,6 +55,10 @@ $map-height: 100%;
 }
 // Geolocate Control
 
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  margin: 12px 10px 0 0;
+}
+
 .mapboxgl-ctrl-top-right div {
   position: relative;
   overflow: visible;
@@ -140,15 +144,19 @@ $map-height: 100%;
 
   & .control {
     width: 100%;
-    padding: 0 6px;
   }
 
+  & a {
+    max-width: 36px;
+  }
+
+
 }
 
 #SearchResultsList {
   position: absolute;
-  top: 39px;
-  left: 82px;
+  top: 47px;
+  left: 88px;
   max-height: 200px;
   overflow: auto;
   background: rgba(245, 245, 245, 0.87);
@@ -163,6 +171,7 @@ $map-height: 100%;
   flex-wrap: wrap;
   background: rgba(195, 243, 255, 0.42);
   margin-bottom: 4px;
+  padding: 6px;
 
   div {
     padding: 0 6px;
@@ -224,3 +233,17 @@ $map-height: 100%;
     background: $evacuation-route-color;
   }
 }
+
+@media (max-width: 480px) {
+  .mapboxgl-ctrl-top-right div::after {
+    display: none;
+  }
+
+  .shelter-map_info {
+    right: 48px;
+  }
+
+  #SearchResultsList {
+    right: -40px;
+  }
+}
\ No newline at end of file

From 496a9d2438ece402ffe9ed08b50966574a8899a9 Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Thu, 11 Oct 2018 20:37:54 -0700
Subject: [PATCH 3/7] fixed position of map for fullscreen

---
 _includes/shelter_map.html | 11 -----------
 _sass/_shelter-map.scss    |  4 +++-
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index e2b7a59..0c2ca98 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -115,17 +115,6 @@
         });
     }
 
-    //
-    // function renderSearch() {
-    //     map.addControl(new MapboxGeocoder({
-    //         accessToken: mapboxgl.accessToken,
-    //         localGeocoder: searchShelters,
-    //         zoom: 14,
-    //         placeholder: "Enter search e.g. Lincoln Park"
-    //     }));
-    // }
-
-
     const onSearchInput$ = Rx.Observable.fromEvent(
             document.getElementById('ShelterSearchInput'),
             'keyup'
diff --git a/_sass/_shelter-map.scss b/_sass/_shelter-map.scss
index cda7ac7..6a59f5d 100644
--- a/_sass/_shelter-map.scss
+++ b/_sass/_shelter-map.scss
@@ -30,10 +30,12 @@ $map-height: 100%;
 }
 
 .map-wrapper {
-  //position: absolute;
+  position: relative;
   margin: auto;
   max-width: 100vw;
   min-width: 90vw;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 

From 031bca060dbbcfacc55d801282096457c6aa461d Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Thu, 11 Oct 2018 21:52:49 -0700
Subject: [PATCH 4/7] fixed search fields and filters now filter search results

---
 _includes/shelter_map.html | 125 ++++++++++++++++++++++++-------------
 _sass/_shelter-map.scss    |   4 +-
 2 files changed, 83 insertions(+), 46 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index 0c2ca98..1f2c87a 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -23,7 +23,7 @@
                 <!--<li class="filter-item" id="ShelterFilter_All" onclick="onFilterClick(this.id)">All</li>-->
                 <!--<li class="filter-item" id="ShelterFilter_Accepting" onclick="onFilterClick(this.id)">Accepting</li>-->
                 <li class="filter-item" id="ShelterFilter_SpecialNeeds" onclick="onFilterClick(this.id)">Special Needs</li>
-                <li class="filter-item" id="ShelterFilter_PetsOK" onclick="onFilterClick(this.id)">Pets allowed</li>
+                <li class="filter-item" id="ShelterFilter_PetsOK" onclick="onFilterClick(this.id)">Pets Allowed</li>
                 <!--<li class="filter-item" id="ShelterFilter_SuppliesNeeded" onclick="onFilterClick(this.id)">Supplies Needed</li>-->
                 <!--<li class="filter-item" id="ShelterFilter_VolunteersNeeded" onclick="onFilterClick(this.id)">Volunteers Needed</li>-->
             </ul>
@@ -70,6 +70,48 @@
     // const SHELTER_API  = 'https://irma-api.herokuapp.com/api/v1/shelters';
     const MAP_LOAD_CENTER = [-84.9832, 29.7258];
 
+    const onSearchInput$ = Rx.Observable.fromEvent(
+        document.getElementById('ShelterSearchInput'),
+        'keyup'
+    );
+
+    onSearchInput$
+        .debounceTime(1000)
+        .subscribe(res => {
+            if (!res.target.value) {
+                clearSearch()
+            } else {
+                const results = searchShelters(res.target.value);
+                renderSearchResults(results)
+            }
+        });
+
+    /**
+     *  Map Init
+     */
+
+    mapboxgl.accessToken = '{{site.mapbox_access_token}}';
+
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/sbma44/cjm0qon9e7u8l2sqliotzrlmi',
+        center: MAP_LOAD_CENTER,
+        zoom: 7.3
+    });
+    var oReq = new XMLHttpRequest();
+    oReq.onload = onShelterFetch;
+    oReq.open('GET', SHELTER_API, true);
+    oReq.responseType = 'json';
+    oReq.send();
+    var navControl = new mapboxgl.NavigationControl();
+    map.addControl(navControl, 'bottom-right');
+    map.addControl(new mapboxgl.GeolocateControl({
+        positionOptions: {
+            enableHighAccuracy: true
+        },
+        trackUserLocation: true
+    }));
+
 
     /**
      * Search
@@ -89,7 +131,6 @@
             this.field('county');
             this.field('zip');
             this.field('city');
-            this.field('notes');
 
             documents.forEach(function (doc) {
                 this.add(doc)
@@ -97,14 +138,22 @@
         });
     }
 
-    function searchShelters(query, fuzz = 2) {
+    /**
+     * takes in a query string and outputs an array of shelters
+     *
+     * @param query
+     * @param fuzz
+     * @returns {shelters}
+     */
+    function searchShelters(query, fuzz = 1) {
         query = query
             .replace(' ', `~${fuzz} `);
             if (query[-1] !== ' ') {
                 query = query.concat(`~${fuzz}`);
             }
-        const matches = buildIndex(shelters).search(query);
+        const matches = buildIndex(sheltersShown).search(query);
         const matchedIds = matches.map(match => match.ref);
+        console.log(matches);
         return shelters.filter(shelter => {
             for (let id of matchedIds) {
                 if (+id === +shelter.id) {
@@ -115,22 +164,6 @@
         });
     }
 
-    const onSearchInput$ = Rx.Observable.fromEvent(
-            document.getElementById('ShelterSearchInput'),
-            'keyup'
-        );
-
-    onSearchInput$
-        .debounceTime(1000)
-        .subscribe(res => {
-            if (!res.target.value) {
-                clearSearch()
-            } else {
-                const results = searchShelters(res.target.value);
-                renderSearchResults(results)
-            }
-        });
-
     function renderSearchResults(results) {
         let template = ``;
         const resultsRef = document.getElementById('SearchResultsList');
@@ -140,18 +173,29 @@
         resultsRef.innerHTML = template;
     }
 
+    /**
+     * clears search bar and removes the search results list.
+     *
+     * @returns {void}
+     */
     function clearSearch() {
         document.getElementById('ShelterSearchInput').value = '';
         document.getElementById('SearchResultsList').innerHTML = '';
     }
 
+    /**
+     * positions map and opens a popup for that shelter location
+     *
+     * @param lng
+     * @param lat
+     * @param shelterId
+     * @return {void}
+     */
     function moveTo(lng, lat, shelterId){
-        console.log('cords?', lng, lat);
         map.flyTo({
             center: [+lng, +lat],
             zoom: 9
         });
-        // map.fireEvent('click', {latlng: L.latLng(+lat, +lng)});
         for ( let shelter of sheltersShown) {
             console.log(+shelter.id, shelterId);
             if (+shelter.id === +shelterId) {
@@ -175,29 +219,6 @@
      *  /End Search
      */
 
-
-    mapboxgl.accessToken = '{{site.mapbox_access_token}}';
-
-    var map = new mapboxgl.Map({
-        container: 'map',
-        style: 'mapbox://styles/sbma44/cjm0qon9e7u8l2sqliotzrlmi',
-        center: MAP_LOAD_CENTER,
-        zoom: 7.3
-    });
-    var oReq = new XMLHttpRequest();
-    oReq.onload = onShelterFetch;
-    oReq.open('GET', SHELTER_API, true);
-    oReq.responseType = 'json';
-    oReq.send();
-    var navControl = new mapboxgl.NavigationControl();
-    map.addControl(navControl, 'bottom-right');
-    map.addControl(new mapboxgl.GeolocateControl({
-        positionOptions: {
-            enableHighAccuracy: true
-        },
-        trackUserLocation: true
-    }));
-
     function onShelterFetch(e) {
         if (!(e && e.target && e.target.response && e.target.response.shelters)) {
             return console.error('error fetching shelter JSON');
@@ -339,6 +360,12 @@
         }
     }
 
+    /**
+     * activates the filter button and reduces the shownShelters to an accumulated filter conditions.
+     *
+     * @param id
+     * @returns {void}
+     */
     function onFilterClick(id) {
         const filterButtonRef = document.getElementById(id);
         const action = id.split('_')[1];
@@ -367,12 +394,20 @@
         }
     }
 
+    /**
+     * reduces the shownShelters relative filter actions
+     *
+     * @param actions
+     * @returns {void}
+     */
     function filterRenderMarkersByActions(actions) {
         const nextSheltersShown = actions.reduce((nextShown, action) => {
             return nextShown = filterReducer(nextShown, action);
         }, shelters);
 
+        const query = document.getElementById('ShelterSearchInput').value;
         populateMarkers(nextSheltersShown);
+        renderSearchResults(searchShelters(query));
     }
 
     function filterReducer(current, action) {
diff --git a/_sass/_shelter-map.scss b/_sass/_shelter-map.scss
index 6a59f5d..834caff 100644
--- a/_sass/_shelter-map.scss
+++ b/_sass/_shelter-map.scss
@@ -38,7 +38,6 @@ $map-height: 100%;
   transform: translateX(-50%);
 }
 
-
 #map-container.shelter-map_container #map {
   min-height: $map-height;
   max-height: $map-height;
@@ -49,12 +48,14 @@ $map-height: 100%;
   top: 10px;
   right: 138px;
   left: 10px;
+  height: 0;
 }
 .shelter-map-controls {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }
+
 // Geolocate Control
 
 .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
@@ -105,6 +106,7 @@ $map-height: 100%;
 
 .filter-viewBox {
   overflow: hidden;
+  width: 80px;
 }
 
 #ShelterFiltersUL {

From dfdfce1428d163a7f738fb032f552f43475b3457 Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Thu, 11 Oct 2018 21:57:06 -0700
Subject: [PATCH 5/7] removed console.logs

---
 _includes/shelter_map.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index 1f2c87a..01bbe75 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -153,7 +153,6 @@
             }
         const matches = buildIndex(sheltersShown).search(query);
         const matchedIds = matches.map(match => match.ref);
-        console.log(matches);
         return shelters.filter(shelter => {
             for (let id of matchedIds) {
                 if (+id === +shelter.id) {
@@ -197,9 +196,7 @@
             zoom: 9
         });
         for ( let shelter of sheltersShown) {
-            console.log(+shelter.id, shelterId);
             if (+shelter.id === +shelterId) {
-                console.log('hit', shelter.id, shelterId);
                 const popup = new mapboxgl.Popup({
                     offset: 25,
                     className: 'shelter-popup'
@@ -225,7 +222,6 @@
         }
         window.shelters = sheltersShown = e.target.response.shelters;
         populateMarkers(sheltersShown);
-        console.log(shelters);
     }
 
     /**

From e43c329966f39bf5a0f1068168d269436622c962 Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Fri, 12 Oct 2018 09:45:11 -0700
Subject: [PATCH 6/7] fixed positioning bug and cleaned up code

---
 _includes/shelter_map.html | 54 +++++++++++++++++++++++++++-----------
 _layouts/home.html         |  8 +++---
 _sass/_shelter-map.scss    | 43 ++++++++++++++++++------------
 3 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index 01bbe75..6883f40 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -31,14 +31,6 @@
         <ul id="SearchResultsList"></ul>
     </div>
 </div>
-
-<script src="https://unpkg.com/lunr/lunr.js"></script>
-
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.js"></script>
-
 <div id="ShelterMapLegend">
     <ul id="LegendDetails" class="legend-details visible">
         <li class="legend-item">
@@ -59,6 +51,12 @@
         </li>
     </ul>
 </div>
+<script src="https://unpkg.com/lunr/lunr.js"></script>
+
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.js"></script>
 
 <script>
     window.shelters = null;
@@ -163,6 +161,13 @@
         });
     }
 
+    /**
+     * puts the search results on the screen
+     *
+     * @param results
+     * @returns {void}
+     */
+
     function renderSearchResults(results) {
         let template = ``;
         const resultsRef = document.getElementById('SearchResultsList');
@@ -314,8 +319,8 @@
      *
      * Note: sh3lters is spelled this way to prevent window object collision.
      *
-     * @param sh3lters
-     * @return void
+     * @param sh3lters : shelter
+     * @return {void}
      */
     function populateMarkers(sh3lters) {
         sheltersShown.forEach(shelter => {
@@ -342,6 +347,11 @@
      * Filters
      */
 
+    /**
+     * shows/hides the filter options
+     *
+     * @returns{void}
+     */
     function toggleFiltersVisibility() {
         const filtersRef = document.getElementById('ShelterFiltersUL');
         const filtersButtonRef = document.getElementById('ShelterFilterToggle');
@@ -359,7 +369,7 @@
     /**
      * activates the filter button and reduces the shownShelters to an accumulated filter conditions.
      *
-     * @param id
+     * @param id : number
      * @returns {void}
      */
     function onFilterClick(id) {
@@ -393,7 +403,7 @@
     /**
      * reduces the shownShelters relative filter actions
      *
-     * @param actions
+     * @param actions : string[]
      * @returns {void}
      */
     function filterRenderMarkersByActions(actions) {
@@ -406,6 +416,14 @@
         renderSearchResults(searchShelters(query));
     }
 
+
+    /**
+     * Used to filter the current showing shelters by a filter action which is the second half of the filters html id
+     *
+     * @param current {sheltersShown}
+     * @param action {string}
+     * @returns sheltersShown
+     */
     function filterReducer(current, action) {
         switch(action) {
             case'All':
@@ -426,7 +444,12 @@
         }
     }
 
-
+    /**
+     * generates a list item for the search results list
+     *
+     * @param props: shelter
+     * @returns {string}
+     */
     function searchResultTemplate(props) {
         return `
             <li class="search-result_item" onclick="moveTo(${props.longitude}, ${props.latitude}, ${props.id})">
@@ -494,7 +517,7 @@
                     ${isPhone(shelter) ? phoneLink : ``}
                     <div class="controls">
                         ${!!shelter.address
-            ? `
+                        ? `
                             <a class="directions button is-link" target="_blank" href="https://www.google.com/maps/dir/current+location/${encodeURIComponent(shelterAddressToString(shelter))}" aria-label="Get directions button">
                                 <svg id="icon-directions" height="100%" viewBox="0 0 32 32" aria-label="directions icon">
                                     <path d="M17 32c-0.072 0-0.144-0.008-0.217-0.024-0.458-0.102-0.783-0.507-0.783-0.976v-15h-15c-0.469 0-0.875-0.326-0.976-0.783s0.129-0.925 0.553-1.123l30-14c0.381-0.178 0.833-0.098 1.13 0.199s0.377 0.749 0.199 1.13l-14 30c-0.167 0.358-0.524 0.577-0.906 0.577zM5.508 14h11.492c0.552 0 1 0.448 1 1v11.492l10.931-23.423-23.423 10.931z"></path>
@@ -502,8 +525,7 @@
                                 <div class="separator"></div>
                                 <label>Directions</label>
                             </a>
-                        `
-            : ``}
+                        ` : ``}
                     </div>
                     ${!!shelter.notes ? note : ``}
                     ${!!shelter.pets_notes ? petsNote : ``}
diff --git a/_layouts/home.html b/_layouts/home.html
index 8428459..835f15f 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -16,14 +16,14 @@
         </div>
     </div>
     <section class="hero is-large">
-
         <div class="container shelter-map">
             <h1 class="title is-centered">Hurricane Michael Response</h1>
-            <div class="map-wrapper">
-                {% include shelter_map.html %}
-            </div>
         </div>
     </section>
+
+    <div class="map-wrapper">
+        {% include shelter_map.html %}
+    </div>
     <main role="main">
         <section class="section">
             <div class="container is-fluid">
diff --git a/_sass/_shelter-map.scss b/_sass/_shelter-map.scss
index 834caff..7be687c 100644
--- a/_sass/_shelter-map.scss
+++ b/_sass/_shelter-map.scss
@@ -1,4 +1,4 @@
-$map-height: 100%;
+$map-height: 90vh;
 
 .shelter-popup > .mapboxgl-popup-content {
   padding: 0;
@@ -21,26 +21,18 @@ $map-height: 100%;
 
 }
 
-.container.shelter-map {
-  //position: relative;
-}
-
 #map-container {
-  overflow: hidden;
-}
+  max-height: $map-height;
 
-.map-wrapper {
-  position: relative;
-  margin: auto;
-  max-width: 100vw;
-  min-width: 90vw;
-  left: 50%;
-  transform: translateX(-50%);
+  #map {
+    height: 100%;
+  }
 }
 
 #map-container.shelter-map_container #map {
-  min-height: $map-height;
-  max-height: $map-height;
+  height: $map-height;
+  margin-bottom: 0;
+
 }
 
 .shelter-map_info {
@@ -56,8 +48,10 @@ $map-height: 100%;
   justify-content: flex-start;
 }
 
+
 // Geolocate Control
 
+
 .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
   margin: 12px 10px 0 0;
 }
@@ -85,8 +79,10 @@ $map-height: 100%;
   transform: translateX(-100%);
 }
 
+
 // Filter Controls
 
+
 #ShelterFilterToggle, #geolocate {
 
   &.active {
@@ -119,10 +115,12 @@ $map-height: 100%;
   max-width: 80px;
   transform: translateY(-200%);
   transition: all ease-in-out 0.4s;
+
   li {
     white-space: normal;
     size: 0.7em;
   }
+
   li, li:focus {
     background: rgba(255, 255, 255, 0.8);
     padding: 10px 10px;
@@ -142,8 +140,11 @@ $map-height: 100%;
   }
 }
 
+
+// Search
+
+
 #ShelterSearch {
-  //position: relative;
   width: 100%;
 
   & .control {
@@ -182,6 +183,10 @@ $map-height: 100%;
   }
 }
 
+
+// Map Legend
+
+
 #ShelterMapLegend {
   max-width: 100vw;
   background: antiquewhite;
@@ -238,6 +243,10 @@ $map-height: 100%;
   }
 }
 
+
+// Responsive
+
+
 @media (max-width: 480px) {
   .mapboxgl-ctrl-top-right div::after {
     display: none;

From ecdfbde7b964ea610eae24f62d1f2ebcfb9b891f Mon Sep 17 00:00:00 2001
From: Rex Beatie <rdev1163@outlook.com>
Date: Fri, 12 Oct 2018 16:08:49 -0700
Subject: [PATCH 7/7] fixed filter bug for toggling without search query

---
 _includes/shelter_map.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/_includes/shelter_map.html b/_includes/shelter_map.html
index 6883f40..5fadc5f 100644
--- a/_includes/shelter_map.html
+++ b/_includes/shelter_map.html
@@ -146,10 +146,11 @@
     function searchShelters(query, fuzz = 1) {
         query = query
             .replace(' ', `~${fuzz} `);
-            if (query[-1] !== ' ') {
-                query = query.concat(`~${fuzz}`);
-            }
-        const matches = buildIndex(sheltersShown).search(query);
+        if (query[-1] !== ' ') {
+            query = query.concat(`~${fuzz}`);
+        }
+        const index = buildIndex(sheltersShown);
+        const matches = index.search(query);
         const matchedIds = matches.map(match => match.ref);
         return shelters.filter(shelter => {
             for (let id of matchedIds) {
@@ -413,10 +414,11 @@
 
         const query = document.getElementById('ShelterSearchInput').value;
         populateMarkers(nextSheltersShown);
-        renderSearchResults(searchShelters(query));
+        if (query.length !== 0) {
+            renderSearchResults(searchShelters(query));
+        }
     }
 
-
     /**
      * Used to filter the current showing shelters by a filter action which is the second half of the filters html id
      *
@@ -517,7 +519,7 @@
                     ${isPhone(shelter) ? phoneLink : ``}
                     <div class="controls">
                         ${!!shelter.address
-                        ? `
+            ? `
                             <a class="directions button is-link" target="_blank" href="https://www.google.com/maps/dir/current+location/${encodeURIComponent(shelterAddressToString(shelter))}" aria-label="Get directions button">
                                 <svg id="icon-directions" height="100%" viewBox="0 0 32 32" aria-label="directions icon">
                                     <path d="M17 32c-0.072 0-0.144-0.008-0.217-0.024-0.458-0.102-0.783-0.507-0.783-0.976v-15h-15c-0.469 0-0.875-0.326-0.976-0.783s0.129-0.925 0.553-1.123l30-14c0.381-0.178 0.833-0.098 1.13 0.199s0.377 0.749 0.199 1.13l-14 30c-0.167 0.358-0.524 0.577-0.906 0.577zM5.508 14h11.492c0.552 0 1 0.448 1 1v11.492l10.931-23.423-23.423 10.931z"></path>