Exemple raster ICGC àmbit mundial

Veure codi font pantalla completa



        <!DOCTYPE html>
        <html>
        <head>
            <title>Exemple GoogleMaps ICGC</title>
            <style type="text/css">
            html{
              overflow:hidden;
              margin:0
          }
          body{
              overflow:hidden;
              margin:0
          }
          #map {
              height: 100%;
              width: 100%;
              position:absolute;
              top:0px;
          }
          .gm-style-cc{
            display: none;
        }
            </style>
            <script>
            let map;
        function initMap() {
            const centre = {
                lat: 42,
                lng: 2
            };
            const mapaICGC = new google.maps.ImageMapType({
                alt: "Mapa ICGC",
                getTileUrl: function (tile, zoom) {
                    var url = "https://geoserveis.icgc.cat/styles/icgc_mapa_estandard/" + zoom + "/" +
                        tile.x + "/" + tile.y + ".png";
                    return url;
                },
                isPng: true,
                maxZoom: 20,
                minZoom: 1,
                name: "Mapa ICGC",
                tileSize: new google.maps.Size(256, 256)
            });
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 8,
                center: centre,
                streetViewControl: false,
                mapTypeId: 'ICGC',
                mapTypeControlOptions: {
                    mapTypeIds: ['ICGC']
                }
            });
            map.mapTypes.set('ICGC', mapaICGC);
            map.setMapTypeId('ICGC');
            addICGCAttribution();
        }
        function addICGCAttribution() {
            let copyrightDiv;
            if (!document.getElementById("map-copyright")) {
                copyrightDiv = document.createElement("div")
                copyrightDiv.id = "map-copyright"
                copyrightDiv.style.fontSize = "11px"
                copyrightDiv.style.margin = "0 2px 2px 0"
                copyrightDiv.style.whiteSpace = "nowrap"
                copyrightDiv.style.backgroundColor = "rgb(245, 245, 245)";
                copyrightDiv.style.width = "auto";
                map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(copyrightDiv)
                copyrightDiv.innerHTML = 'Catalunya: Institut Cartogràfic i Geològic de Catalunya | Resta del món:Open Street Map Contributors. OpenMapTiles';
            }
        }
            </script>
        </head>
        <body>
            <div id="map"></div>
            <script
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLaHrio04yJNbt6I2dHAEGnjHsFTWMT4A&callback=initMap&libraries=&v=weekly"
                async></script>
        </body>
        </html>