Samples/Tile Layer/Image Overlay/Image Overlay Tile Layer.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Overlay Tile Layer - Bing Maps Samples</title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to extend a tile layer such that it breaks an bounded image overlay up into invidiual tiles and renders it." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
    <meta name="author" content="Microsoft Bing Maps" />
    <meta name="screenshot" content="screenshot.jpg" />
    
    <script>
    var map;

    function GetMap() {
        var bounds = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(40.5, -123.5), new Microsoft.Maps.Location(40, -123));

        map = new Microsoft.Maps.Map('#myMap', {
            bounds: bounds
        });

        //Load the spatial math module which provides useful tile math calculations.    
        Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
            var layer = new ImageOverlayLayer(map, 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif', bounds);
        });
    }

    var ImageOverlayLayer = function (map, imageUrl, bounds) {
        var tileLayer;
        var img;

        function loadLayer() {
            var self = this;

            //Pre-load the image befor ecreating a tile layer.
            img = new Image();

            //Since the image is hosted on a different domain, use CORs. Remove this if the image is locally hosted.
            img.crossOrigin = 'Anonymous';

            //When the image has loaded, create a tile layer and add it to the map.
            img.onload = function () {
                tileLayer = new Microsoft.Maps.TileLayer({
                    mercator: new Microsoft.Maps.TileSource({
                        uriConstructor: getTilePath
                    })
                });

                map.layers.insert(tileLayer);
            };
            img.src = imageUrl;
        }

        function getTilePath(tile) {
            //Create an off screen canvas.
            var canvas = document.createElement('canvas');
            canvas.width = 256;
            canvas.height = 256;
            var context = canvas.getContext('2d');
            
            //Calculate the extents of the image bounds based on the current zoom level of the tile. 
            var topRightImgPixels = Microsoft.Maps.SpatialMath.Tiles.locationToGlobalPixel(bounds.getNorthwest(), tile.zoom);
            var bottomLeftImgPixels = Microsoft.Maps.SpatialMath.Tiles.locationToGlobalPixel(bounds.getSoutheast(), tile.zoom);

            //Calculate the dimensions of the image at the tiles zoom level. 
            var width = bottomLeftImgPixels.x - topRightImgPixels.x;
            var height = bottomLeftImgPixels.y - topRightImgPixels.y;

            //Calculate the offset of the top left corner of the image relative to the top left corner of the tile in pixels at zoom.
            var x = topRightImgPixels.x - tile.x * 256;
            var y = topRightImgPixels.y - tile.y * 256;

            //Draw the image on the off screen canvas.
            context.drawImage(img, x, y, width, height);

            //Generate a data URL for the off screen canvas.
            return canvas.toDataURL();
        }

        this.dispose = function () {
            if (tileLayer) {
                map.layers.remove(tileLayer);
                tileLayer = null;
                img = null;
            }
        };

        this.getBaseTileLayer = function () {
            return tileLayer;
        };

        this.setOptions = function (options) {
            tileLayer.setOptions(options);
        };

        loadLayer();
    };
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
    
    <fieldset style="width:800px;margin-top:10px;">
        <legend>Image Overlay Tile Layer Sample</legend>
        This sample shows how to extend a tile layer such that it breaks an bounded image overlay up into invidiual tiles and renders it.
    </fieldset>

    <script>
        // Dynamic load the Bing Maps Key and Script
        // Get your own Bing Maps key at https://www.microsoft.com/maps
        (async () => {
            let script = document.createElement("script");
            let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
            script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
            document.body.appendChild(script);
        })();
    </script>
</body>
</html>