F E T C H Web Interface - Copy this Html, Bootstrap Component to your project

Create a web interface using HTML, CSS, and JavaScript for a tool called “FETCH Flexible and Efficient Tile Collection Handler”. The purpose of this tool is to allow users to select a geographical area on a map and download map tiles for that region using the Google API. 1. Layout: • The page should have a title centered at the top. • A map interface should be displayed where users can draw a rectangle to select an area of interest. • Input fields for displaying the coordinates of the selected area and for users to enter their Google API key. • Two buttons: “Generate API Links” and “Download Tiles”. • A progress bar to show the download progress. • Instructions should guide the user through the process of selecting the area, entering their API key, generating links, and downloading tiles. 2. Features: • Use the Leaflet.js library to display the map, allowing users to draw a rectangle that defines the area for which they want to download tiles. • Subdivide the selected area into smaller tiles and calculate the centroids of each tile. • Upon clicking “Generate API Links,” create links based on the centroids using the entered API key and display them in a text box. • Enable downloading of map tiles (DSM, RGB, and Mask) by clicking “Download Tiles,” with progress displayed. 3. Map Settings: • The map should load with a default location and a tile layer from OpenStreetMap. • Provide the user with an option to geocode an address, allowing the map to center on a location based on a search. 4. Download Functionality: • Use JSZip and FileSaver libraries to compress and download the tile files as a zip archive. • Show a loading spinner while tiles are being downloaded and update the progress bar as each file is added to the zip.