mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
markerclustererplus : Set optional parameters on ClusterIconStyle and MarkerClustererOptions.
This commit is contained in:
Olivier Foissac
+171
-136
@@ -7,55 +7,63 @@
|
||||
/// <reference path="../googlemaps/google.maps.d.ts" />
|
||||
|
||||
/**
|
||||
* @name ClusterIconStyle
|
||||
* @class This class represents the object for values in the <code>styles</code> array passed
|
||||
* to the {@link MarkerClusterer} constructor. The element in this array that is used to
|
||||
* style the cluster icon is determined by calling the <code>calculator</code> function.
|
||||
*
|
||||
* @property {string} url The URL of the cluster icon image file. Required.
|
||||
* @property {number} height The display height (in pixels) of the cluster icon. Required.
|
||||
* @property {number} width The display width (in pixels) of the cluster icon. Required.
|
||||
* @property {Array} [anchorText] The position (in pixels) from the center of the cluster icon to
|
||||
* where the text label is to be centered and drawn. The format is <code>[yoffset, xoffset]</code>
|
||||
* where <code>yoffset</code> increases as you go down from center and <code>xoffset</code>
|
||||
* increases to the right of center. The default is <code>[0, 0]</code>.
|
||||
* @property {Array} [anchorIcon] The anchor position (in pixels) of the cluster icon. This is the
|
||||
* spot on the cluster icon that is to be aligned with the cluster position. The format is
|
||||
* <code>[yoffset, xoffset]</code> where <code>yoffset</code> increases as you go down and
|
||||
* <code>xoffset</code> increases to the right of the top-left corner of the icon. The default
|
||||
* anchor position is the center of the cluster icon.
|
||||
* @property {string} [textColor="black"] The color of the label text shown on the
|
||||
* cluster icon.
|
||||
* @property {number} [textSize=11] The size (in pixels) of the label text shown on the
|
||||
* cluster icon.
|
||||
* @property {string} [textDecoration="none"] The value of the CSS <code>text-decoration</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
* @property {string} [fontWeight="bold"] The value of the CSS <code>font-weight</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
* @property {string} [fontStyle="normal"] The value of the CSS <code>font-style</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
* @property {string} [fontFamily="Arial,sans-serif"] The value of the CSS <code>font-family</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
* @property {string} [backgroundPosition="0 0"] The position of the cluster icon image
|
||||
* within the image defined by <code>url</code>. The format is <code>"xpos ypos"</code>
|
||||
* (the same format as for the CSS <code>background-position</code> property). You must set
|
||||
* this property appropriately when the image defined by <code>url</code> represents a sprite
|
||||
* containing multiple images. Note that the position <i>must</i> be specified in px units.
|
||||
*/
|
||||
|
||||
declare class ClusterIconStyle {
|
||||
* This class represents the object for values in the <code>styles</code> array passed
|
||||
* to the {@link MarkerClusterer} constructor. The element in this array that is used to
|
||||
* style the cluster icon is determined by calling the <code>calculator</code> function.
|
||||
*/
|
||||
declare interface ClusterIconStyle {
|
||||
/** The URL of the cluster icon image file. Required. */
|
||||
url: string;
|
||||
/** Height The display height (in pixels) of the cluster icon. Required. */
|
||||
height: number;
|
||||
/** Width The display width (in pixels) of the cluster icon. Required. */
|
||||
width: number;
|
||||
anchorText: number[];
|
||||
anchorIcon: number[];
|
||||
textColor: string;
|
||||
textSize: number;
|
||||
textDecoration: string;
|
||||
fontWeight: string;
|
||||
fontStyle: string;
|
||||
fontFamily: string;
|
||||
backgroundPosition: string;
|
||||
/**
|
||||
* [anchorText] The position (in pixels) from the center of the cluster icon to
|
||||
* where the text label is to be centered and drawn. The format is <code>[yoffset, xoffset]</code>
|
||||
* where <code>yoffset</code> increases as you go down from center and <code>xoffset</code>
|
||||
* increases to the right of center. The default is <code>[0, 0]</code>.
|
||||
*/
|
||||
anchorText?: number[];
|
||||
/**
|
||||
* [anchorIcon] The anchor position (in pixels) of the cluster icon. This is the
|
||||
* spot on the cluster icon that is to be aligned with the cluster position. The format is
|
||||
* <code>[yoffset, xoffset]</code> where <code>yoffset</code> increases as you go down and
|
||||
* <code>xoffset</code> increases to the right of the top-left corner of the icon. The default
|
||||
* anchor position is the center of the cluster icon.
|
||||
*/
|
||||
anchorIcon?: number[];
|
||||
/** [textColor="black"] The color of the label text shown on the cluster icon. */
|
||||
textColor?: string;
|
||||
/** textSize=11] The size (in pixels) of the label text shown on the cluster icon. */
|
||||
textSize?: number;
|
||||
/**
|
||||
* [textDecoration="none"] The value of the CSS <code>text-decoration</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
*/
|
||||
textDecoration?: string;
|
||||
/** [fontWeight="bold"] The value of the CSS <code>font-weight</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
*/
|
||||
fontWeight?: string;
|
||||
/**
|
||||
* [fontStyle="normal"] The value of the CSS <code>font-style</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
*/
|
||||
fontStyle?: string;
|
||||
/**
|
||||
* [fontFamily="Arial,sans-serif"] The value of the CSS <code>font-family</code>
|
||||
* property for the label text shown on the cluster icon.
|
||||
*/
|
||||
fontFamily?: string;
|
||||
/**
|
||||
* [backgroundPosition="0 0"] The position of the cluster icon image
|
||||
* within the image defined by <code>url</code>. The format is <code>"xpos ypos"</code>
|
||||
* (the same format as for the CSS <code>background-position</code> property). You must set
|
||||
* this property appropriately when the image defined by <code>url</code> represents a sprite
|
||||
* containing multiple images. Note that the position <i>must</i> be specified in px units.
|
||||
*/
|
||||
backgroundPosition?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -249,98 +257,125 @@ interface Cluster {
|
||||
}
|
||||
|
||||
/**
|
||||
* @name MarkerClustererOptions
|
||||
* @class This class represents the optional parameter passed to
|
||||
* the {@link MarkerClusterer} constructor.
|
||||
* @property {number} [gridSize=60] The grid size of a cluster in pixels. The grid is a square.
|
||||
* @property {number} [maxZoom=null] The maximum zoom level at which clustering is enabled or
|
||||
* <code>null</code> if clustering is to be enabled at all zoom levels.
|
||||
* @property {boolean} [zoomOnClick=true] Whether to zoom the map when a cluster marker is
|
||||
* clicked. You may want to set this to <code>false</code> if you have installed a handler
|
||||
* for the <code>click</code> event and it deals with zooming on its own.
|
||||
* @property {boolean} [averageCenter=false] Whether the position of a cluster marker should be
|
||||
* the average position of all markers in the cluster. If set to <code>false</code>, the
|
||||
* cluster marker is positioned at the location of the first marker added to the cluster.
|
||||
* @property {number} [minimumClusterSize=2] The minimum number of markers needed in a cluster
|
||||
* before the markers are hidden and a cluster marker appears.
|
||||
* @property {boolean} [ignoreHidden=false] Whether to ignore hidden markers in clusters. You
|
||||
* may want to set this to <code>true</code> to ensure that hidden markers are not included
|
||||
* in the marker count that appears on a cluster marker (this count is the value of the
|
||||
* <code>text</code> property of the result returned by the default <code>calculator</code>).
|
||||
* If set to <code>true</code> and you change the visibility of a marker being clustered, be
|
||||
* sure to also call <code>MarkerClusterer.repaint()</code>.
|
||||
* @property {string} [title=""] The tooltip to display when the mouse moves over a cluster
|
||||
* marker. (Alternatively, you can use a custom <code>calculator</code> function to specify a
|
||||
* different tooltip for each cluster marker.)
|
||||
* @property {function} [calculator=MarkerClusterer.CALCULATOR] The function used to determine
|
||||
* the text to be displayed on a cluster marker and the index indicating which style to use
|
||||
* for the cluster marker. The input parameters for the function are (1) the array of markers
|
||||
* represented by a cluster marker and (2) the number of cluster icon styles. It returns a
|
||||
* {@link ClusterIconInfo} object. The default <code>calculator</code> returns a
|
||||
* <code>text</code> property which is the number of markers in the cluster and an
|
||||
* <code>index</code> property which is one higher than the lowest integer such that
|
||||
* <code>10^i</code> exceeds the number of markers in the cluster, or the size of the styles
|
||||
* array, whichever is less. The <code>styles</code> array element used has an index of
|
||||
* <code>index</code> minus 1. For example, the default <code>calculator</code> returns a
|
||||
* <code>text</code> value of <code>"125"</code> and an <code>index</code> of <code>3</code>
|
||||
* for a cluster icon representing 125 markers so the element used in the <code>styles</code>
|
||||
* array is <code>2</code>. A <code>calculator</code> may also return a <code>title</code>
|
||||
* property that contains the text of the tooltip to be used for the cluster marker. If
|
||||
* <code>title</code> is not defined, the tooltip is set to the value of the <code>title</code>
|
||||
* property for the MarkerClusterer.
|
||||
* @property {string} [clusterClass="cluster"] The name of the CSS class defining general styles
|
||||
* for the cluster markers. Use this class to define CSS styles that are not set up by the code
|
||||
* that processes the <code>styles</code> array.
|
||||
* @property {Array} [styles] An array of {@link ClusterIconStyle} elements defining the styles
|
||||
* of the cluster markers to be used. The element to be used to style a given cluster marker
|
||||
* is determined by the function defined by the <code>calculator</code> property.
|
||||
* The default is an array of {@link ClusterIconStyle} elements whose properties are derived
|
||||
* from the values for <code>imagePath</code>, <code>imageExtension</code>, and
|
||||
* <code>imageSizes</code>.
|
||||
* @property {boolean} [enableRetinaIcons=false] Whether to allow the use of cluster icons that
|
||||
* have sizes that are some multiple (typically double) of their actual display size. Icons such
|
||||
* as these look better when viewed on high-resolution monitors such as Apple's Retina displays.
|
||||
* Note: if this property is <code>true</code>, sprites cannot be used as cluster icons.
|
||||
* @property {number} [batchSize=MarkerClusterer.BATCH_SIZE] Set this property to the
|
||||
* number of markers to be processed in a single batch when using a browser other than
|
||||
* Internet Explorer (for Internet Explorer, use the batchSizeIE property instead).
|
||||
* @property {number} [batchSizeIE=MarkerClusterer.BATCH_SIZE_IE] When Internet Explorer is
|
||||
* being used, markers are processed in several batches with a small delay inserted between
|
||||
* each batch in an attempt to avoid Javascript timeout errors. Set this property to the
|
||||
* number of markers to be processed in a single batch; select as high a number as you can
|
||||
* without causing a timeout error in the browser. This number might need to be as low as 100
|
||||
* if 15,000 markers are being managed, for example.
|
||||
* @property {string} [imagePath=MarkerClusterer.IMAGE_PATH]
|
||||
* The full URL of the root name of the group of image files to use for cluster icons.
|
||||
* The complete file name is of the form <code>imagePath</code>n.<code>imageExtension</code>
|
||||
* where n is the image file number (1, 2, etc.).
|
||||
* @property {string} [imageExtension=MarkerClusterer.IMAGE_EXTENSION]
|
||||
* The extension name for the cluster icon image files (e.g., <code>"png"</code> or
|
||||
* <code>"jpg"</code>).
|
||||
* @property {Array} [imageSizes=MarkerClusterer.IMAGE_SIZES]
|
||||
* An array of numbers containing the widths of the group of
|
||||
* <code>imagePath</code>n.<code>imageExtension</code> image files.
|
||||
* (The images are assumed to be square.)
|
||||
**/
|
||||
* Optional parameter passed to the {@link MarkerClusterer} constructor.
|
||||
*/
|
||||
interface MarkerClustererOptions {
|
||||
gridSize: number;
|
||||
maxZoom: number;
|
||||
zoomOnClick: boolean;
|
||||
averageCenter: boolean;
|
||||
minimumClusterSize: number;
|
||||
ignoreHidden: boolean;
|
||||
title: string;
|
||||
calculator(): Function;
|
||||
clusterClass: string;
|
||||
styles: ClusterIconStyle[];
|
||||
enableRetinaIcons: boolean;
|
||||
batchSize: number;
|
||||
batchSizeIE: number;
|
||||
imagePath: string;
|
||||
imageExtension: string;
|
||||
imageSizes: number[];
|
||||
/** [gridSize=60] The grid size of a cluster in pixels. The grid is a square. */
|
||||
gridSize?: number;
|
||||
/** [maxZoom=null] The maximum zoom level at which clustering is enabled or
|
||||
* <code>null</code> if clustering is to be enabled at all zoom levels.
|
||||
*/
|
||||
maxZoom?: number;
|
||||
/**
|
||||
* [zoomOnClick=true] Whether to zoom the map when a cluster marker is
|
||||
* clicked. You may want to set this to <code>false</code> if you have installed a handler
|
||||
* for the <code>click</code> event and it deals with zooming on its own.
|
||||
*/
|
||||
zoomOnClick?: boolean;
|
||||
/**
|
||||
* [averageCenter=false] Whether the position of a cluster marker should be
|
||||
* the average position of all markers in the cluster. If set to <code>false</code>, the
|
||||
* cluster marker is positioned at the location of the first marker added to the cluster.
|
||||
*/
|
||||
averageCenter?: boolean;
|
||||
/**
|
||||
* [minimumClusterSize=2] The minimum number of markers needed in a cluster
|
||||
* before the markers are hidden and a cluster marker appears.
|
||||
*/
|
||||
minimumClusterSize?: number;
|
||||
/**
|
||||
* [ignoreHidden=false] Whether to ignore hidden markers in clusters. You
|
||||
* may want to set this to <code>true</code> to ensure that hidden markers are not included
|
||||
* in the marker count that appears on a cluster marker (this count is the value of the
|
||||
* <code>text</code> property of the result returned by the default <code>calculator</code>).
|
||||
* If set to <code>true</code> and you change the visibility of a marker being clustered, be
|
||||
* sure to also call <code>MarkerClusterer.repaint()</code>.
|
||||
*/
|
||||
ignoreHidden?: boolean;
|
||||
/**
|
||||
* [title=""] The tooltip to display when the mouse moves over a cluster
|
||||
* marker. (Alternatively, you can use a custom <code>calculator</code> function to specify a
|
||||
* different tooltip for each cluster marker.)
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* [calculator=MarkerClusterer.CALCULATOR] The function used to determine
|
||||
* the text to be displayed on a cluster marker and the index indicating which style to use
|
||||
* for the cluster marker. The input parameters for the function are (1) the array of markers
|
||||
* represented by a cluster marker and (2) the number of cluster icon styles. It returns a
|
||||
* {@link ClusterIconInfo} object. The default <code>calculator</code> returns a
|
||||
* <code>text</code> property which is the number of markers in the cluster and an
|
||||
* <code>index</code> property which is one higher than the lowest integer such that
|
||||
* <code>10^i</code> exceeds the number of markers in the cluster, or the size of the styles
|
||||
* array, whichever is less. The <code>styles</code> array element used has an index of
|
||||
* <code>index</code> minus 1. For example, the default <code>calculator</code> returns a
|
||||
* <code>text</code> value of <code>"125"</code> and an <code>index</code> of <code>3</code>
|
||||
* for a cluster icon representing 125 markers so the element used in the <code>styles</code>
|
||||
* array is <code>2</code>. A <code>calculator</code> may also return a <code>title</code>
|
||||
* property that contains the text of the tooltip to be used for the cluster marker. If
|
||||
* <code>title</code> is not defined, the tooltip is set to the value of the <code>title</code>
|
||||
* property for the MarkerClusterer.
|
||||
*/
|
||||
calculator?: (markers: google.maps.Marker[], clusterIconStylesCount: number) => ClusterIconInfo;
|
||||
/**
|
||||
* [clusterClass="cluster"] The name of the CSS class defining general styles
|
||||
* for the cluster markers. Use this class to define CSS styles that are not set up by the code
|
||||
* that processes the <code>styles</code> array.
|
||||
*/
|
||||
clusterClass?: string;
|
||||
/**
|
||||
*[styles] An array of {@link ClusterIconStyle} elements defining the styles
|
||||
* of the cluster markers to be used. The element to be used to style a given cluster marker
|
||||
* is determined by the function defined by the <code>calculator</code> property.
|
||||
* The default is an array of {@link ClusterIconStyle} elements whose properties are derived
|
||||
* from the values for <code>imagePath</code>, <code>imageExtension</code>, and
|
||||
* <code>imageSizes</code>.
|
||||
*/
|
||||
styles?: ClusterIconStyle[];
|
||||
/**
|
||||
* [enableRetinaIcons=false] Whether to allow the use of cluster icons that
|
||||
* have sizes that are some multiple (typically double) of their actual display size. Icons such
|
||||
* as these look better when viewed on high-resolution monitors such as Apple's Retina displays.
|
||||
* Note: if this property is <code>true</code>, sprites cannot be used as cluster icons.
|
||||
*/
|
||||
enableRetinaIcons?: boolean;
|
||||
/**
|
||||
* [batchSize=MarkerClusterer.BATCH_SIZE] Set this property to the
|
||||
* number of markers to be processed in a single batch when using a browser other than
|
||||
* Internet Explorer (for Internet Explorer, use the batchSizeIE property instead).
|
||||
*/
|
||||
batchSize?: number;
|
||||
/**
|
||||
* [batchSizeIE=MarkerClusterer.BATCH_SIZE_IE] When Internet Explorer is
|
||||
* being used, markers are processed in several batches with a small delay inserted between
|
||||
* each batch in an attempt to avoid Javascript timeout errors. Set this property to the
|
||||
* number of markers to be processed in a single batch; select as high a number as you can
|
||||
* without causing a timeout error in the browser. This number might need to be as low as 100
|
||||
* if 15,000 markers are being managed, for example.
|
||||
*/
|
||||
batchSizeIE?: number;
|
||||
/**
|
||||
* [imagePath=MarkerClusterer.IMAGE_PATH]
|
||||
* The full URL of the root name of the group of image files to use for cluster icons.
|
||||
* The complete file name is of the form <code>imagePath</code>n.<code>imageExtension</code>
|
||||
* where n is the image file number (1, 2, etc.).
|
||||
*/
|
||||
imagePath?: string;
|
||||
/**
|
||||
* [imageExtension=MarkerClusterer.IMAGE_EXTENSION]
|
||||
* The extension name for the cluster icon image files (e.g., <code>"png"</code> or
|
||||
* <code>"jpg"</code>).
|
||||
*/
|
||||
imageExtension?: string;
|
||||
/**
|
||||
* [imageSizes=MarkerClusterer.IMAGE_SIZES]
|
||||
* An array of numbers containing the widths of the group of
|
||||
* <code>imagePath</code>n.<code>imageExtension</code> image files.
|
||||
* (The images are assumed to be square.)
|
||||
*/
|
||||
imageSizes?: number[];
|
||||
}
|
||||
|
||||
|
||||
interface MarkerClusterer extends google.maps.OverlayView {
|
||||
/**
|
||||
* Creates a MarkerClusterer object with the options specified in {@link MarkerClustererOptions}.
|
||||
|
||||
Reference in New Issue
Block a user