Adds a new menu item "Favorite Locations" in the navigation.

static/js/custom.js.example

@@ -11,6 +11,13 @@ $(function () {
     const upscalePokemon = false // Enable upscaling of certain Pokemon (upscaledPokemon and notify list). Default: false.
     const upscaledPokemon = [] // Add Pokémon IDs separated by commas (e.g. [1, 2, 3]) to upscale icons. Default: [].
 
+    // Add predefined buttons for favorite location. Default: [].
+    const favoriteLocations = [
+        {
+            'Central Park (NY)': {lat: 40.7828647, lng: -73.9653551, zoom: 16, deletable: false}
+        }
+    ] 
+
     // Google Analytics property ID. Leave empty to disable.
     // Looks like 'UA-XXXXX-Y'.
     const analyticsKey = ''
@@ -83,6 +90,10 @@ $(function () {
     Store.set('showLocationMarker', showLocationMarker)
     Store.set('isLocationMarkerMovable', isLocationMarkerMovable)
 
+    if (Store.get('favoriteLocations').length === 0) {
+        Store.set('favoriteLocations', favoriteLocations)
+    }
+
     if (typeof window.orientation !== 'undefined' || isMobileDevice()) {
         Store.set('maxClusterZoomLevel', maxClusterZoomLevelMobile)
         Store.set('clusterZoomOnClick', clusterZoomOnClickMobile)

static/js/map.common.js

@@ -1065,6 +1065,10 @@ var StoreOptions = {
     'isSearchMarkerMovable': {
         default: false,
         type: StoreTypes.Boolean
+    },
+    'favoriteLocations': {
+        default: [],
+        type: StoreTypes.JSON
     }
 }
 

static/js/map.js

@@ -509,6 +509,134 @@ function initSidebar() {
     }
 
     $('#pokemon-icon-size').val(Store.get('iconSizeModifier'))
+
+    $('#add-favorite-location-button').on('click', function () {
+        var loc = map.getCenter()
+        var zoom = map.getZoom()
+        var name = $('#add-favorite-location-input').val()
+        addFarvoritLocationToSettings(name, loc.lat(), loc.lng(), zoom)
+        $('#add-favorite-location-input').val('')
+    })
+
+    var searchLocationInput = document.getElementById('search-favorite-location-input')
+    if (searchLocationInput) {
+        var googleSearchBox = new google.maps.places.Autocomplete(searchLocationInput)
+
+        googleSearchBox.addListener('place_changed', function () {
+            var place = googleSearchBox.getPlace()
+
+            if (!place.geometry) {
+                return
+            }
+
+            var loc = place.geometry.location
+            centerMap(loc.lat(), loc.lng(), 16)
+        })
+    }
+}
+
+/**
+ * Favorite-location
+ * first run load locations from settings / localStorage
+*/
+function initFavoriteLocations() {
+    var favoriteLocationSettings = Store.get('favoriteLocations')[0]
+
+    if (!favoriteLocationSettings) {
+        return
+    }
+
+    Object.keys(favoriteLocationSettings).forEach(function (locationName) {
+        addFavoriteLocationToList(locationName,
+                                 favoriteLocationSettings[locationName]['lat'],
+                                 favoriteLocationSettings[locationName]['lng'],
+                                 favoriteLocationSettings[locationName]['zoom'],
+                                 favoriteLocationSettings[locationName]['deletable']
+                                )
+    })
+}
+
+/**
+ * Favorite-location
+ * add buttons to the navigation
+ *
+ * @param String name
+ * @param long lat – degree of latitude
+ * @param long lng – degree of longitude
+ * @param int zoom – zoomLevel
+ * @param boolean withDeleteButton (optional – default = true)
+*/
+function addFavoriteLocationToList(name, lat, lng, zoom, withDeleteButton = true) {
+    var li = document.createElement('li')
+    li.setAttribute('name', name)
+
+    var favoriteLocationButton = document.createElement('button')
+    if (!withDeleteButton) { favoriteLocationButton.setAttribute('class', 'favorite-location-no-delete-button') }
+    favoriteLocationButton.innerHTML = name
+    favoriteLocationButton.addEventListener('click', function () {
+        centerMap(lat, lng, parseInt(zoom))
+    })
+    li.appendChild(favoriteLocationButton)
+
+    if (withDeleteButton) {
+        var favoriteLocationDeleteButton = document.createElement('button')
+        favoriteLocationDeleteButton.setAttribute('class', 'delete-favorite-location-button')
+        favoriteLocationDeleteButton.innerHTML = '<span class="fa fa-times"></span>'
+        favoriteLocationDeleteButton.addEventListener('click', function () {
+            confirm('Are you sure to delete "' + name + '"?') ? deleteFavoriteLocation(li) : false
+        })
+        li.appendChild(favoriteLocationDeleteButton)
+    }
+
+    var favoriteLocationListElement = document.getElementById('favorite-location-ul')
+    favoriteLocationListElement.appendChild(li)
+}
+
+/**
+ * Favorite-location
+ * delete location from localStorage and navigation
+ *
+ * @param HTMLelement li
+ */
+function deleteFavoriteLocation(li) {
+    var favoriteLocationSettings = Store.get('favoriteLocations')
+    delete favoriteLocationSettings[0][li.getAttribute('name')]
+    Store.set('favoriteLocations', favoriteLocationSettings)
+
+    var favoriteLocationListElement = document.getElementById('favorite-location-ul')
+    favoriteLocationListElement.removeChild(li)
+    toastr.success('"' + li.getAttribute('name') + '" is deleted', 'Favorite location', {closeButton: true, timeOut: 2500})
+}
+
+/**
+ * Favorite-location
+ * save location in the settings / localStorage and add it in the navigation
+ *
+ * @param String name
+ * @param long lat – degree of latitude
+ * @param long lng – degree of longitude
+ * @param int zoom – zoomLevel
+ * @param boolean withDeleteButton (optional – default = true)
+*/
+function addFarvoritLocationToSettings(name, lat, lng, zoom, withDeleteButton = true) {
+    var favoriteLocationSettings = Store.get('favoriteLocations')
+
+    if (!name || name.length === 0 || !name.trim() || /^\s*$/.test(name)) {
+        toastr.error('Please enter a valid name', 'Failed to create the view', {closeButton: true})
+        return
+    }
+
+    if (favoriteLocationSettings.length === 0) {
+        favoriteLocationSettings[0] = Object.create(Object.prototype)
+    } else if (favoriteLocationSettings[0][name] !== undefined) {
+        toastr.error('Name is already used', 'Failed to create the view', {closeButton: true})
+        return
+    }
+
+    favoriteLocationSettings[0][name] = {'lat': lat, 'lng': lng, 'zoom': zoom, 'deletable': withDeleteButton}
+    Store.set('favoriteLocations', favoriteLocationSettings)
+    addFavoriteLocationToList(name, lat, lng, zoom, withDeleteButton)
+    toastr.success('New view has been saved', 'Favorite location', {closeButton: true, timeOut: 2000})
 }
 
 function getTypeSpan(type) {
@@ -2741,6 +2869,8 @@ $(function () {
         })
 
         $selectLocationIconMarker.val(Store.get('locationMarkerStyle')).trigger('change')
+
+        initFavoriteLocations()
     })
 })
 
@@ -3132,6 +3262,34 @@ $(function () {
         })
     }
 
+    // Favorite-location
+    // switch to display "Add this view"
+    $('#add-favorite-location-switch').change(function () {
+        var options = {
+            'duration': 500
+        }
+        var wrapper = $('#add-favorite-location-wrapper')
+        if (this.checked) {
+            wrapper.show(options)
+        } else {
+            wrapper.hide(options)
+        }
+    })
+
+    // Favorite-location
+    // switch to display "search location"
+    $('#search-favorite-location-switch').change(function () {
+        var options = {
+            'duration': 500
+        }
+        var wrapper = $('#search-favorite-location-wrapper')
+        if (this.checked) {
+            wrapper.show(options)
+        } else {
+            wrapper.hide(options)
+        }
+    })
+
     // Initialize dataTable in statistics sidebar
     //   - turn off sorting for the 'icon' column
     //   - initially sort 'name' column alphabetically

static/sass/layout/_nav.scss

@@ -138,4 +138,49 @@
     .fa-fw {
       margin: 0px 5px 0px 0px;
     }
+
+    #favorite-location-ul {
+      list-style: disc;
+      padding-left: 0!important;
+
+      > li {
+	       list-style: none;
+         width: 50%;
+         float: left;
+         padding-left: 0;
+
+      > .delete-favorite-location-button {
+	       background-color: red;
+	       color: #fff;
+	       width: 14.2%;
+	       margin-left: .8%;
+      }
+
+      > button {
+          width: 85%;
+          overflow: hidden;
+          font-size: 13px;
+          font-weight: normal;
+          margin-top: .5em;
+
+          &.favorite-location-no-delete-button {
+             width: 100%;
+          }
+        }
+      }
+
+      > li:nth-child(2n) {
+        padding-left: .5em;
+      }
+    }
+
+    #add-favorite-location-input {
+      width: 80%;
+      float: left;
+    }
+
+    #add-favorite-location-button {
+      width: 20%;
+      margin-top: 0;
+    }
   }

templates/map.html

@@ -427,6 +427,46 @@ <h3>Use Pokémon cries</h3>
               </div>
           </div>
             {% endif %}
+
+          <h3><i class="fa fa-binoculars fa-fw"></i>Favorite locations</h3>
+          <div>
+            <div class="form-control switch-container">
+              <h3>Search location</h3>
+              <div class="onoffswitch">
+                <input id="search-favorite-location-switch" type="checkbox" name="search-favorite-location-switch" class="onoffswitch-checkbox">
+                <label class="onoffswitch-label" for="search-favorite-location-switch">
+                  <span class="switch-label" data-on="On" data-off="Off"></span>
+                  <span class="switch-handle"></span>
+                </label>
+              </div>
+            </div>
+            <div class="form-control switch-container" id="search-favorite-location-wrapper" style="display:none">
+              <div class="form-control">
+                <input id="search-favorite-location-input" type="text" name="search-favorite-location-input" placeholder="Street or City" autocomplete="off">
+              </div>
+            </div>
+            <div class="form-control switch-container">
+              <h3>Save this view</h3>
+              <div class="onoffswitch">
+                <input id="add-favorite-location-switch" type="checkbox" name="add-favorite-location-switch" class="onoffswitch-checkbox">
+                <label class="onoffswitch-label" for="add-favorite-location-switch">
+                  <span class="switch-label" data-on="On" data-off="Off"></span>
+                  <span class="switch-handle"></span>
+                </label>
+              </div>
+            </div>
+            <div class="form-control switch-container" id="add-favorite-location-wrapper" style="display:none">
+              <div class="form-control">
+                <input id="add-favorite-location-input" type="text" name="add-favorite-location-input" placeholder="Location Name" maxlength="14"/>
+                <button id="add-favorite-location-button" type="submit"><span class="fa fa-save"></span></button>
+              </div>
+            </div>
+            <div class="form-control switch-container">
+              <ul id="favorite-location-ul">
+              </ul>
+            </div>
+          </div>
+
           <h3><i class="fa fa-map-o fa-fw"></i>Style Settings</h3>
           <div>
             <div class="form-control switch-container">