Add simple time slider to map view

src/components/GrampsjsMapTimeSlider.js

@@ -0,0 +1,58 @@
+import {html, css, LitElement} from 'lit'
+import '@material/web/slider/slider.js'
+
+import {sharedStyles} from '../SharedStyles.js'
+import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
+import {fireEvent} from '../util.js'
+
+class GrampsjsMapTimeSlider extends GrampsjsTranslateMixin(LitElement) {
+  static get styles() {
+    return [
+      sharedStyles,
+      css`
+        #container {
+          z-index: 999;
+          background-color: #ffffff;
+          border-radius: 14px;
+          width: calc(100% - 150px);
+          position: absolute;
+          bottom: 25px;
+          height: 28px;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        md-slider {
+          width: 100%;
+        }
+      `,
+    ]
+  }
+
+  render() {
+    return html`
+      <div id="container">
+        <md-slider
+          @change="${this._handleInput}"
+          range
+          labeled
+          min="1500"
+          max="2024"
+          value-start="1924"
+          value-end="2024"
+        ></md-slider>
+      </div>
+    `
+  }
+
+  _handleInput() {
+    const slider = this.renderRoot.querySelector('md-slider')
+    const detail = {start: slider.valueStart, end: slider.valueEnd}
+    fireEvent(this, 'timeslider:change', detail)
+  }
+}
+
+window.customElements.define('grampsjs-map-time-slider', GrampsjsMapTimeSlider)

src/views/GrampsjsViewMap.js

@@ -5,6 +5,7 @@ import {GrampsjsView} from './GrampsjsView.js'
 import '../components/GrampsjsMap.js'
 import '../components/GrampsjsMapMarker.js'
 import '../components/GrampsjsMapSearchbox.js'
+import '../components/GrampsjsMapTimeSlider.js'
 import '../components/GrampsjsPlaceBox.js'
 import {apiGet, getMediaUrl} from '../api.js'
 import '@material/mwc-textfield'
@@ -76,6 +77,8 @@ export class GrampsjsViewMap extends GrampsjsView {
       _valueSearch: {type: String},
       _bounds: {type: Object},
       _placeFilters: {type: Object},
+      _dateRangeStart: {type: Number},
+      _dateRangeEnd: {type: Number},
     }
   }
 
@@ -90,6 +93,8 @@ export class GrampsjsViewMap extends GrampsjsView {
     this._valueSearch = ''
     this._bounds = {}
     this._placeFilters = {}
+    this._dateRangeStart = -1
+    this._dateRangeEnd = -1
   }
 
   renderContent() {
@@ -119,6 +124,10 @@ export class GrampsjsViewMap extends GrampsjsView {
         value="${this._valueSearch}"
         >${this._renderPlaceDetails()}</grampsjs-map-searchbox
       >
+      <grampsjs-map-time-slider
+        @timeslider:change="${this._handleTimeSliderChange}"
+        .strings="${this.strings}"
+      ></grampsjs-map-time-slider>
     `
   }
 
@@ -154,6 +163,11 @@ export class GrampsjsViewMap extends GrampsjsView {
     }
   }
 
+  _handleTimeSliderChange(event) {
+    this._dateRangeStart = event.detail.start
+    this._dateRangeEnd = event.detail.end
+  }
+
   _handlePlaceFilterChanged(event) {
     this._placeFilters = {...event.detail}
     this._applyPlaceFilter()