B4J Question [BaNano] Google Map and WMS

[Star-Dust]

I downloaded an html/JS source from an Italian government site that allows you to add Polylines to the Google map using WMS (Web Map Service). Now I'm trying to adapt everything with Banano but not poor results.

The key steps are loading these two scripts

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key="></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4-src.min.js"></script>

Inserting this code will initialize the map and insert images from WMS

    proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");
    proj4.defs("EPSG:6706", "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs");
   
    var map;
    var centro_italia= new google.maps.LatLng(41.898252, 12.496861);

    var catOptions = {
          getTileUrl: function(coord, zoom) {
              return "https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX="+bbox(coord.x,coord.y,zoom)+"&CRS=EPSG:6706&WIDTH=256&HEIGHT=256&LAYERS=province,CP.CadastralZoning,acque,CP.CadastralParcel,fabbricati,codice_plla,simbolo_graffa&STYLES=default&FORMAT=image/png&DPI=96&MAP_RESOLUTION=96&FORMAT_OPTIONS=dpi:96&TRANSPARENT=TRUE"
          },
          tileSize: new google.maps.Size(256, 256),
          name: "Catasto",
          opacity: 0.7
    };
    var catMapType = new google.maps.ImageMapType(catOptions);

    function initialize () {
        map = new google.maps.Map(document.getElementById('vuegmap1'), {
        zoom: 13,
        center: centro_italia,
        mapTypeId: google.maps.MapTypeId.MAP,
        disableDefaultUI: false,
            zoomControl: true
        });    
        map.overlayMapTypes.insertAt(0, catMapType);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    function bbox(x,y,z) {
        bl_lng=tile2long(x,z);
        tr_lng=tile2long((x+1),z);
        bl_lat=tile2lat(y+1,z);
        tr_lat=tile2lat((y),z);
        bl=proj4("WGS84","EPSG:6706",[bl_lng,bl_lat]);
        tr=proj4("WGS84","EPSG:6706",[tr_lng,tr_lat]);
        return bl[1]+","+bl[0]+","+tr[1]+","+tr[0];
    }
    function tile2long(x,z) {
        return (x/Math.pow(2,z)*360-180);
    }
    function tile2lat(y,z) {
        var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
        return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
    }

I attach both the original source and the b4j source I am working on. Maybe someone has suggestions

 

[alwaysbusy]

Disable the Auto ID of vuegmap1 and give it a width and a height:

Alwaysbusy

 

[Star-Dust]

Thank's