ol-plus - TimeDimensionTile


What is ol-plus?

ol-plus is the javascript library build for openlayers which has multiple extension like interactive layerswitcher, TimeDimensionTile layer, generating EDALSLD and so on.

Install the ol-plus package:

npm i ol-plus

TimeDimensionTile layer

TimeDimensionLayer is class derived from LayerGroup Class of Openlayers. This Tile layer is specially used for rendering the THREDDS WMS Layers and ncWMS Layer.

Before using the library you need to know some things about the properties and respective use

showlegend:(boolean value) to show the legend on top of map

legendPath:(string) Complete URL path of the legendPath which is generated for the respective server.

timeSliderSize:(string) if you want small slide size use 'small' otherwise leave blank.

alignTimeSlider:(string) alignment of timeslider control. Options : left, right and center.

ThreddsDataServerVersion:This is very important make sure which version of THREDDS Data server are you using. For example if you are using TDS version 4.6.5 then you should use only 4. Similarly, if you are using TDS version 5.4.0 then you should use only 5.

if you are using ncWMS

ncWMS Version 1.x.x : use only 4 in ThreddsDataServerVersion

ncWMS Version 2.x.x : use only 5 in ThreddsDataServerVersion

Example

import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import TimeDimensionTile from "ol-plus/layer/TimeDimensionTile";
import {getCenter} from "ol/extent";
import {transformExtent} from "ol/proj";

async function initMap() {
    var extent = transformExtent([60, 0, 100, 60], 'EPSG:4326', 'EPSG:3857');

    var layers = [
        new TileLayer({
            source: new OSM({attributions: [],}),
        })
    ];

    var map = new Map({
        layers: layers,
        target: 'map', // HTML Element id
        view: new View({
            center: getCenter(extent),
            zoom: 4,
        }),
    });


    var TDL = new TimeDimensionTile({
        id: 'PRMSL_meansealevel',
        title: 'PRMSL Mean Sea Level',
        visible: true,
        opacity: 1,
        legendPath: 'http://tethys.icimod.org:8080/thredds/wms/HIWAT/2022031612/hkhControl_202203161200_latlon.nc?REQUEST=GetLegendGraphic&PALETTE=default&LAYERS=PRMSL_meansealevel&STYLES=default-scalar/default&COLORSCALERANGE=995.4,1026',
        showlegend: true,
        ThreddsDataServerVersion: "5",
        timeSliderSize: 'small',
        alignTimeSlider: 'left',
        source: {
            url: 'http://tethys.icimod.org:8080/thredds/wms/HIWAT/2022031612/hkhControl_202203161200_latlon.nc',
            params: {
                'VERSION': '1.1.1',
                TRANSPARENT: 'TRUE',
                STYLES: 'default-scalar/default',
                LAYERS: 'PRMSL_meansealevel',
                COLORSCALERANGE: '995.4,1026',
            }
        },
    });

    await TDL.init().then(() => {
            map.addThreddsLayer(TDL);
        },
        (error) => console.error(error));
}

initMap();

Leave your comment