Skip to content
Browse files

In progress commit

  • Loading branch information...
1 parent 6129d57 commit 3c43b84485e320327f42e8c883594df2ec7e1814 @simonholgate committed Mar 9, 2012
View
4 public/css/one.css
@@ -1,15 +1,15 @@
/* RESET */
-html, body {
+html, body, #map_canvas {
margin: 0;
padding: 0;
+ height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
-p,
blockquote,
pre,
a,
View
5 public/design.html
@@ -23,8 +23,9 @@
these files will update the views in the ClojureScript application.
</p>
<ul>
- <li><a href="/design/form.html">Form</a></li>
- <li><a href="/design/greeting.html">Greeting</a></li>
+ <li><a href="/design/mapview.html">Map</a></li>
+<li><a href="/design/form.html">Form</a></li>
+<li><a href="/design/greeting.html">Greeting</a></li>
</ul>
</div>
</div>
View
856 public/js/keydragzoom_returncoords_sjh.js
@@ -0,0 +1,856 @@
+/**
+ * @name KeyDragZoom for V3
+ * @version 2.0.5 [December 8, 2010]
+ * @author: Nianwei Liu [nianwei at gmail dot com] & Gary Little [gary at luxcentral dot com]
+ * @fileoverview This library adds a drag zoom capability to a V3 Google map.
+ * When drag zoom is enabled, holding down a designated hot key <code>(shift | ctrl | alt)</code>
+ * while dragging a box around an area of interest will zoom the map in to that area when
+ * the mouse button is released. Optionally, a visual control can also be supplied for turning
+ * a drag zoom operation on and off.
+ * Only one line of code is needed: <code>google.maps.Map.enableKeyDragZoom();</code>
+ * <p>
+ * NOTE: Do not use Ctrl as the hot key with Google Maps JavaScript API V3 since, unlike with V2,
+ * it causes a context menu to appear when running on the Macintosh.
+ * <p>
+ * Note that if the map's container has a border around it, the border widths must be specified
+ * in pixel units (or as thin, medium, or thick). This is required because of an MSIE limitation.
+ * <p>NL: 2009-05-28: initial port to core API V3.
+ * <br>NL: 2009-11-02: added a temp fix for -moz-transform for FF3.5.x using code from Paul Kulchenko (http://notebook.kulchenko.com/maps/gridmove).
+ * <br>NL: 2010-02-02: added a fix for IE flickering on divs onmousemove, caused by scroll value when get mouse position.
+ * <br>GL: 2010-06-15: added a visual control option.
+ */
+/*!
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+(function () {
+ /*jslint browser:true */
+ /*global window,google */
+ /* Utility functions use "var funName=function()" syntax to allow use of the */
+ /* Dean Edwards Packer compression tool (with Shrink variables, without Base62 encode). */
+
+ /**
+ * Converts "thin", "medium", and "thick" to pixel widths
+ * in an MSIE environment. Not called for other browsers
+ * because getComputedStyle() returns pixel widths automatically.
+ * @param {string} widthValue The value of the border width parameter.
+ */
+ var toPixels = function (widthValue) {
+ var px;
+ switch (widthValue) {
+ case "thin":
+ px = "2px";
+ break;
+ case "medium":
+ px = "4px";
+ break;
+ case "thick":
+ px = "6px";
+ break;
+ default:
+ px = widthValue;
+ }
+ return px;
+ };
+ /**
+ * Get the widths of the borders of an HTML element.
+ *
+ * @param {Node} h The HTML element.
+ * @return {Object} The width object {top, bottom left, right}.
+ */
+ var getBorderWidths = function (h) {
+ var computedStyle;
+ var bw = {};
+ if (document.defaultView && document.defaultView.getComputedStyle) {
+ computedStyle = h.ownerDocument.defaultView.getComputedStyle(h, "");
+ if (computedStyle) {
+ // The computed styles are always in pixel units (good!)
+ bw.top = parseInt(computedStyle.borderTopWidth, 10) || 0;
+ bw.bottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;
+ bw.left = parseInt(computedStyle.borderLeftWidth, 10) || 0;
+ bw.right = parseInt(computedStyle.borderRightWidth, 10) || 0;
+ return bw;
+ }
+ } else if (document.documentElement.currentStyle) { // MSIE
+ if (h.currentStyle) {
+ // The current styles may not be in pixel units so try to convert (bad!)
+ bw.top = parseInt(toPixels(h.currentStyle.borderTopWidth), 10) || 0;
+ bw.bottom = parseInt(toPixels(h.currentStyle.borderBottomWidth), 10) || 0;
+ bw.left = parseInt(toPixels(h.currentStyle.borderLeftWidth), 10) || 0;
+ bw.right = parseInt(toPixels(h.currentStyle.borderRightWidth), 10) || 0;
+ return bw;
+ }
+ }
+ // Shouldn't get this far for any modern browser
+ bw.top = parseInt(h.style["border-top-width"], 10) || 0;
+ bw.bottom = parseInt(h.style["border-bottom-width"], 10) || 0;
+ bw.left = parseInt(h.style["border-left-width"], 10) || 0;
+ bw.right = parseInt(h.style["border-right-width"], 10) || 0;
+ return bw;
+ };
+
+ // Page scroll values for use by getMousePosition. To prevent flickering on MSIE
+ // they are calculated only when the document actually scrolls, not every time the
+ // mouse moves (as they would be if they were calculated inside getMousePosition).
+ var scroll = {
+ x: 0,
+ y: 0
+ };
+ var getScrollValue = function (e) {
+ scroll.x = (typeof document.documentElement.scrollLeft !== "undefined" ? document.documentElement.scrollLeft : document.body.scrollLeft);
+ scroll.y = (typeof document.documentElement.scrollTop !== "undefined" ? document.documentElement.scrollTop : document.body.scrollTop);
+ };
+ getScrollValue();
+
+ /**
+ * Get the position of the mouse relative to the document.
+ * @param {Event} e The mouse event.
+ * @return {Object} The position object {left, top}.
+ */
+ var getMousePosition = function (e) {
+ var posX = 0, posY = 0;
+ e = e || window.event;
+ if (typeof e.pageX !== "undefined") {
+ posX = e.pageX;
+ posY = e.pageY;
+ } else if (typeof e.clientX !== "undefined") { // MSIE
+ posX = e.clientX + scroll.x;
+ posY = e.clientY + scroll.y;
+ }
+ return {
+ left: posX,
+ top: posY
+ };
+ };
+ /**
+ * Get the position of an HTML element relative to the document.
+ * @param {Node} h The HTML element.
+ * @return {Object} The position object {left, top}.
+ */
+ var getElementPosition = function (h) {
+ var posX = h.offsetLeft;
+ var posY = h.offsetTop;
+ var parent = h.offsetParent;
+ // Add offsets for all ancestors in the hierarchy
+ while (parent !== null) {
+ // Adjust for scrolling elements which may affect the map position.
+ //
+ // See http://www.howtocreate.co.uk/tutorials/javascript/browserspecific
+ //
+ // "...make sure that every element [on a Web page] with an overflow
+ // of anything other than visible also has a position style set to
+ // something other than the default static..."
+ if (parent !== document.body && parent !== document.documentElement) {
+ posX -= parent.scrollLeft;
+ posY -= parent.scrollTop;
+ }
+ // See http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/4cb86c0c1037a5e5
+ // Example: http://notebook.kulchenko.com/maps/gridmove
+ var m = parent;
+ // This is the "normal" way to get offset information:
+ var moffx = m.offsetLeft;
+ var moffy = m.offsetTop;
+ // This covers those cases where a transform is used:
+ if (!moffx && !moffy && window.getComputedStyle) {
+ var matrix = document.defaultView.getComputedStyle(m, null).MozTransform ||
+ document.defaultView.getComputedStyle(m, null).WebkitTransform;
+ if (matrix) {
+ if (typeof matrix === "string") {
+ var parms = matrix.split(",");
+ moffx += parseInt(parms[4], 10) || 0;
+ moffy += parseInt(parms[5], 10) || 0;
+ }
+ }
+ }
+ posX += moffx;
+ posY += moffy;
+ parent = parent.offsetParent;
+ }
+ return {
+ left: posX,
+ top: posY
+ };
+ };
+ /**
+ * Set the properties of an object to those from another object.
+ * @param {Object} obj The target object.
+ * @param {Object} vals The source object.
+ */
+ var setVals = function (obj, vals) {
+ if (obj && vals) {
+ for (var x in vals) {
+ if (vals.hasOwnProperty(x)) {
+ obj[x] = vals[x];
+ }
+ }
+ }
+ return obj;
+ };
+ /**
+ * Set the opacity. If op is not passed in, this function just performs an MSIE fix.
+ * @param {Node} h The HTML element.
+ * @param {number} op The opacity value (0-1).
+ */
+ var setOpacity = function (h, op) {
+ if (typeof op !== "undefined") {
+ h.style.opacity = op;
+ }
+ if (typeof h.style.opacity !== "undefined" && h.style.opacity !== "") {
+ h.style.filter = "alpha(opacity=" + (h.style.opacity * 100) + ")";
+ }
+ };
+ /**
+ * @name KeyDragZoomOptions
+ * @class This class represents the optional parameter passed into <code>google.maps.Map.enableKeyDragZoom</code>.
+ * @property {string} [key] The hot key to hold down to activate a drag zoom, <code>shift | ctrl | alt</code>.
+ * The default is <code>shift</code>. NOTE: Do not use Ctrl as the hot key with Google Maps JavaScript API V3
+ * since, unlike with V2, it causes a context menu to appear when running on the Macintosh. Also note that the
+ * <code>alt</code> hot key refers to the Option key on a Macintosh.
+ * @property {Object} [boxStyle] An object literal defining the css styles of the zoom box.
+ * The default is <code>{border: "4px solid #736AFF"}</code>.
+ * Border widths must be specified in pixel units (or as thin, medium, or thick).
+ * @property {Object} [veilStyle] An object literal defining the css styles of the veil pane
+ * which covers the map when a drag zoom is activated. The previous name for this property was
+ * <code>paneStyle</code> but the use of this name is now deprecated.
+ * The default is <code>{backgroundColor: "gray", opacity: 0.25, cursor: "crosshair"}</code>.
+ * @property {boolean} [visualEnabled] A flag indicating whether a visual control is to be used.
+ * The default is <code>false</code>.
+ * @property {string} [visualClass] The name of the CSS class defining the styles for the visual
+ * control. To prevent the visual control from being printed, set this property to the name of
+ * a class, defined inside a <code>@media print</code> rule, which sets the CSS
+ * <code>display</code> style to <code>none</code>.
+ * @property {ControlPosition} [visualPosition] The position of the visual control.
+ * The default position is on the left side of the map below other controls in the top left
+ * &mdash; i.e., a position of <code>google.maps.ControlPosition.LEFT_TOP</code>.
+ * @property {Size} [visualPositionOffset] The width and height values provided by this
+ * property are the offsets (in pixels) from the location at which the control would normally
+ * be drawn to the desired drawing location. The default is (35,0).
+ * @property {number} [visualPositionIndex] The index of the visual control.
+ * The index is for controlling the placement of the control relative to other controls at the
+ * position given by <code>visualPosition</code>; controls with a lower index are placed first.
+ * Use a negative value to place the control <i>before</i> any default controls. No index is
+ * generally required; the default is <code>null</code>.
+ * @property {String} [visualSprite] The URL of the sprite image used for showing the visual control
+ * in the on, off, and hot (i.e., when the mouse is over the control) states. The three images
+ * within the sprite must be the same size and arranged in on-hot-off order in a single row
+ * with no spaces between images.
+ * The default is <code>http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png</code>.
+ * @property {Size} [visualSize] The width and height values provided by this property are
+ * the size (in pixels) of each of the images within <code>visualSprite</code>.
+ * The default is (20,20).
+ * @property {Object} [visualTips] An object literal defining the help tips that appear when
+ * the mouse moves over the visual control. The <code>off</code> property is the tip to be shown
+ * when the control is off and the <code>on</code> property is the tip to be shown when the
+ * control is on.
+ * The default values are "Turn on drag zoom mode" and "Turn off drag zoom mode", respectively.
+ */
+ /**
+ * @name DragZoom
+ * @class This class represents a drag zoom object for a map. The object is activated by holding down the hot key
+ * or by turning on the visual control.
+ * This object is created when <code>google.maps.Map.enableKeyDragZoom</code> is called; it cannot be created directly.
+ * Use <code>google.maps.Map.getDragZoomObject</code> to gain access to this object in order to attach event listeners.
+ * @param {Map} map The map to which the DragZoom object is to be attached.
+ * @param {KeyDragZoomOptions} [opt_zoomOpts] The optional parameters.
+ */
+ function DragZoom(map, opt_zoomOpts) {
+ var me = this;
+ var ov = new google.maps.OverlayView();
+ ov.onAdd = function () {
+ me.init_(map, opt_zoomOpts);
+ };
+ ov.draw = function () {
+ };
+ ov.onRemove = function () {
+ };
+ ov.setMap(map);
+ this.prjov_ = ov;
+ }
+ /**
+ * Initialize the tool.
+ * @param {Map} map The map to which the DragZoom object is to be attached.
+ * @param {KeyDragZoomOptions} [opt_zoomOpts] The optional parameters.
+ */
+ DragZoom.prototype.init_ = function (map, opt_zoomOpts) {
+ var i;
+ var me = this;
+ this.map_ = map;
+ opt_zoomOpts = opt_zoomOpts || {};
+ this.key_ = opt_zoomOpts.key || "shift";
+ this.key_ = this.key_.toLowerCase();
+ this.borderWidths_ = getBorderWidths(this.map_.getDiv());
+ this.veilDiv_ = [];
+ for (i = 0; i < 4; i++) {
+ this.veilDiv_[i] = document.createElement("div");
+ // Prevents selection of other elements on the webpage
+ // when a drag zoom operation is in progress:
+ this.veilDiv_[i].onselectstart = function () {
+ return false;
+ };
+ // Apply default style values for the veil:
+ setVals(this.veilDiv_[i].style, {
+ backgroundColor: "gray",
+ opacity: 0.25,
+ cursor: "crosshair"
+ });
+ // Apply style values specified in veilStyle parameter:
+ setVals(this.veilDiv_[i].style, opt_zoomOpts.paneStyle); // Old option name was "paneStyle"
+ setVals(this.veilDiv_[i].style, opt_zoomOpts.veilStyle); // New name is "veilStyle"
+ // Apply mandatory style values:
+ setVals(this.veilDiv_[i].style, {
+ position: "absolute",
+ overflow: "hidden",
+ display: "none"
+ });
+ // Workaround for Firefox Shift-Click problem:
+ if (this.key_ === "shift") {
+ this.veilDiv_[i].style.MozUserSelect = "none";
+ }
+ setOpacity(this.veilDiv_[i]);
+ // An IE fix: If the background is transparent it cannot capture mousedown
+ // events, so if it is, change the background to white with 0 opacity.
+ if (this.veilDiv_[i].style.backgroundColor === "transparent") {
+ this.veilDiv_[i].style.backgroundColor = "white";
+ setOpacity(this.veilDiv_[i], 0);
+ }
+ this.map_.getDiv().appendChild(this.veilDiv_[i]);
+ }
+
+ this.visualEnabled_ = opt_zoomOpts.visualEnabled || false;
+ this.visualClass_ = opt_zoomOpts.visualClass || "";
+ this.visualPosition_ = opt_zoomOpts.visualPosition || google.maps.ControlPosition.LEFT_TOP;
+ this.visualPositionOffset_ = opt_zoomOpts.visualPositionOffset || new google.maps.Size(35, 0);
+ this.visualPositionIndex_ = opt_zoomOpts.visualPositionIndex || null;
+ this.visualSprite_ = opt_zoomOpts.visualSprite || "http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png";
+ this.visualSize_ = opt_zoomOpts.visualSize || new google.maps.Size(20, 20);
+ this.visualTips_ = opt_zoomOpts.visualTips || {};
+ this.visualTips_.off = this.visualTips_.off || "Turn on drag zoom mode";
+ this.visualTips_.on = this.visualTips_.on || "Turn off drag zoom mode";
+
+ this.boxDiv_ = document.createElement("div");
+ // Apply default style values for the zoom box:
+ setVals(this.boxDiv_.style, {
+ border: "4px solid #736AFF"
+ });
+ // Apply style values specified in boxStyle parameter:
+ setVals(this.boxDiv_.style, opt_zoomOpts.boxStyle);
+ // Apply mandatory style values:
+ setVals(this.boxDiv_.style, {
+ position: "absolute",
+ display: "none"
+ });
+ setOpacity(this.boxDiv_);
+ this.map_.getDiv().appendChild(this.boxDiv_);
+ this.boxBorderWidths_ = getBorderWidths(this.boxDiv_);
+
+ this.listeners_ = [
+ google.maps.event.addDomListener(document, "keydown", function (e) {
+ me.onKeyDown_(e);
+ }),
+ google.maps.event.addDomListener(document, "keyup", function (e) {
+ me.onKeyUp_(e);
+ }),
+ google.maps.event.addDomListener(this.veilDiv_[0], "mousedown", function (e) {
+ me.onMouseDown_(e);
+ }),
+ google.maps.event.addDomListener(this.veilDiv_[1], "mousedown", function (e) {
+ me.onMouseDown_(e);
+ }),
+ google.maps.event.addDomListener(this.veilDiv_[2], "mousedown", function (e) {
+ me.onMouseDown_(e);
+ }),
+ google.maps.event.addDomListener(this.veilDiv_[3], "mousedown", function (e) {
+ me.onMouseDown_(e);
+ }),
+ google.maps.event.addDomListener(document, "mousedown", function (e) {
+ me.onMouseDownDocument_(e);
+ }),
+ google.maps.event.addDomListener(document, "mousemove", function (e) {
+ me.onMouseMove_(e);
+ }),
+ google.maps.event.addDomListener(document, "mouseup", function (e) {
+ me.onMouseUp_(e);
+ }),
+ google.maps.event.addDomListener(window, "scroll", getScrollValue)
+ ];
+
+ this.hotKeyDown_ = false;
+ this.mouseDown_ = false;
+ this.dragging_ = false;
+ this.startPt_ = null;
+ this.endPt_ = null;
+ this.mapWidth_ = null;
+ this.mapHeight_ = null;
+ this.mousePosn_ = null;
+ this.mapPosn_ = null;
+
+ if (this.visualEnabled_) {
+ this.buttonDiv_ = this.initControl_(this.visualPositionOffset_);
+ if (this.visualPositionIndex_ !== null) {
+ this.buttonDiv_.index = this.visualPositionIndex_;
+ }
+ this.map_.controls[this.visualPosition_].push(this.buttonDiv_);
+ this.controlIndex_ = this.map_.controls[this.visualPosition_].length - 1;
+ }
+ };
+ /**
+ * Initializes the visual control and returns its DOM element.
+ * @param {Size} offset The offset of the control from its normal position.
+ * @return {Node} The DOM element containing the visual control.
+ */
+ DragZoom.prototype.initControl_ = function (offset) {
+ var control;
+ var image;
+ var me = this;
+
+ control = document.createElement("div");
+ control.className = this.visualClass_;
+ control.style.position = "relative";
+ control.style.overflow = "hidden";
+ control.style.height = this.visualSize_.height + "px";
+ control.style.width = this.visualSize_.width + "px";
+ control.title = this.visualTips_.off;
+ image = document.createElement("img");
+ image.src = this.visualSprite_;
+ image.style.position = "absolute";
+ image.style.left = -(this.visualSize_.width * 2) + "px";
+ image.style.top = 0 + "px";
+ control.appendChild(image);
+ control.onclick = function (e) {
+ me.hotKeyDown_ = !me.hotKeyDown_;
+ if (me.hotKeyDown_) {
+ me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 0) + "px";
+ me.buttonDiv_.title = me.visualTips_.on;
+ me.activatedByControl_ = true;
+ google.maps.event.trigger(me, "activate");
+ } else {
+ me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 2) + "px";
+ me.buttonDiv_.title = me.visualTips_.off;
+ google.maps.event.trigger(me, "deactivate");
+ }
+ me.onMouseMove_(e); // Updates the veil
+ };
+ control.onmouseover = function () {
+ me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 1) + "px";
+ };
+ control.onmouseout = function () {
+ if (me.hotKeyDown_) {
+ me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 0) + "px";
+ me.buttonDiv_.title = me.visualTips_.on;
+ } else {
+ me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 2) + "px";
+ me.buttonDiv_.title = me.visualTips_.off;
+ }
+ };
+ control.ondragstart = function () {
+ return false;
+ };
+ setVals(control.style, {
+ cursor: "pointer",
+ marginTop: offset.height + "px",
+ marginLeft: offset.width + "px"
+ });
+ return control;
+ };
+ /**
+ * Returns <code>true</code> if the hot key is being pressed when an event occurs.
+ * @param {Event} e The keyboard event.
+ * @return {boolean} Flag indicating whether the hot key is down.
+ */
+ DragZoom.prototype.isHotKeyDown_ = function (e) {
+ var isHot;
+ e = e || window.event;
+ isHot = (e.shiftKey && this.key_ === "shift") || (e.altKey && this.key_ === "alt") || (e.ctrlKey && this.key_ === "ctrl");
+ if (!isHot) {
+ // Need to look at keyCode for Opera because it
+ // doesn't set the shiftKey, altKey, ctrlKey properties
+ // unless a non-modifier event is being reported.
+ //
+ // See http://cross-browser.com/x/examples/shift_mode.php
+ // Also see http://unixpapa.com/js/key.html
+ switch (e.keyCode) {
+ case 16:
+ if (this.key_ === "shift") {
+ isHot = true;
+ }
+ break;
+ case 17:
+ if (this.key_ === "ctrl") {
+ isHot = true;
+ }
+ break;
+ case 18:
+ if (this.key_ === "alt") {
+ isHot = true;
+ }
+ break;
+ }
+ }
+ return isHot;
+ };
+ /**
+ * Returns <code>true</code> if the mouse is on top of the map div.
+ * The position is captured in onMouseMove_.
+ * @return {boolean}
+ */
+ DragZoom.prototype.isMouseOnMap_ = function () {
+ var mousePosn = this.mousePosn_;
+ if (mousePosn) {
+ var mapPosn = this.mapPosn_;
+ var mapDiv = this.map_.getDiv();
+ return mousePosn.left > mapPosn.left && mousePosn.left < (mapPosn.left + mapDiv.offsetWidth) &&
+ mousePosn.top > mapPosn.top && mousePosn.top < (mapPosn.top + mapDiv.offsetHeight);
+ } else {
+ // if user never moved mouse
+ return false;
+ }
+ };
+ /**
+ * Show the veil if the hot key is down and the mouse is over the map,
+ * otherwise hide the veil.
+ */
+ DragZoom.prototype.setVeilVisibility_ = function () {
+ var i;
+ if (this.map_ && this.hotKeyDown_ && this.isMouseOnMap_()) {
+ var mapDiv = this.map_.getDiv();
+ this.mapWidth_ = mapDiv.offsetWidth - (this.borderWidths_.left + this.borderWidths_.right);
+ this.mapHeight_ = mapDiv.offsetHeight - (this.borderWidths_.top + this.borderWidths_.bottom);
+ if (this.activatedByControl_) { // Veil covers entire map (except control)
+ var left = parseInt(this.buttonDiv_.style.left, 10) + this.visualPositionOffset_.width;
+ var top = parseInt(this.buttonDiv_.style.top, 10) + this.visualPositionOffset_.height;
+ var width = this.visualSize_.width;
+ var height = this.visualSize_.height;
+ // Left veil rectangle:
+ this.veilDiv_[0].style.top = "0px";
+ this.veilDiv_[0].style.left = "0px";
+ this.veilDiv_[0].style.width = left + "px";
+ this.veilDiv_[0].style.height = this.mapHeight_ + "px";
+ // Right veil rectangle:
+ this.veilDiv_[1].style.top = "0px";
+ this.veilDiv_[1].style.left = (left + width) + "px";
+ this.veilDiv_[1].style.width = (this.mapWidth_ - (left + width)) + "px";
+ this.veilDiv_[1].style.height = this.mapHeight_ + "px";
+ // Top veil rectangle:
+ this.veilDiv_[2].style.top = "0px";
+ this.veilDiv_[2].style.left = left + "px";
+ this.veilDiv_[2].style.width = width + "px";
+ this.veilDiv_[2].style.height = top + "px";
+ // Bottom veil rectangle:
+ this.veilDiv_[3].style.top = (top + height) + "px";
+ this.veilDiv_[3].style.left = left + "px";
+ this.veilDiv_[3].style.width = width + "px";
+ this.veilDiv_[3].style.height = (this.mapHeight_ - (top + height)) + "px";
+ for (i = 0; i < this.veilDiv_.length; i++) {
+ this.veilDiv_[i].style.display = "block";
+ }
+ } else {
+ this.veilDiv_[0].style.left = "0px";
+ this.veilDiv_[0].style.top = "0px";
+ this.veilDiv_[0].style.width = this.mapWidth_ + "px";
+ this.veilDiv_[0].style.height = this.mapHeight_ + "px";
+ for (i = 1; i < this.veilDiv_.length; i++) {
+ this.veilDiv_[i].style.width = "0px";
+ this.veilDiv_[i].style.height = "0px";
+ }
+ for (i = 0; i < this.veilDiv_.length; i++) {
+ this.veilDiv_[i].style.display = "block";
+ }
+ }
+ } else {
+ for (i = 0; i < this.veilDiv_.length; i++) {
+ this.veilDiv_[i].style.display = "none";
+ }
+ }
+ };
+ /**
+ * Handle key down. Show the veil if the hot key has been pressed.
+ * @param {Event} e The keyboard event.
+ */
+ DragZoom.prototype.onKeyDown_ = function (e) {
+ if (this.map_ && !this.hotKeyDown_ && this.isHotKeyDown_(e)) {
+ this.mapPosn_ = getElementPosition(this.map_.getDiv());
+ this.hotKeyDown_ = true;
+ this.activatedByControl_ = false;
+ this.setVeilVisibility_();
+ /**
+ * This event is fired when the hot key is pressed.
+ * @name DragZoom#activate
+ * @event
+ */
+ google.maps.event.trigger(this, "activate");
+ }
+ if (this.visualEnabled_ && this.isHotKeyDown_(e)) {
+ this.buttonDiv_.style.display = "none";
+ }
+ };
+ /**
+ * Get the <code>google.maps.Point</code> of the mouse position.
+ * @param {Event} e The mouse event.
+ * @return {Point} The mouse position.
+ */
+ DragZoom.prototype.getMousePoint_ = function (e) {
+ var mousePosn = getMousePosition(e);
+ var p = new google.maps.Point();
+ p.x = mousePosn.left - this.mapPosn_.left - this.borderWidths_.left;
+ p.y = mousePosn.top - this.mapPosn_.top - this.borderWidths_.top;
+ p.x = Math.min(p.x, this.mapWidth_);
+ p.y = Math.min(p.y, this.mapHeight_);
+ p.x = Math.max(p.x, 0);
+ p.y = Math.max(p.y, 0);
+ return p;
+ };
+ /**
+ * Handle mouse down.
+ * @param {Event} e The mouse event.
+ */
+ DragZoom.prototype.onMouseDown_ = function (e) {
+ if (this.map_ && this.hotKeyDown_) {
+ this.mapPosn_ = getElementPosition(this.map_.getDiv());
+ this.dragging_ = true;
+ this.startPt_ = this.endPt_ = this.getMousePoint_(e);
+ this.boxDiv_.style.width = this.boxDiv_.style.height = "0px";
+ var prj = this.prjov_.getProjection();
+ var latlng = prj.fromContainerPixelToLatLng(this.startPt_);
+ if (this.visualEnabled_) {
+ this.buttonDiv_.style.display = "none";
+ }
+ /**
+ * This event is fired when the drag operation begins.
+ * The parameter passed is the geographic position of the starting point.
+ * @name DragZoom#dragstart
+ * @param {LatLng} latlng The geographic position of the starting point.
+ * @event
+ */
+ google.maps.event.trigger(this, "dragstart", latlng);
+ }
+ };
+ /**
+ * Handle mouse down at the document level.
+ * @param {Event} e The mouse event.
+ */
+ DragZoom.prototype.onMouseDownDocument_ = function (e) {
+ this.mouseDown_ = true;
+ };
+ /**
+ * Handle mouse move.
+ * @param {Event} e The mouse event.
+ */
+ DragZoom.prototype.onMouseMove_ = function (e) {
+ this.mousePosn_ = getMousePosition(e);
+ if (this.dragging_) {
+ this.endPt_ = this.getMousePoint_(e);
+ var left = Math.min(this.startPt_.x, this.endPt_.x);
+ var top = Math.min(this.startPt_.y, this.endPt_.y);
+ var width = Math.abs(this.startPt_.x - this.endPt_.x);
+ var height = Math.abs(this.startPt_.y - this.endPt_.y);
+ // For benefit of MSIE 7/8 ensure following values are not negative:
+ var boxWidth = Math.max(0, width - (this.boxBorderWidths_.left + this.boxBorderWidths_.right));
+ var boxHeight = Math.max(0, height - (this.boxBorderWidths_.top + this.boxBorderWidths_.bottom));
+ // Left veil rectangle:
+ this.veilDiv_[0].style.top = "0px";
+ this.veilDiv_[0].style.left = "0px";
+ this.veilDiv_[0].style.width = left + "px";
+ this.veilDiv_[0].style.height = this.mapHeight_ + "px";
+ // Right veil rectangle:
+ this.veilDiv_[1].style.top = "0px";
+ this.veilDiv_[1].style.left = (left + width) + "px";
+ this.veilDiv_[1].style.width = (this.mapWidth_ - (left + width)) + "px";
+ this.veilDiv_[1].style.height = this.mapHeight_ + "px";
+ // Top veil rectangle:
+ this.veilDiv_[2].style.top = "0px";
+ this.veilDiv_[2].style.left = left + "px";
+ this.veilDiv_[2].style.width = width + "px";
+ this.veilDiv_[2].style.height = top + "px";
+ // Bottom veil rectangle:
+ this.veilDiv_[3].style.top = (top + height) + "px";
+ this.veilDiv_[3].style.left = left + "px";
+ this.veilDiv_[3].style.width = width + "px";
+ this.veilDiv_[3].style.height = (this.mapHeight_ - (top + height)) + "px";
+ // Selection rectangle:
+ this.boxDiv_.style.top = top + "px";
+ this.boxDiv_.style.left = left + "px";
+ this.boxDiv_.style.width = boxWidth + "px";
+ this.boxDiv_.style.height = boxHeight + "px";
+ this.boxDiv_.style.display = "block";
+ /**
+ * This event is fired repeatedly while the user drags a box across the area of interest.
+ * The southwest and northeast point are passed as parameters of type <code>google.maps.Point</code>
+ * (for performance reasons), relative to the map container. Also passed is the projection object
+ * so that the event listener, if necessary, can convert the pixel positions to geographic
+ * coordinates using <code>google.maps.MapCanvasProjection.fromContainerPixelToLatLng</code>.
+ * @name DragZoom#drag
+ * @param {Point} southwestPixel The southwest point of the selection area.
+ * @param {Point} northeastPixel The northeast point of the selection area.
+ * @param {MapCanvasProjection} prj The projection object.
+ * @event
+ */
+ google.maps.event.trigger(this, "drag", new google.maps.Point(left, top + height), new google.maps.Point(left + width, top), this.prjov_.getProjection());
+ } else if (!this.mouseDown_) {
+ this.mapPosn_ = getElementPosition(this.map_.getDiv());
+ this.setVeilVisibility_();
+ }
+ };
+ /**
+ * Handle mouse up.
+ * @param {Event} e The mouse event.
+ */
+ DragZoom.prototype.onMouseUp_ = function (e) {
+ var z;
+ var me = this;
+ this.mouseDown_ = false;
+ if (this.dragging_) {
+ if ((this.getMousePoint_(e).x === this.startPt_.x) && (this.getMousePoint_(e).y === this.startPt_.y)) {
+ this.onKeyUp_(e); // Cancel event
+ return;
+ }
+ var left = Math.min(this.startPt_.x, this.endPt_.x);
+ var top = Math.min(this.startPt_.y, this.endPt_.y);
+ var width = Math.abs(this.startPt_.x - this.endPt_.x);
+ var height = Math.abs(this.startPt_.y - this.endPt_.y);
+ // Google Maps API bug: setCenter() doesn't work as expected if the map has a
+ // border on the left or top. The code here includes a workaround for this problem.
+ var kGoogleCenteringBug = true;
+ if (kGoogleCenteringBug) {
+ left += this.borderWidths_.left;
+ top += this.borderWidths_.top;
+ }
+
+ var prj = this.prjov_.getProjection();
+ var sw = prj.fromContainerPixelToLatLng(new google.maps.Point(left, top + height));
+ var ne = prj.fromContainerPixelToLatLng(new google.maps.Point(left + width, top));
+ var bnds = new google.maps.LatLngBounds(sw, ne);
+
+ // Sometimes fitBounds causes a zoom OUT, so restore original zoom level if this happens.
+ //z = this.map_.getZoom();
+ //this.map_.fitBounds(bnds);
+ //if (this.map_.getZoom() < z) {
+ // this.map_.setZoom(z);
+ //}
+
+ // Redraw box after zoom:
+ //var swPt = prj.fromLatLngToContainerPixel(sw);
+ //var nePt = prj.fromLatLngToContainerPixel(ne);
+ //if (kGoogleCenteringBug) {
+ // swPt.x -= this.borderWidths_.left;
+ // swPt.y -= this.borderWidths_.top;
+ // nePt.x -= this.borderWidths_.left;
+ // nePt.y -= this.borderWidths_.top;
+ //}
+ //this.boxDiv_.style.left = swPt.x + "px";
+ //this.boxDiv_.style.top = nePt.y + "px";
+ //this.boxDiv_.style.width = (Math.abs(nePt.x - swPt.x) - (this.boxBorderWidths_.left + this.boxBorderWidths_.right)) + "px";
+ //this.boxDiv_.style.height = (Math.abs(nePt.y - swPt.y) - (this.boxBorderWidths_.top + this.boxBorderWidths_.bottom)) + "px";
+ // Hide box asynchronously after 1 second:
+ setTimeout(function () {
+ me.boxDiv_.style.display = "none";
+ }, 1000);
+ this.dragging_ = false;
+ this.onMouseMove_(e); // Updates the veil
+ /**
+ * This event is fired when the drag operation ends.
+ * The parameter passed is the geographic bounds of the selected area.
+ * Note that this event is <i>not</i> fired if the hot key is released before the drag operation ends.
+ * @name DragZoom#dragend
+ * @param {LatLngBounds} bnds The geographic bounds of the selected area.
+ * @event
+ */
+ google.maps.event.trigger(this, "dragend", bnds);
+ // if the hot key isn't down, the drag zoom must have been activated by turning
+ // on the visual control. In this case, finish up by simulating a key up event.
+ if (!this.isHotKeyDown_(e)) {
+ this.onKeyUp_(e);
+ }
+ }
+ };
+ /**
+ * Handle key up.
+ * @param {Event} e The keyboard event.
+ */
+ DragZoom.prototype.onKeyUp_ = function (e) {
+ var i;
+ if (this.map_ && this.hotKeyDown_) {
+ this.hotKeyDown_ = false;
+ if (this.dragging_) {
+ this.boxDiv_.style.display = "none";
+ this.dragging_ = false;
+ }
+ for (i = 0; i < this.veilDiv_.length; i++) {
+ this.veilDiv_[i].style.display = "none";
+ }
+ if (this.visualEnabled_) {
+ this.buttonDiv_.firstChild.style.left = -(this.visualSize_.width * 2) + "px";
+ this.buttonDiv_.title = this.visualTips_.off;
+ this.buttonDiv_.style.display = "";
+ }
+ /**
+ * This event is fired when the hot key is released.
+ * @name DragZoom#deactivate
+ * @event
+ */
+ google.maps.event.trigger(this, "deactivate");
+ }
+ };
+ /**
+ * @name google.maps.Map
+ * @class These are new methods added to the Google Maps JavaScript API V3's
+ * <a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#Map">Map</a>
+ * class.
+ */
+ /**
+ * Enables drag zoom. The user can zoom to an area of interest by holding down the hot key
+ * <code>(shift | ctrl | alt )</code> while dragging a box around the area or by turning
+ * on the visual control then dragging a box around the area.
+ * @param {KeyDragZoomOptions} opt_zoomOpts The optional parameters.
+ */
+ google.maps.Map.prototype.enableKeyDragZoom = function (opt_zoomOpts) {
+ this.dragZoom_ = new DragZoom(this, opt_zoomOpts);
+ };
+ /**
+ * Disables drag zoom.
+ */
+ google.maps.Map.prototype.disableKeyDragZoom = function () {
+ var i;
+ var d = this.dragZoom_;
+ if (d) {
+ for (i = 0; i < d.listeners_.length; ++i) {
+ google.maps.event.removeListener(d.listeners_[i]);
+ }
+ this.getDiv().removeChild(d.boxDiv_);
+ for (i = 0; i < d.veilDiv_.length; i++) {
+ this.getDiv().removeChild(d.veilDiv_[i]);
+ }
+ if (d.visualEnabled_) {
+ // Remove the custom control:
+ this.controls[d.visualPosition_].removeAt(d.controlIndex_);
+ }
+ d.prjov_.setMap(null);
+ this.dragZoom_ = null;
+ }
+ };
+ /**
+ * Returns <code>true</code> if the drag zoom feature has been enabled.
+ * @return {boolean}
+ */
+ google.maps.Map.prototype.keyDragZoomEnabled = function () {
+ return this.dragZoom_ !== null;
+ };
+ /**
+ * Returns the DragZoom object which is created when <code>google.maps.Map.enableKeyDragZoom</code> is called.
+ * With this object you can use <code>google.maps.event.addListener</code> to attach event listeners
+ * for the "activate", "deactivate", "dragstart", "drag", and "dragend" events.
+ * @return {DragZoom}
+ */
+ google.maps.Map.prototype.getDragZoomObject = function () {
+ return this.dragZoom_;
+ };
+})();
View
5 src/app/clj/one/sample/config.clj
@@ -19,7 +19,10 @@
"goog.require('one.sample.controller');"
"goog.require('one.sample.history');"
"goog.require('one.sample.logging');"
- "one.sample.core.start();one.sample.core.repl();"]
+ "goog.require('one.sample.util');"
+ "goog.require('one.sample.mapview');"
+ ;;"one.sample.core.start();one.sample.core.repl();"
+ "one.sample.core.repl();"]
:prod-js ["one.sample.core.start();"]
:reload-clj ["/one/host_page"
"/one/reload"
View
1 src/app/cljs-macros/one/sample/snippets.clj
@@ -12,4 +12,5 @@
design templates."
[]
{:form (snippet "form.html" [:div#form])
+ :map_canvas (snippet "mapview.html" [:div#map_canvas])
:greeting (snippet "greeting.html" [:div#greeting])})
View
17 src/app/cljs/one/sample/animation.cljs
@@ -9,6 +9,7 @@
[goog.style :as style]))
(def form "//div[@id='form']")
+(def map_canvas "//div[@id='map_canvas']")
(def cloud "//div[@id='greeting']")
(def label "//label[@id='name-input-label']/span")
@@ -31,13 +32,29 @@
(set-styles! (by-id "greet-button") {:opacity "0.2" :disabled true})
(play form form-in {:after #(.focus (by-id "name-input") ())})))
+(defn initialize-map-view
+ "Accepts the map view HTML and adds it to the
+ page. This function must be
+ run before any other view functions. It may be called from any state
+ to reset the UI."
+ [map-html]
+ (let [content (xpath "//div[@id='content']")]
+ (destroy-children! content)
+ (set-html! content map-html)))
+
(comment ;; Try it
(initialize-views (:form one.sample.view/snippets)
(:greeting one.sample.view/snippets))
)
+(comment ;; Try it
+
+ (initialize-map-view (:map_canvas one.sample.view/snippets))
+
+ )
+
(defn label-move-up
"Move the passed input field label above the input field. Run when
the field gets focus and is empty."
View
132 src/app/cljs/one/sample/mapview.cljs
@@ -0,0 +1,132 @@
+(ns one.sample.mapview
+ (:require [one.sample.util :as u]
+ [goog.events :as events]
+ [goog.style :as style]))
+
+(def iucn-root "http://184.73.201.235/blue")
+(def species-range-root "https://eighty.cartodb.com/tiles/mol_cody")
+(def cell-towers-root "https://sciencehackday-10.cartodb.com/tiles/tower_locations")
+(def tide-gauges-root "https://simonholgate.cartodb.com/tiles/tide_gauges")
+(def ulr5-root "https://simonholgate.cartodb.com/tiles/ulr5")
+
+;; The forma root is odd. the suffix is repeated twice, for
+;; one. The "071" is the time period of the particular tileset. We'll
+;; make this dynamic next!
+(def forma-root "http://formatiles.s3.amazonaws.com/tiles/forma071/forma071")
+
+
+(defn carto-tiler-fn
+ "Takes a root path (without trailing slash) and returns a function
+ meant for the :getTileUrl option in a Google map overlay.
+
+ The -> is called the threading macro; it actually rearranges its
+ code forms before they hit the compiler. See here for examples:
+
+ http://clojuredocs.org/clojure_core/clojure.core/-%3E"
+ [root]
+ {:pre [(not= "/" (last root))]} ;; contracts ftw!
+ (fn [coord zoom]
+ (-> (u/pathify root zoom (. coord -x) (. coord -y))
+ (str ".png"))))
+
+(def cell-towers-tile-url
+ (carto-tiler-fn cell-towers-root))
+
+(def tide-gauges-tile-url
+ (carto-tiler-fn tide-gauges-root))
+
+(def ulr5-tile-url
+ (carto-tiler-fn ulr5-root))
+
+(def species-range-tile-url
+ (carto-tiler-fn species-range-root))
+
+(defn iucn-tile-url
+ "IUCN tiles don't use a .png extension, for whatever reason."
+ [coord zoom]
+ (u/pathify iucn-root zoom (. coord -x) (. coord -y)))
+
+
+(defn forma-tile-url
+ "Wacky shit with inversion of the y coordinate, etc"
+ [coord zoom]
+ (let [bound (dec (Math/pow 2 zoom))]
+ (-> (u/pathify forma-root
+ zoom
+ (Math/abs (. coord -x))
+ (- bound (. coord -y)))
+ (str ".png"))))
+
+(def overlay-defaults
+ "default overlay options; we're assuming that the tilesize is
+ standard, etc."
+ {:minZ 3
+ :maxZ 10
+ :tileSize (google.maps.Size. 256 256)})
+
+(defn mk-overlay
+ "Returns a Google Maps overlay with the supplied name,
+ url-generating function and opacity."
+ [name-str url-func opacity]
+ (let [opts (u/clj->js
+ (merge overlay-defaults
+ {:name name-str
+ :opacity opacity
+ :getTileUrl url-func}))]
+ (google.maps.ImageMapType. opts)))
+
+(def map-opts
+ "Default initial map options."
+ {:zoom 3
+ :mapTypeId google.maps.MapTypeId.TERRAIN
+ :center (google.maps.LatLng. (+ 53 (/ 25 60)), 3)
+ :styles [{:stylers [{:visibility "on"}
+ {:lightness 80}]}]})
+
+(defn init-map [element overlays]
+ (let [options (u/clj->js map-opts)
+ map (google.maps.Map. element options)
+ overlayMapTypes (. map -overlayMapTypes)]
+ (doseq [layer overlays]
+ (.push overlayMapTypes layer))
+
+ (.enableKeyDragZoom map)
+;; (let [dz (.getDragZoomObject map)]
+;; (events/listen dz "dragend" (js/alert "Dragged!"))
+;; )
+ map))
+
+
+(def *map*
+ "Dynamic variable holding our map element, set to an initial value
+ of nil. We don't really need to bind this to anything, but it helps
+ to have a reference to it from the callback for later coding."
+ nil)
+
+(defn map-load []
+ (set! *map* (init-map
+ (goog.dom/getElement "map_canvas")
+ [;;(mk-overlay "species-range" species-range-tile-url 0.5)
+ ;;(mk-overlay "forma" forma-tile-url 1)
+ ;;(mk-overlay "iucn" iucn-tile-url 0.6)
+ ;;(mk-overlay "cell-towers" cell-towers-tile-url 1)
+ (mk-overlay "tide-gauges" tide-gauges-tile-url 1)
+ (mk-overlay "ulr-vertical-velocities" ulr5-tile-url 1)
+ ])))
+
+;; (defn addDragListener [map]
+;; (let [dz (.getDragZoomObject map)]
+;; (doto dz
+;; (GEvent/addListener 'dragend' ))))
+
+;; Having modified the keydragzoom we need to bind it so we can query
+;; the returned results from the database. How? jayq?
+;;(events/listen (.getDragZoomObject *map*) "dragend" (js/alert "Dragged!"))
+
+;;
+;;(events/listen js/window "load" map-load)
+
+
+;;(map-load)
+;;(def dz (.getDragZoomObject *map*))
+;;(google.maps.event/addListener dz "dragend" (fn [bnds] (.log js/console (pr-str bnds))))
View
24 src/app/cljs/one/sample/util.cljs
@@ -0,0 +1,24 @@
+(ns one.sample.util
+ (:require [clojure.string :as s]))
+
+;; Thanks to mmcgrana:
+;; http://mmcgrana.github.com/2011/09/clojurescript-nodejs.html
+;; Updated from:
+;; http://techylinguist.com/posts/2012/01/23/clojurescript-getting-started
+(defn clj->js
+ "Recursively transforms ClojureScript maps into Javascript objects,
+ other ClojureScript colls into JavaScript arrays, and ClojureScript
+ keywords into JavaScript strings.
+
+ Borrowed and updated from mmcgrana."
+ [x]
+ (cond
+ (string? x) x
+ (keyword? x) (name x)
+ (map? x) (.-strobj (reduce (fn [m [k v]]
+ (assoc m (clj->js k) (clj->js v))) {} x))
+ (coll? x) (apply array (map clj->js x))
+ :else x))
+
+(defn pathify [& pieces]
+ (s/join "/" pieces))
View
20 src/app/cljs/one/sample/view.cljs
@@ -9,7 +9,8 @@
[goog.events.KeyHandler :as key-handler]
[clojure.browser.event :as event]
[one.dispatch :as dispatch]
- [one.sample.animation :as fx]))
+ [one.sample.animation :as fx]
+ [one.sample.mapview :as maps]))
(def ^{:doc "A map which contains chunks of HTML which may be used
when rendering views."}
@@ -100,6 +101,7 @@
(event/listen field
"keyup"
#(dispatch/fire [:field-changed field-id] (value field)))
+ ;;(goog.events/listen js/window "load" maps/map-load)
(event/listen keyboard
"key"
(fn [e] (when (= (.-keyCode e) key-codes/ENTER)
@@ -111,13 +113,17 @@
and renders a view based on the value of the `:state` key."
:state)
+;; (defmethod render :init [_]
+;; (fx/initialize-views (:form snippets) (:greeting snippets))
+;; (add-input-event-listeners "name-input")
+;; (event/listen (by-id "greet-button")
+;; "click"
+;; #(dispatch/fire :greeting
+;; {:name (value (by-id "name-input"))})))
+
(defmethod render :init [_]
- (fx/initialize-views (:form snippets) (:greeting snippets))
- (add-input-event-listeners "name-input")
- (event/listen (by-id "greet-button")
- "click"
- #(dispatch/fire :greeting
- {:name (value (by-id "name-input"))})))
+ (fx/initialize-map-view (:map_canvas snippets))
+ (goog.events/listen js/window "load" maps/map-load))
(defmethod render :form [{:keys [state error name]}]
(fx/show-form)
View
26 templates/application.html
@@ -3,9 +3,11 @@
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>ClojureScript One</title>
+ <title>Contour-One</title>
<meta name="description" content="">
<meta name="author" content="">
+ <meta content="width=device-width, initial-scale=1.0,
+ user-scalable=no" name="viewport">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
@@ -15,7 +17,7 @@
<!-- Le styles -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="css/one.css" rel="stylesheet">
- <!-- <link href="css/two.css" rel="stylesheet"> -->
+ <!-- <link href="css/reset.css" rel="stylesheet"> -->
<style type="text/css">
body {
padding-top: 60px;
@@ -32,22 +34,18 @@
<!--[if IE]>
<script type="text/javascript" src="js/xpath.js"></script>
<![endif]-->
-
+<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
+<script src="js/keydragzoom_returncoords_sjh.js" type="text/javascript"></script>
+<script type="text/javascript">//<![CDATA[goog.require('one.sample.core.repl()');//]]></script>
+<script type="text/javascript">//<![CDATA[goog.require('one.sample.mapview')//]]></script>
</head>
<body>
+ <_include file="toolbar.html"/>
- <_include file="toolbar.html"/>
-
- <div class="container">
-
- <div id="content"></div>
-
- <div id="options"></div>
-
- <footer></footer>
-
- </div> <!-- /container -->
+ <div id="map_canvas">
+ </div>
+
</body>
</html>
View
13 templates/bounds.html
@@ -0,0 +1,13 @@
+<_within file="application.html">
+
+ <div id="content">
+ <div id="bounds">
+ <h2>Bounds</h2>
+ <div class="break"></div>
+ <h3><span class="north">north</span></h3>
+ <h3><span class="west">west</span>&nbsp;<span class="east">east</span></h3>
+ <h3><span class="south">south</span></h3>
+ </div>
+ </div>
+
+</_within>
View
7 templates/mapview.html
@@ -0,0 +1,7 @@
+<_within file="application.html">
+ <div id="content">
+ <div id="map_canvas">
+
+ </div>
+ </div>
+</_within>

0 comments on commit 3c43b84

Please sign in to comment.
Something went wrong with that request. Please try again.