`,
`
`,
- `
${
+ `
${
bigTicks[i].label
- }${first ? `
${unit}` : ''}${unit}` : ''}
`,
`
`,
].join('\n')
)
first = false
+ TimeUI._tickTippies.push(
+ tippy(`#mmgisTimeUITickLabel_${i}`, {
+ content: moment(
+ TimeUI.addOffset(new Date(bigTicks[i].ts))
+ ).format(FORMAT),
+ placement: 'top',
+ theme: 'blue',
+ })
+ )
}
}
+
+ TimeUI._remakeTimeSlider(true)
},
}
diff --git a/src/essence/Basics/Formulae_/Formulae_.js b/src/essence/Basics/Formulae_/Formulae_.js
index a957f880..da42584a 100644
--- a/src/essence/Basics/Formulae_/Formulae_.js
+++ b/src/essence/Basics/Formulae_/Formulae_.js
@@ -59,6 +59,9 @@ var Formulae_ = {
range[0]
)
},
+ getBase64Transparent256Tile: function () {
+ return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAABFUlEQVR42u3BMQEAAADCoPVP7WsIoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAMBPAAB2ClDBAAAAABJRU5ErkJggg=='
+ },
monthNumberToName: function (monthNumber) {
switch (monthNumber) {
case 0:
@@ -100,6 +103,23 @@ var Formulae_ = {
let currentDate
switch (unit) {
+ case 'decade':
+ currentDate = new Date(
+ Date.UTC(Math.floor(startDate.getFullYear() / 10) * 10)
+ )
+ while (currentDate < endDate) {
+ currentDate.setUTCFullYear(
+ Math.floor(currentDate.getUTCFullYear() / 10) * 10 + 10
+ )
+ timeStarts.push({
+ ts: Date.parse(currentDate),
+ label:
+ Math.floor(currentDate.getUTCFullYear() / 10) * 10 +
+ 's',
+ })
+ }
+
+ break
case 'year':
currentDate = new Date(Date.UTC(startDate.getFullYear()))
while (currentDate < endDate) {
@@ -121,7 +141,7 @@ var Formulae_ = {
ts: Date.parse(currentDate),
label: Formulae_.monthNumberToName(
currentDate.getUTCMonth()
- ),
+ ).toUpperCase(),
})
}
break
diff --git a/src/essence/Basics/Layers_/LayerConstructors.js b/src/essence/Basics/Layers_/LayerConstructors.js
index b2a68779..247c4fc7 100644
--- a/src/essence/Basics/Layers_/LayerConstructors.js
+++ b/src/essence/Basics/Layers_/LayerConstructors.js
@@ -219,6 +219,28 @@ export const constructVectorLayer = (
}
layerObj.shape = 'directional_circle'
}
+ /*
+ const markerXY = Map_.map.latLngToLayerPoint(latlong)
+ const markerLatLong = Map_.map.containerPointToLatLng([
+ markerXY.x,
+ markerXY.y,
+ ])
+ const pixelBelowMarkerLatLong = Map_.map.containerPointToLatLng(
+ [markerXY.x, markerXY.y + 1]
+ )
+ console.log(
+ latlong,
+ markerXY,
+ markerLatLong,
+ pixelBelowMarkerLatLong,
+ F_.bearingBetweenTwoLatLngs(
+ pixelBelowMarkerLatLong.lat,
+ pixelBelowMarkerLatLong.lng,
+ markerLatLong.lat,
+ markerLatLong.lng
+ )
+ )
+ */
}
switch (layerObj.shape) {
diff --git a/src/essence/Basics/Layers_/leaflet-tilelayer-middleware.js b/src/essence/Basics/Layers_/leaflet-tilelayer-middleware.js
index 262993d4..a00e2542 100644
--- a/src/essence/Basics/Layers_/leaflet-tilelayer-middleware.js
+++ b/src/essence/Basics/Layers_/leaflet-tilelayer-middleware.js
@@ -11,6 +11,8 @@
https://github.com/xtk93x/Leaflet.TileLayer.ColorFilter
*/
+import F_ from '../../Basics/Formulae_/Formulae_'
+
var colorFilterExtension = {
intialize: function (url, options) {
L.TileLayer.prototype.initialize.call(this, url, options)
@@ -93,6 +95,37 @@ var colorFilterExtension = {
this._container.style['mix-blend-mode'] = this.colorBlend()
}
},
+ // Reduces tile flicker. This and refresh() from https://github.com/Leaflet/Leaflet/issues/6659#issuecomment-813328622
+ _refreshTileUrl: function (tile, url) {
+ //use a image in background, so that only replace the actual tile, once image is loaded in cache!
+ let img = new Image()
+ img.onload = function (e) {
+ L.Util.requestAnimFrame(function () {
+ tile.el.src = url
+ tile.el.style.opacity = 1
+ })
+ }
+ img.onerror = function (e) {
+ tile.el.src = F_.getBase64Transparent256Tile()
+ tile.el.style.opacity = 0
+ }
+ img.src = url
+ },
+ refresh: function () {
+ if (this._map == null) return
+
+ for (let key in this._tiles) {
+ const tile = this._tiles[key]
+ if (tile.current && tile.active) {
+ const oldsrc = tile.el.src
+ const newsrc = this.getTileUrl(tile.coords)
+ if (oldsrc != newsrc) {
+ //L.DomEvent.off(tile, 'load', this._tileOnLoad); ... this doesnt work!
+ this._refreshTileUrl(tile, newsrc)
+ }
+ }
+ }
+ },
}
var wmsExtension = {
@@ -257,5 +290,7 @@ L.tileLayer.colorFilter = function (url, options) {
}
url = url.replace(/{t}/g, '_time_')
- return new L.TileLayer.ColorFilter(url, options)
+ const tileLayer = new L.TileLayer.ColorFilter(url, options)
+
+ return tileLayer
}
diff --git a/src/essence/Basics/Map_/Map_.js b/src/essence/Basics/Map_/Map_.js
index 1a1e0271..15f8e423 100644
--- a/src/essence/Basics/Map_/Map_.js
+++ b/src/essence/Basics/Map_/Map_.js
@@ -860,6 +860,8 @@ async function makeLayer(layerObj, evenIfOff, forceGeoJSON) {
continuousWorld: true,
reuseTiles: true,
bounds: bb,
+ timeEnabled:
+ layerObj.time != null && layerObj.time.enabled === true,
time: typeof layerObj.time === 'undefined' ? '' : layerObj.time.end,
compositeTile:
typeof layerObj.time === 'undefined'