Add OpenHistoricalMap layer to maps

lang/en.json

@@ -170,5 +170,6 @@
   "simple": "simple",
   "Are you sure?": "Are you sure?",
   "This action cannot be undone.": "This action cannot be undone.",
-  "Yes": "Yes"
+  "Yes": "Yes",
+  "Toggle time filter for places": "Toggle time filter for places"
 }

src/components/GrampsjsMap.js

@@ -18,7 +18,7 @@ const defaultConfig = {
   leafletZoomOffset: 0,
   glStyle: 'https://www.openhistoricalmap.org/map-styles/main/main.json',
   glAttribution:
-    '<a href="https://www.openhistoricalmap.org/copyright">OpenHistoricalMap</a>',
+    '<a href="https://www.openhistoricalmap.org/">OpenHistoricalMap</a>',
 }
 
 class GrampsjsMap extends LitElement {
@@ -162,7 +162,13 @@ class GrampsjsMap extends LitElement {
       filterByDecimalYear(this._gl.getMaplibreMap(), this.year)
       return
     }
-    if (this._map !== undefined) {
+    if (
+      this._map !== undefined &&
+      (changed.has('latitude') ||
+        changed.has('longitude') ||
+        changed.has('mapid') ||
+        changed.has('zoom'))
+    ) {
       if (this.latMin === 0 && this.latMax === 0) {
         this._map.setZoom(this.zoom)
         // eslint-disable-next-line new-cap

src/components/GrampsjsMapTimeSlider.js

@@ -11,6 +11,7 @@ import {sharedStyles} from '../SharedStyles.js'
 import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
 import {fireEvent} from '../util.js'
 import {renderIconSvg} from '../icons.js'
+import './GrampsjsTooltip.js'
 
 class GrampsjsMapTimeSlider extends GrampsjsTranslateMixin(LitElement) {
   static get styles() {
@@ -80,12 +81,14 @@ class GrampsjsMapTimeSlider extends GrampsjsTranslateMixin(LitElement) {
     return {
       value: {type: Number},
       span: {type: Number},
+      min: {type: Number},
       filterMap: {type: Boolean},
     }
   }
 
   constructor() {
     super()
+    this.min = 1500
     this.value = new Date().getFullYear() - 50
     this.span = 50
     this.filterMap = false
@@ -98,7 +101,7 @@ class GrampsjsMapTimeSlider extends GrampsjsTranslateMixin(LitElement) {
           @input="${this._handleInput}"
           ?disabled="${!this.filterMap && this.span < 0}"
           labeled
-          min="1500"
+          min="${this.min}"
           max="${new Date().getFullYear()}"
           value="${this.value}"
         ></md-slider>
@@ -116,23 +119,30 @@ class GrampsjsMapTimeSlider extends GrampsjsTranslateMixin(LitElement) {
             @click="${this._handleSpanClick}"
             ?disabled="${this.span < 0}"
           >
+            <grampsjs-tooltip for="span-button" .strings="${this.strings}"
+              >${this._('Span')}</grampsjs-tooltip
+            >
             <md-icon
               >${renderIconSvg(mdiCog, 'var(--md-sys-color-primary)')}</md-icon
             >
           </md-icon-button>
         </div>
         <md-switch
+          id="filter-switch"
           @input="${this._handleSwitch}"
           ?selected="${this.span > 0}"
         ></md-switch>
+        <grampsjs-tooltip for="filter-switch" .strings="${this.strings}"
+          >${this._('Toggle time filter for places')}</grampsjs-tooltip
+        >
       </div>
       <md-menu
         positioning="fixed"
         id="span-menu"
         anchor="span-button"
         skip-restore-focus
       >
-        ${[0, 10, 25, 50, 100].map(
+        ${[1, 10, 25, 50, 100].map(
           years => html`
             <md-menu-item @click="${() => this._handleSpanYearsClick(years)}">
               <div slot="headline">&pm;&nbsp;${years}</div>

src/util.js

@@ -706,6 +706,38 @@ export function filterByDate(map, dateP) {
   filterByDecimalYear(map, decimalYear)
 }
 
+export function getGregorianYears(date) {
+  if (date === undefined || dateIsEmpty(date)) {
+    return [undefined, undefined]
+  }
+
+  let year1 = date.dateval[2]
+  let year2 = date.dateval[6] ?? year1
+
+  // handle different calendars.
+  // we appoximate to +/- 1 year, so we ignore the difference
+  // between Gregorian, Julian, and Swedish, and use simple
+  // linear approximations to the Islamic, Persian, and Hebrew calendars.
+  const CAL_HEBREW = 2
+  const CAL_FRENCH = 3
+  const CAL_PERSIAN = 4
+  const CAL_ISLAMIC = 5
+  if (date.calendar === CAL_HEBREW) {
+    year1 -= 3760
+    year2 -= 3760
+  } else if (date.calendar === CAL_FRENCH) {
+    year1 += 1791
+    year2 += 1791
+  } else if (date.calendar === CAL_PERSIAN) {
+    year1 += 621
+    year2 += 621
+  } else if (date.calendar === CAL_ISLAMIC) {
+    year1 = Math.floor(0.97022 * year1 + 621.565)
+    year2 = Math.floor(0.97022 * year2 + 621.565)
+  }
+  return [year1, year2]
+}
+
 export function isDateBetweenYears(date, yearMin, yearMax) {
   const MOD_BEFORE = 1
   const MOD_AFTER = 2
@@ -722,8 +754,10 @@ export function isDateBetweenYears(date, yearMin, yearMax) {
     return false
   }
 
-  let year1 = date.dateval[2]
-  let year2 = date.dateval[6] ?? year1
+  let [year1, year2] = getGregorianYears(date)
+  if (year1 === undefined) {
+    return false
+  }
 
   if (date.modifier === MOD_BEFORE || date.modifier === MOD_TO) {
     year1 -= RANGE_BEFORE

src/views/GrampsjsViewMap.js

@@ -8,7 +8,7 @@ import '../components/GrampsjsMapSearchbox.js'
 import '../components/GrampsjsMapTimeSlider.js'
 import '../components/GrampsjsPlaceBox.js'
 import {apiGet, getMediaUrl} from '../api.js'
-import {isDateBetweenYears} from '../util.js'
+import {isDateBetweenYears, getGregorianYears} from '../util.js'
 import '@material/mwc-textfield'
 
 // This is used for initial map center in absence of places
@@ -82,6 +82,7 @@ export class GrampsjsViewMap extends GrampsjsView {
       _year: {type: Number},
       _yearSpan: {type: Number},
       _currentLayer: {type: String},
+      _minYear: {type: Number},
     }
   }
 
@@ -100,6 +101,7 @@ export class GrampsjsViewMap extends GrampsjsView {
     this._year = -1
     this._yearSpan = -1
     this._currentLayer = ''
+    this._minYear = 1500
   }
 
   renderContent() {
@@ -132,6 +134,7 @@ export class GrampsjsViewMap extends GrampsjsView {
         >${this._renderPlaceDetails()}</grampsjs-map-searchbox
       >
       <grampsjs-map-time-slider
+        min="${this._minYear}"
         ?filterMap="${this._currentLayer === 'OpenHistoricalMap'}"
         @timeslider:change="${this._handleTimeSliderChange}"
         .strings="${this.strings}"
@@ -389,12 +392,25 @@ export class GrampsjsViewMap extends GrampsjsView {
     if ('data' in data) {
       this.error = false
       this._dataEvents = data.data.filter(event => event.place)
+      this._minYear = this._getMinYear()
     } else if ('error' in data) {
       this.error = true
       this._errorMessage = data.error
     }
   }
 
+  _getMinYear() {
+    const years = this._dataEvents
+      ?.filter(event => event.place)
+      ?.map(event => getGregorianYears(event.date)?.[0])
+      ?.filter(y => y !== undefined)
+    let minYear = Math.min(...years)
+    const lastYear = new Date().getFullYear() - 1
+    minYear = Math.min(minYear, lastYear)
+    minYear = Math.max(minYear, 1) // disallow negative
+    return minYear
+  }
+
   async _fetchDataLayers() {
     const rules = {
       rules: [