Developing multiple TypeScript modules that extend the CustomOverlay class has been a smooth process for me. Below is one of the modules I have created.
Check out the module code:
/// <reference path="MicrosoftMaps/Microsoft.Maps.d.ts"/>
/**
* This interface defines the options for rendering a ground overlay on the map.
*/
interface IGroundOverlayOptions extends Microsoft.Maps.ICustomOverlayOptions {
/** A background color to fill the area beneath the ground overlay. */
backgroundColor?: string | Microsoft.Maps.Color;
/** The bounding box to anchor the ground overlay to. */
bounds: Microsoft.Maps.LocationRect;
/** URL of the image to be used as a ground overlay. */
imageUrl: string;
/** Opacity of the ground overlay image. */
opacity?: number;
/** Rotation angle in degrees (counter-clockwise). 0 = north, 90 = west, 180 = south, 270 = east */
rotation?: number;
/** Boolean indicating the visibility of the ground overlay. */
visible?: boolean;
}
/**
* Custom overlay class that associates an image with a specified area on the map.
*/
class GroundOverlay extends Microsoft.Maps.CustomOverlay {
/***********************************
* Private Properties
***********************************/
private _options: IGroundOverlayOptions = {
beneathLabels: true,
backgroundColor: 'transparent',
bounds: null,
imageUrl: null,
opacity: 1,
rotation: 0,
visible: true
};
private _img: HTMLImageElement;
private _mapViewChangeEvent: Microsoft.Maps.IHandlerId;
/***********************************
* Constructor
***********************************/
constructor(options: IGroundOverlayOptions) {
super({
beneathLabels: (typeof options.beneathLabels === 'boolean') ? options.beneathLabels : true
});
this.setOptions(options);
}
/***********************************
* Public Properties
***********************************/
public metadata: any;
/***********************************
* Public functions
***********************************/
public clear() {
this._options = {
backgroundColor: 'transparent',
bounds: null,
imageUrl: null,
opacity: 1,
rotation: 0,
visible: true
};
this.setHtmlElement(null);
}
public getBackgroundColor(): string | Microsoft.Maps.Color {
return this._options.backgroundColor;
}
public getBounds(): Microsoft.Maps.LocationRect {
return this._options.bounds;
}
public getImageUrl(): string {
return this._options.imageUrl;
}
public getOpacity(): number {
return this._options.opacity;
}
public getRotation(): number {
return this._options.opacity;
}
public getVisible(): boolean {
return this._options.visible;
}
public setOptions(options: IGroundOverlayOptions): void {
if (options && typeof options.beneathLabels === 'boolean') {
this._options.beneathLabels = options.beneathLabels;
}
if (typeof options.backgroundColor !== 'undefined') {
this._options.backgroundColor = options.backgroundColor;
}
// Remaining logic for setting options...
}
// More public functions and inherited events go here...
}
Microsoft.Maps.moduleLoaded('GroundOverlaysModule');
Take a look at the web application that incorporates this module:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#myMap {
height: 100%;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var map;
var groundOverlay;
function initMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key',
zoom: 13,
center: new Microsoft.Maps.Location(40.740, -74.18)
});
Microsoft.Maps.registerModule('GroundOverlaysModule', '../scripts/GroundOverlayModule.js');
// Load module and create GroundOverlay instance...
}
</script>
<script async defer src="https://bing.com/api/maps/mapcontrol?callback=initMap"></script>
</body>
</html>