Sample Code

${ tab }
content_copy

              <div id="map"></div>
              <div class="container">
              <div class="menu">
                  <label> Parameters</label>
                  <select id="service">
                      <option value="awifs_fcc" selected>AWiFS FCC</option>
                      <option value="awifs_ndvi">AWiFS NDVI</option>
                      <option value="annual_insolation">Annual Insolation</option>
                      <option value="modis_ndvi">MODIS NDVI</option>
                      <option value="sentinel2_fcc">Sentinel-2 FCC</option>
                      <option value="WRF">WRF Solar Insolation Forecast</option>
                      <option value="NDVI">Sentinel-2 NDVI</option>
                      <option value="NDWI">sentinel2 NDWI</option>
                      <option value="NBR">sentinel2 NBR</option>
                      <option value="NDSI">sentinel2 NDSI</option>
                      <option value="sentinel2_NDSI_CLOUD_MASK">Sentinel-2 NDSI(Cloudfree)</option>
                      <option value="MNDWI">sentinel2 MNDWI</option>
                      <option value="NDMI">sentinel2 NDMI</option>
                      <option value="sentinel2_NDMI_CLOUD_MASK">Sentinel-2 NDMI(Cloudfree)</option>
                      <option value="SAVI">sentinel2 SAVI</option>
                      <option value="ARVI">sentinel2 ARVI</option>
                      <option value="BVI">sentinel2 BVI</option>
                      <option value="EVI">sentinel2 EVI</option>
                      <option value="sentinel2_CLOUD_MASK">sentinel2 CLOUD MASK</option>
                      <option value="sentinel2_CLOUD_FREE">Sentinel2 CLOUD FREE</option>
                  </select>
                  <label> From Date </label>
                  <select id="fromTime"></select>
                  <label> To Date </label>
                  <select id="toTime"></select>
              </div>
              </div>
              <script src="main.js"></script>
              </body>
              </html>
                    
                

                        .container {
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                
                        }
                
                        h2 {
                            margin-bottom: 0;
                        }
                
                        #map {
                            width: auto;
                            height: 500px;
                            padding: 10px;
                            background: #eee;
                            margin-left: 10px;
                            margin-top: 10px;
                            border: 1px solid #c6bebe;
                        }
                
                        select {
                            padding: 5px;
                            border-radius: 10px;
                            margin: 10px;
                        }
                
                   
                        .menu {
                            margin: 10px;
                            margin-bottom: 0px;
                        }
                
                
                   
                   
                    
                

  let map; // OpenLayers map instance
let layer = null; // Current map layer
const apiKey = "wUHMJtqXrBdEz_wFQkIdgQ"; // Your API Key

// HTML elements
const toTime = document.getElementById("toTime");
const fromTime = document.getElementById("fromTime");
const service = document.getElementById("service");

// Initialize OpenLayers layers
const layers = {
  state_layer: new ol.layer.Image({
    source: new ol.source.ImageWMS({
      url: "https://vedas.sac.gov.in/drought_monitoring_wms/wms?",
      params: { LAYERS: "cite:india_state", VERSION: "1.1.1" },
      serverType: "geoserver",
    }),
    visible: true,
    zIndex: 2,
  }),
};

// Initialize the map
map = new ol.Map({
  target: "map",
  layers: [layers.state_layer],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [65.9629, 27.5937],
    zoom: 5,
    padding: [0, window.innerWidth < 1024 ? 0 : 700, 0, 0],
  }),
});

// Update map layer
function updateLayer(fromTimeVal, toTimeVal, serviceName) {
  if (layer) {
    map.removeLayer(layer);
  }
  layer = buildVAPILayer({
    serviceName,
    key: apiKey,
    from_time: fromTimeVal,
    to_time: toTimeVal,
  });
  map.addLayer(layer);
}
function parseDateString(dateStr) {
  if (dateStr.length === 8) {
    const year = dateStr.slice(0, 4);
    const month = dateStr.slice(4, 6);
    const day = dateStr.slice(6, 8);
    return '+' + year + '+-' + month + '+-' + day;
  }
  return dateStr;
}

// Clear and populate date dropdowns based on serviceName
function createDateOptions(serviceName) {
  fromTime.innerHTML = "";
  toTime.innerHTML = "";

  getTimestamps(serviceName)
    .then((data) => {
      data.forEach((option) => {
        const optionFrom = document.createElement("option");
        optionFrom.text = option.lbl;
        optionFrom.value = option.val;
        fromTime.appendChild(optionFrom);

        const optionTo = document.createElement("option");
        optionTo.text = option.lbl;
        optionTo.value = option.val;
        toTime.appendChild(optionTo);
      });

      toTime.selectedIndex = 0;
      const toTimeVal = toTime.value;
      console.log("to_date", toTimeVal);

      const toDate = new Date(parseDateString(toTimeVal));
      console.log("to_date_with_time", toDate);

      const targetFromDate = new Date(toDate);
      targetFromDate.setDate(targetFromDate.getDate() - 10);

      let fromIndex = 0;
      for (let i = 0; i < fromTime.options.length; i++) {
        const optionDate = new Date(parseDateString(fromTime.options[i].value));
        if (optionDate <= targetFromDate) {
          fromIndex = i;
          break;
        }
      }

      fromTime.selectedIndex = fromIndex;

      updateLayer(fromTime.value, toTime.value, serviceName);
    })
    .catch((err) => console.error("Error fetching timestamps:", err));
}

// Event listeners to update layer on input changes
fromTime.addEventListener("change", () => {
  updateLayer(fromTime.value, toTime.value, service.value);
});
toTime.addEventListener("change", () => {
    console.log("to_time",toTime.value)
  updateLayer(fromTime.value, toTime.value, service.value);
});
service.addEventListener("change", () => {
  createDateOptions(service.value);
});

// Initial load
createDateOptions(service.value);

                        



import requests

url = "https://vedas.sac.gov.in/vapi/ridam_server3/wms/"

params = {
    "SERVICE": "WMS",
    "VERSION": "1.3.0",
    "REQUEST": "GetMap",
    "FORMAT": "image/png",
    "TRANSPARENT": "true",
    "name": "RDSGrdient",
    "layers": "T5S1M1",
    "PROJECTION": "EPSG:4326",
    "ARGS": "param:NDVI;from_time:20250918;datasetId:T3S1P1;to_time:20250928",
    "STYLES": "[0:FFFFFF00:1:f0ebecFF:25:d8c4b6FF:50:ab8a75FF:75:917732FF:100:70ab06FF:125:459200FF:150:267b01FF:175:0a6701FF:200:004800FF:255:001901FF];nodata:FFFFFF00",
    "LEGEND_OPTIONS": "columnHeight:400;height:100",
    "X-API-KEY": "wUHMJtqXrBdEz_wFQkIdgQ",
    "WIDTH": "256",
    "HEIGHT": "256",
    "CRS": "EPSG:4326",
    "BBOX": "23.90625,77.6953125,24.08203125,77.87109375"
}

headers = {
    "Referer": "https://vedas.sac.gov.in",
    "Origin": "https://vedas.sac.gov.in",
    "Accept": "image/png,image/*;q=0.8,*/*;q=0.5",
    "Accept-Encoding": "gzip, deflate, br",
    "Accept-Language": "en-US,en;q=0.9",
    "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) VEDASClient/1.0",
    "Connection": "keep-alive",
    "Host": "vedas.sac.gov.in",
    "access-control-allow-origin": "https://vedas.sac.gov.in"
}

response = requests.get(url, params=params, headers=headers)


if response.status_code == 200:
  
    with open("output_image.png", "wb") as file:
        file.write(response.content)
    print("Image saved as output_image.png")
else:
    print(f"Error: {response.status_code}")

  
  
  
      
  
  


  curl -X GET "https://vedas.sac.gov.in/vapi/ridam_server3/wms/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&name=RDSGrdient&layers=T5S1M1&PROJECTION=EPSG:4326&ARGS=param:NDVI;from_time:20250918;datasetId:T3S1P1;to_time:20250928&STYLES=[0:FFFFFF00:1:f0ebecFF:25:d8c4b6FF:50:ab8a75FF:75:917732FF:100:70ab06FF:125:459200FF:150:267b01FF:175:0a6701FF:200:004800FF:255:001901FF];nodata:FFFFFF00&LEGEND_OPTIONS=columnHeight:400;height:100&X-API-KEY=wUHMJtqXrBdEz_wFQkIdgQ&WIDTH=256&HEIGHT=256&CRS=EPSG:4326&BBOX=23.90625,77.6953125,24.08203125,77.87109375" \
  -H "Referer: https://vedas.sac.gov.in" \
  -H "Origin: https://vedas.sac.gov.in" \
  -H "Accept: image/png,image/*;q=0.8,*/*;q=0.5" \
  -H "Accept-Encoding: gzip, deflate, br" \
  -H "Accept-Language: en-US,en;q=0.9" \
  -H "User-Agent: Mozilla/5.0 (X11; Linux x86_64) VEDASClient/1.0" \
  -H "Connection: keep-alive" \
  -H "Host: vedas.sac.gov.in" \
  -H "access-control-allow-origin: https://vedas.sac.gov.in"