Leaflet Missing Data

by Jens21

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
  height: 600px;
}

JavaScript

/* Standard Leaflet Stuff */

var center = [-29.4412, 30.549964459422308];
var map = L.map('map').setView(center, 16);

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

/* Custom below */

const instanceID = "e3**********************66"
const firstDate = "2023-01-08";
const geometry = "MULTIPOLYGON (((30.551725 -29.444209, 30.552355 -29.445546, 30.553733 -29.445101, 30.553339 -29.444209, 30.554717 -29.443558, 30.554441 -29.442889, 30.551725 -29.444209), (30.546921 -29.4373, 30.548044 -29.437318, 30.546272 -29.441706, 30.545583 -29.441569, 30.546921 -29.4373), (30.540807 -29.468413, 30.54019 -29.471656, 30.542227 -29.472391, 30.544511 -29.469829, 30.5427 -29.468789, 30.540807 -29.468413), (30.534098 -29.474594, 30.537782 -29.474773, 30.537967 -29.47368, 30.53842 -29.47368, 30.53844 -29.472767, 30.535806 -29.47411, 30.534098 -29.474594), (30.539963 -29.47257, 30.539305 -29.476583, 30.53949 -29.476583, 30.542782 -29.473734, 30.542206 -29.473233, 30.540478 -29.472534, 30.539963 -29.47257)))"

const wmsUrl = `https://services.sentinel-hub.com/ogc/wms/${instanceID}`

var wmsOptions = {
  tileSize: 512,
  maxcc: 50,
  layers: "NDVI",
  transparent: "true",
  format: "image/png",
  time: `${firstDate}/${firstDate}`,
  geometry: geometry,
  crs: L.CRS.EPSG4326,
}
//https://gis3.nve.no/map/services/Nettanlegg1/MapServer/WmsServer?request=GetCapabilities&service=WMS
var wmsLayer = L.tileLayer.wms(wmsUrl, wmsOptions).addTo(map);