diff --git a/static/js/custom.js.example b/static/js/custom.js.example
index 2fba5fbb50..5fd9451e44 100644
--- a/static/js/custom.js.example
+++ b/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)
diff --git a/static/js/map.common.js b/static/js/map.common.js
index 9551216ac8..f02b3a2e10 100644
--- a/static/js/map.common.js
+++ b/static/js/map.common.js
@@ -1065,6 +1065,10 @@ var StoreOptions = {
'isSearchMarkerMovable': {
default: false,
type: StoreTypes.Boolean
+ },
+ 'favoriteLocations': {
+ default: [],
+ type: StoreTypes.JSON
}
}
diff --git a/static/js/map.js b/static/js/map.js
index 8bc1f00fb5..013a8625e8 100644
--- a/static/js/map.js
+++ b/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 = ''
+ 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
diff --git a/static/sass/layout/_nav.scss b/static/sass/layout/_nav.scss
index 9d2fd7fc15..83ede5606c 100644
--- a/static/sass/layout/_nav.scss
+++ b/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;
+ }
}
diff --git a/templates/map.html b/templates/map.html
index 17a0c4f6e6..126939ce59 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -427,6 +427,46 @@ Use Pokémon cries
{% endif %}
+
+ Favorite locations
+
+
Style Settings