googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
496 lines (431 loc) • 15.8 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JsDoc Reference - CanvasLayer</title>
<style type="text/css">
body {
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
}
.header {
clear: both;
background-color: #ccc;
padding: 8px;
}
h1 {
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
hr {
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}
pre.code {
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
#index {
margin-top: 24px;
float: left;
width: 160px;
position: absolute;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}
#content {
margin-left: 100px;
width: 600px;
}
.classList {
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: auto;
}
.classList li {
padding: 0;
margin: 0 0 8px 0;
}
.summaryTable { width: 100%; }
h1.classTitle {
font-size:170%;
line-height:130%;
}
h2 { font-size: 110%; }
caption, div.sectionTitle {
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}
div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }
.summaryTable td {
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}
.summaryTable td.attributes {
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}
td.attributes, .fixedFont {
line-height: 15px;
color: #002EBE;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}
.summaryTable td.nameDescription {
text-align: left;
font-size: 13px;
line-height: 15px;
}
.summaryTable td.nameDescription, .description {
line-height: 15px;
padding: 4px;
padding-left: 4px;
}
.summaryTable { margin-bottom: 8px; }
ul.inheritsList {
list-style: square;
margin-left: 20px;
padding-left: 0;
}
.detailList {
margin-left: 20px;
line-height: 15px;
}
.detailList dt { margin-left: 20px; }
.detailList .heading {
font-weight: bold;
padding-bottom: 6px;
margin-left: 0;
}
.light, td.attributes, .light a:link, .light a:visited {
color: #777;
font-style: italic;
}
.fineprint {
text-align: right;
font-size: 10px;
}
</style>
</head>
<body>
<!-- ============================== header ================================= -->
<!-- begin static/header.html -->
<div id="header"></div>
<!-- end static/header.html -->
<div id="content">
<!-- ============================== class title ============================ -->
<h1 class="classTitle">
Class CanvasLayer
</h1>
<!-- ============================== class summary ========================== -->
<p class="description">
A map layer that provides a canvas over the slippy map and a callback system for efficient animation.
<br /><br />Extends
<a href="https://developers.google.com/maps/documentation/javascript/reference#OverlayView">google.maps.OverlayView</a>.<br />
<i>Defined in: </i> <a href="../src/CanvasLayer.js">CanvasLayer.js</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class CanvasLayer.">
<caption>Class Summary</caption>
<thead>
<tr>
<th scope="col">Constructor Attributes</th>
<th scope="col">Constructor Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes"> </td>
<td class="nameDescription" >
<div class="fixedFont">
<b><a href="reference.html#constructor">CanvasLayer</a></b>(opt_options)
</div>
<div class="description">A map layer that provides a canvas over the slippy map and a callback system for efficient animation.</div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== properties summary ===================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class CanvasLayer.">
<caption>Field Summary</caption>
<thead>
<tr>
<th scope="col">Field Attributes</th>
<th scope="col">Field Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont">
<b><a href="reference.html#canvas">canvas</a></b>
</div>
<div class="description">The canvas element.</div>
</td>
</tr>
</tbody>
</table>
<dl class="inheritsList"></dl>
<!-- ============================== methods summary ======================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class CanvasLayer.">
<caption>Method Summary</caption>
<thead>
<tr>
<th scope="col">Method Attributes</th>
<th scope="col">Method Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#getPaneName">getPaneName</a></b>()
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#getTopLeft">getTopLeft</a></b>()
</div>
<div class="description">A convenience method to get the current LatLng coordinate of the top left of the current view of the map.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#isAnimated">isAnimated</a></b>()
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#scheduleUpdate">scheduleUpdate</a></b>()
</div>
<div class="description">Schedule a requestAnimationFrame callback to updateHandler.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#setAnimate">setAnimate</a></b>(animate)
</div>
<div class="description">Set the animated state of the layer.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#setOptions">setOptions</a></b>(options)
</div>
<div class="description">Sets any options provided.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#setPaneName">setPaneName</a></b>(paneName)
</div>
<div class="description">Set the MapPane in which this layer will be displayed, by name.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#setResizeHandler">setResizeHandler</a></b>(opt_resizeHandler)
</div>
<div class="description">Set a function that will be called whenever the parent map and the overlay's canvas have been resized.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="reference.html#setUpdateHandler">setUpdateHandler</a></b>(opt_updateHandler)
</div>
<div class="description">Set a function that will be called when a repaint of the canvas is required.</div>
</td>
</tr>
</tbody>
</table>
<dl class="inheritsList"></dl>
<!-- ============================== events summary ======================== -->
<!-- ============================== constructor details ==================== -->
<div class="details"><a name="constructor"> </a>
<div class="sectionTitle">
Class Detail
</div>
<div class="fixedFont">
<b>CanvasLayer</b>(opt_options)
</div>
<div class="description">
A map layer that provides a canvas over the slippy map and a callback system for efficient animation. Requires canvas and CSS 2D transform support.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{CanvasLayerOptions}</span> <b>opt_options</b>
</dt>
<dd>Options to set in this CanvasLayer (optional). See <a href="CanvasLayerOptions.html">CanvasLayerOptions</a>.</dd>
</dl>
</div>
<!-- ============================== field details ========================== -->
<div class="sectionTitle">
Field Detail
</div>
<a name="canvas"> </a>
<div class="fixedFont">
<b>canvas</b>
</div>
<div class="description">
The canvas element.
</div>
<!-- ============================== method details ========================= -->
<div class="sectionTitle">
Method Detail
</div>
<a name="getPaneName"> </a>
<div class="fixedFont">
<span class="light">{string}</span>
<b>getPaneName</b>()
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{string}</span> The name of the current container pane.</dd>
</dl>
<hr />
<a name="getTopLeft"> </a>
<div class="fixedFont">
<span class="light">{google.maps.LatLng}</span>
<b>getTopLeft</b>()
</div>
<div class="description">
A convenience method to get the current LatLng coordinate of the top left of the current view of the map.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{google.maps.LatLng}</span> The top left coordinate.</dd>
</dl>
<hr />
<a name="isAnimated"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>isAnimated</b>()
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> Whether the canvas is animated.</dd>
</dl>
<hr />
<a name="scheduleUpdate"> </a>
<div class="fixedFont">
<b>scheduleUpdate</b>()
</div>
<div class="description">
Schedule a requestAnimationFrame callback to updateHandler. If one is already scheduled, there is no effect.
</div>
<hr />
<a name="setAnimate"> </a>
<div class="fixedFont">
<b>setAnimate</b>(animate)
</div>
<div class="description">
Set the animated state of the layer. If true, updateHandler will be called repeatedly, once per frame. If false, updateHandler will only be called when a map property changes that could require the canvas content to be redrawn.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{boolean}</span> <b>animate</b>
</dt>
<dd>Whether the canvas is animated.</dd>
</dl>
<hr />
<a name="setOptions"> </a>
<div class="fixedFont">
<b>setOptions</b>(options)
</div>
<div class="description">
Sets any options provided. See <a href="CanvasLayerOptions.html">CanvasLayerOptions</a> for more information.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{CanvasLayerOptions}</span> <b>options</b>
</dt>
<dd>The options to set.</dd>
</dl>
<hr />
<a name="setPaneName"> </a>
<div class="fixedFont">
<b>setPaneName</b>(paneName)
</div>
<div class="description">
Set the MapPane in which this layer will be displayed, by name. See <a href="https://developers.google.com/maps/documentation/javascript/reference#MapPanes">google.maps.MapPanes</a> for the panes available.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string}</span> <b>paneName</b>
</dt>
<dd>The name of the desired MapPane.</dd>
</dl>
<hr />
<a name="setResizeHandler"> </a>
<div class="fixedFont">
<b>setResizeHandler</b>(opt_resizeHandler)
</div>
<div class="description">
Set a function that will be called whenever the parent map and the overlay's canvas have been resized. If opt_resizeHandler is null or unspecified, any existing callback is removed.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{function}</span> <b>opt_resizeHandler</b>
</dt>
<dd>The resize callback function (optional).</dd>
</dl>
<hr />
<a name="setUpdateHandler"> </a>
<div class="fixedFont">
<b>setUpdateHandler</b>(opt_updateHandler)
</div>
<div class="description">
Set a function that will be called when a repaint of the canvas is required. If opt_updateHandler is null or unspecified, any existing callback is removed.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{function}</span> <b>opt_updateHandler</b>
</dt>
<dd>The update callback function (optional).</dd>
</dl>
<!-- ============================== event details ========================= -->
</div>
<!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both">
</div>
</body>
</html>