I have a map with some drawings and I want to bring the NDVI only in the area where the drawings are, so I created a larger polygon, which is over all my drawings, to bring the Sentinel data only in that area, and the rest of the visualization , be Google Maps.
However, the entire map turns white.
When I remove the BBOX parameter, the whole map turns black, I don’t know where I’m going wrong, here’s the map image and my request to Sentinel.
var url = "https://services.sentinel-hub.com/ogc/wms/481fda3c-6aed-40fd-864c-c7712e9df55e";
url += "?REQUEST=GetMap"; //WMS operation
url += "&SERVICE=WMS"; //WMS service
url += "&VERSION=1.1.1"; //WMS version
url += "&LAYERS=AGRICULTURE"; //WMS layers
url += "&FORMAT=image/jpg" ; //WMS format
url += "&CRS=EPSG:4326"; //set WGS84
url += "&BBOX=" + bbox; // set bounding box
url += "&WIDTH=512"; //tile size in google
url += "&HEIGHT=512";
url += "&GEOMETRY=POLYGON((-16.424726360500514 -47.36166420715697,-16.403691138437548 -47.31248249571425,-16.40891975867101 -47.29689138615894,-16.449649543665487 -47.296257601217675,-16.454147533446047 -47.26989214766075,-16.469585785979124 -47.27027241862551,-16.46934267341944 -47.34239714494229,-16.438586476652354 -47.36369231896904,-16.424726360500514 -47.36166420715697))"
I have checked your request and also return a black map. However, checking your polygon, it appears to be in the Atlantic Ocean. Can you please double check whether you are using the right area of interest and projection?
I checked the coordinates and there really was a problem. I used the sentinel request builder to draw the polygon correctly, as I was inputting it with the changed coordinates.
But now, I can pull the NDVI, however all my Google Maps around it turned black, I would like it to continue to show the map normally around the polygon.
I’ll send the code and an image of the current map.
function initMap() {
window.bounds = new google.maps.LatLngBounds();
<?php if(!empty($defaultFarmId)):?>
var coordinates = "<?php echo $farmLatLong['coordinates'];?>";
if(!coordinates){
$("#map").css("display", "none");
alert("Este mapa ainda não foi cadastrado. Insira as coordenadas do Google no cadastro da propriedade!");
} else {
const pivots = <?php echo json_encode($pivots); ?>;
const drippers = <?php echo json_encode($drippers); ?>;
const manejo_pivots = <?php echo json_encode($manejoPivots); ?>;
const manejo_drippers = <?php echo json_encode($manejoDrippers); ?>;
// console.log(drippers);
var coordArray = coordinates.split(", ");
var coordArrayPivot = [];
var coordArrayStartSetorial = [];
var coordArrayEndSetorial = [];
var coordArrayPlotStartSetorial = [];
var coordArrayPlotEndSetorial = [];
var centerCircle = [];
var startAngle = [];
var endAngle = [];
var startPlotAngle = [];
var endPlotAngle = [];
var pivot_plots = [];
// console.log(pivots);
// The location of Uluru
var center = { lat: Number(coordArray[0]), lng: Number(coordArray[1]) };
// The map, centered at Uluru
var SHLayer = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var proj = map.getProjection();
var zfactor = Math.pow(2, zoom);
// get Long Lat coordinates
var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 512 / zfactor, coord.y * 512 / zfactor));
var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 512 / zfactor, (coord.y + 1) * 512 / zfactor));
//create the Bounding box string
var bbox = (top.lng()) + "," +
(bot.lat()) + "," +
(bot.lng()) + "," +
(top.lat());
//base WMS URL
var url = "https://services.sentinel-hub.com/ogc/wms/481fda3c-6aed-40fd-864c-c7712e9df55e";
url += "?REQUEST=GetMap"; //WMS operation
url += "&SERVICE=WMS"; //WMS service
url += "&VERSION=1.1.1"; //WMS version
url += "&LAYERS=AGRICULTURE"; //WMS layers
url += "&FORMAT=image/jpg" ; //WMS format
url += "&CRS=EPSG:4326"; //set WGS84
url += "&BBOX=" + bbox; // set bounding box
url += "&WIDTH=512"; //tile size in google
url += "&HEIGHT=512";
url += "&GEOMETRY=POLYGON((-47.367384 -16.429071, -47.346598 -16.481094, -47.282521 -16.480765, -47.284926 -16.412276, -47.340241 -16.40503, -47.367384 -16.429071))";
return url; // return URL for the tile
},
tileSize: new google.maps.Size(512, 512)
});
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: center,
disableDefaultUI: true,
mapTypeId: 'satellite',
gestureHandling: "greedy",
zoomControl: true,
});
map.overlayMapTypes.push(SHLayer);
I am not an expert on how to configure your code. However, this previous forum thread should help you out with the transparency of the pixels outside of your area of interest.
I inserted some changes according to the code that was on the forum, but even so, the transparency was only reached on the sides of the image, part of it is still reddish
Have you tried removing the BBOX parameter from your request? Doing this should This is likely the source of the red pixels surrounding the polygon you have generated. By using only the GEOMETRY parameter you should output imagery only within the given geometry and cropped to the geometry’s minimum bounding box.
