Skip to content

Commit

Permalink
KeyDragZoom: Tagging 2.0.5 release.
Browse files Browse the repository at this point in the history
  • Loading branch information
garylittlerlp committed Dec 9, 2010
1 parent 53c1ec6 commit 5cc3f9b
Show file tree
Hide file tree
Showing 10 changed files with 1,547 additions and 0 deletions.
182 changes: 182 additions & 0 deletions 2.0.5/docs/examples.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>KeyDragZoom Examples</title>
<link rel="stylesheet nofollow" type="text/css" href="http://code.google.com/css/codesite.css" />
<link rel="stylesheet nofollow" type="text/css" href="http://gmaps-utility-library.googlecode.com/svn/trunk/util/docs/template/local_extensions.css" />
<script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div>
<a name="Top"></a>
<h1><span lang="en-us">KeyDragZoom Examples</span></h1>
</div>

<div>
<h2><span lang="en-us">KeyDragZoom Reference</span></h2>
<p><a href="reference.html">Click here</a> to view the KeyDragZoom Reference.</p>
</div>

<a name="HowTo"></a>
<div>
<h2><span lang="en-us">Including Scripts</span></h2>
<p>The first step is to include <code>keydragzoom.js</code> or <code>keydragzoom_packed.js</code> in your document header after the Google Maps JavaScript API V2 has been included. You can use the online version if you do not want to download the script.</p>

<pre class="prettyprint">
&lt;script src=&quot;/path/to/keydragzoom_packed.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</pre>
</div>

<div>
<h2><span lang="en-us">Enabling KeyDragZoom</span></h2>
<p>You simply call <code>GMap2.enableKeyDragZoom()</code> to enable KeyDragZoom, just as you would call <code>GMap2.enableScrollWheelZoom()</code> to enable scrollwheel zooming.</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.227, -80.84), 12);

map.enableKeyDragZoom();

</pre>

<p>
<a href="../examples/dragzoom.html">View example</a> |
<a href="../examples/dragzoom.html?packed">Packed</a> |
</p>
</div>

<div>
<h2><span lang="en-us">Styling the Zoom Box and the Veil</span></h2>
<p>You can pass some css properties when you enable KeyDragZoom. Those associated with <code>boxStyle</code> are applied to the zoom box the user drags across the area of interest and those associated with <code>veilStyle</code> are applied to the veil that covers the map when the hot key is down. In the following example, the zoom box is transparent with a 4-pixel dashed black border and the veil is red with 35% opacity.</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.2903, -123.1294), 13);

map.enableKeyDragZoom({
key: "shift",
boxStyle: {
border: "4px dashed black",
backgroundColor: "transparent",
opacity: 1.0
},
veilStyle: {
backgroundColor: "red",
opacity: 0.35,
cursor: "crosshair"
}
});
</pre>

<p>
<a href="../examples/stylebox.html">View example</a> |
<a href="../examples/stylebox.html?packed">Packed</a> |
</p>
</div>

<div>
<h2><span lang="en-us">Using a Different Hot Key</span></h2>
<p>If you do not want to use the Shift key as the hot key, you can pass one of the other two keys: Alt or Ctrl. In the following example, you can start a drag zoom operation by holding down the Ctrl key.</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.227, -80.84), 12);

map.enableKeyDragZoom({
key: 'ctrl'
});
</pre>

<p>
<a href="../examples/ctrlkey.html">View example</a> |
<a href="../examples/ctrlkey.html?packed">Packed</a> |
</p>
</div>

<div>
<h2><span lang="en-us">Visual Drag Zoom Control</span></h2>
<p>You can also use a visual control to turn KeyDragZoom on and off. Set the <code>visualEnabled</code> parameter to <code>true</code>, indicate the position of the control with <code>visualPosition</code> and <code>visualPositionMargin</code>, and use <code>visualSprite</code> to specify the URL for the sprite containing the images of the control in the on, hot, and off states. (The control is hot when the mouse moves over it.) <code>visualSize</code> holds the size of the images in the sprite. Use the <code>visualTips</code> property to set the values of the help tips to be displayed when the control is on and off.</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.2903, -123.1294), 13);

map.enableKeyDragZoom({
visualEnabled: true,
visualPosition: new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(27, 295)),
visualSprite: "http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png",
visualSize: new google.maps.Size(20, 20),
visualTips: {
off: "Turn on",
on: "Turn off"
}
});
</pre>

<p>
<a href="../examples/visual.html">View example</a> |
<a href="../examples/visual.html?packed">Packed</a> |
</p>
</div>

<div>
<h2><span lang="en-us">Multiple Maps Supported</span></h2>
<p>Each map on the same webpage can have its own independent KeyDragZoom tool.</p>

<pre class="prettyprint">
var map1 = new GMap2(document.getElementById("map1"));
map1.enableKeyDragZoom();
var map2 = new GMap2(document.getElementById("map2"));
map2.enableKeyDragZoom();
</pre>

<p>
<a href="../examples/multimap.html">View example</a> |
<a href="../examples/multimap.html?packed">Packed</a> |
</p>
</div>

<div>
<h2><span lang="en-us">KeyDragZoom Events</span></h2>
<p>Different events are triggered at key moments of a drag zoom operation.</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.49088, -123.75446), 12);

map.enableKeyDragZoom();
var dz = map.getDragZoomObject();
GEvent.addListener(dz, 'activate', function () {
GLog.write('KeyDragZoom Activated');
});
GEvent.addListener(dz, 'deactivate', function () {
GLog.write('KeyDragZoom Deactivated');
});
GEvent.addListener(dz, 'dragstart', function (latlng) {
GLog.write('KeyDragZoom Started: ') + latlng;
});
GEvent.addListener(dz, 'drag', function (startPt, endPt) {
GLog.write('KeyDragZoom Dragging: ') + startPt + endPt;
});
GEvent.addListener(dz, 'dragend', function (bnds) {
GLog.write('KeyDragZoom Ended: ') + bnds;
});
</pre>

<p>
<a href="../examples/events.html">View example</a> |
<a href="../examples/events.html?packed">Packed</a> |
</p>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3946449-5");
pageTracker._trackPageview();
</script>
</body>
</html>
Loading

0 comments on commit 5cc3f9b

Please sign in to comment.