search

socib / Leaflet.TimeDimension

Add time dimension capabilities on a Leaflet map.
MIT License
435 stars 138 forks source link

Replace ISO date format with YYYY-MM-DD #167

Closed prasanjitdash closed 5 years ago

prasanjitdash commented 5 years ago

Hi Folks, it seems I'm stuck with a known issue and can't figure out.

Can TimeDimension read tiles with the template given below from NASA EPSG 4326 WMTS: var nasagibs_epsg4326_template = '//gibs-{s}.earthdata.nasa.gov/wmts/epsg4326/best/' +'{layer}/default/{time}/{tileMatrixSet}/{z}/{y}/{x}.';

Essentially I need a return with YYYY-MM-DD for {time}, but currently its returning ISO UTC times with THH:MM:SS:000

My main js runs on document.ready() mode. As shown in examples 11, 12, I tried using L.Control.TimeDimensionCustom, but Chrome debugger shows 'Uncaught TypeError'. Seems like the trouble is while using L.Control.TimeDimensionCustom within a document.ready() function.

Has anyone a working example using this to retrieve YYYY-MM-DD tiles using a document.ready () call? Thanks

An example call

appended in the of the html file **$(document).ready(function() {** console.log('Document Ready!'); var map = L.map('mapdiv', { timeDimension: true, timeDimensionOptions: { timeInterval: "2019-01-01" + "/" + "2019-01-29", period: "P1D" }, timeDimensionControl: true, timeDimensionControlOptions: { timeSteps: 1, loopButton: true, limitSliders: true }, crs: L.CRS.EPSG4326, center: [37.0, -55], // East Coast zoom: 3 }); /* add some baseLayer here */ /* read data */ var proxy = 'server/proxy.php'; var testLayer = L.tileLayer(nasagibs_epsg4326_template + 'png', { layer: 'MODIS_Aqua_CorrectedReflectance_TrueColor', tileMatrixSet: '1km', //time: '2019-02-20', tileSize: 512, subdomains: 'abc', }); var testTimeLayer = L.timeDimension.layer(testLayer, { proxy: proxy, updateTimeDimension: false, }); testTimeLayer.addTo(map); L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({ _getDisplayDateFormat: function(date) { return date.format("dS mmm yyyy"); } }); var timeDimensionControl = new L.Control.TimeDimensionCustom({ playerOptions: { buffer: 1, minBufferReady: -1 } }); map.addControl(this.timeDimensionControl); **});**
prasanjitdash commented 5 years ago

Folks, never mind. I just called map_init separately before the document.ready function, and it works.

Here is the snippet if someone else is looking for. I am closing the issue. This is a very powerful plugin for leaflet and if the full potential can be understood, it will be useful in many ways. Thanks

// Extract date range from OV date files var startDate = "2019-01-01" var endDate = "2019-03-01" // Initiate map area map = L.map('mapdiv', { fullscreenControl: true, fullscreenControlOptions: { position: 'topright', title: 'Distraction free', titleCancel: 'Exit fullscreen' }, timeDimension: true, timeDimensionOptions: { timeInterval: startDate + "/" + endDate, period: "P1D", currentTime: currentTime }, timeDimensionControl: false, timeDimensionControlOptions: { autoPlay: true, loopButton: true, timeSteps: 1, playReverseButton: true, limitSliders: true, playerOptions: { buffer: 0, transitionTime: 250, loop: true, } }, crs: L.CRS.EPSG4326, center: [37.0, -55], // East Coast zoom: 3, minZoom: 1, maxZoom: 6, zoomControl: false, attributionControl: false, zoomSnap: 0.1, zoomDelta: 0.1, continuousWorld: false }); L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({ _getDisplayDateFormat: function (date) { return date.format("dd mmm yyyy"); } }); var timeDimensionControl = new L.Control.TimeDimensionCustom({ autoPlay: false, loopButton: true, timeSteps: 1, playReverseButton: true, limitSliders: true, playerOptions: { buffer: 1, minBufferReady: -1, } }); map.addControl(this.timeDimensionControl); ....