Does perhaps this entry answer yohr question?

How to get Bounding Box coordinates for my google map window

are those coordinates used as BBOX parameters got from map.getBounds() for above request url? or they need some more calculations?

You will need some additional processing to get the BBOX for the WFS reqest.

The map.getBounds() will return a LatLngBounds object of the Google Map extent.

See docs: https://developers.google.com/maps/documentation/javascript/reference/map#Map.getBounds

Then to convert it to a bbox string for the WFS request

    var gmapbbox = map.getBounds();

    var sw = gmapbbox.getSouthWest();

    var ne = gmapbbox.getNorthEast();

    var wfsbbox = [sw.lng(), sw.lat(), ne.lng(), ne.lat()].join();  // returns a string for the WFS request bbox

var gmapbbox = map.getBounds(); var sw = gmapbbox.getSouthWest(); var ne = gmapbbox.getNorthEast(); var wfsbbox = [sw.lng(), sw.lat(), ne.lng(), ne.lat()].join();

Thanks for the tip, but when i passed wfsbbox into request url it returns null

{

“type”: “FeatureCollection”,

“features”: e

]

}

url :
https://services.sentinel-hub.com/ogc/wfs/{instanceid}?REQUEST=GetFeature&TYPENAMES=S2.TILE&OUTPUTFORMAT=application/json&BBOX=32.12910946979878,29.506358933448496,37.57283505573628,32.56051902785952&TIME=2018-08-01/2018-08-31

You will also need to specify the SRS/CRS parameter for EPSG 4326 (geographic coordinates) as part of the WFS request.

Thank you so much, it works.

I need to know how EO Browser fetch those data and highlight the dates on calendar? as the one i get differs from EO Browser.

Thanks.

EO Browser is open source, so you can find the exact code on GitHub.

If I am not mistaken, this part is dealing with dates:
github.com

sentinel-hub/EOBrowser/blob/master/src/utils/datesHelper.js

import moment from 'moment';

import axios from 'axios';

import Store from '../store';

import { getCoordsFromBounds } from './coords';



export const ISO_8601_UTC = `YYYY-MM-DD[t]HHss.SSS[z]`;



export function getAndSetNextPrev(direction) {

  const { maxDate, minDate, selectedResult, dateFormat } = Store.current;

  let { time, datasource, indexService } = selectedResult;

  let { mapBounds: bounds } = Store.current;

  let activeLayer = [...Store.current.instances, ...(Store.current.userInstances || {})].find(inst => {

    return inst.name === datasource || inst.id === datasource;

  });

  const newService = activeLayer.indexService.includes('v3/collections');

  const clip = {

    type: 'Polygon',

    crs: { type: 'name', properties: { name: 'urn:ogc:def:crs:EPSG::4326' } },

    coordinates: [getCoordsFromBounds(bounds, false, newService)],

  };