Pull data from a polygon to my google maps

  • 26 April 2024
  • 7 replies
  • 2 views

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))"


7 replies

Hi Alan,

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?

Thanks

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);

Hi Alan,

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

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=NDVI"; //WMS layers
                      url += "&FORMAT=image/jpg" ; //WMS format
                      url += "&CRS=EPSG:4326";
                      url += "&CRS=EPSG:4326";
                      url += "&GAIN=0.3";
                      url += "&GAMA=0.8";
                      url += "&TRANSPARENT=true";     //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))";

Hi Alan,

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.

Yes, I tried to remove the Bbox parameter, as I believed that was the problem, but what happens is that I have an infinite repetition of the polygon.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Reply


Planet Monitoring
Investors

© 2024 Planet Labs PBC. All rights reserved.
| Privacy Policy | California Privacy Notice | California Do Not Sell
Your Privacy Choices | Cookie Notice | Terms of Use