Adding mapbox-gl branch

2015-03-16 18:50:27 +01:00
parent 7985f030fa
commit 57ee7f52fd
3109 changed files with 943365 additions and 0 deletions
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Copyright 2007 The Closure Library Authors. All Rights Reserved.
+
+Use of this source code is governed by the Apache License, Version 2.0.
+See the COPYING file for details.
+-->
+<head>
+  <title>Graphics Basic events Demo Page</title>
+
+  <style class="text/css">
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow:hidden;
+    }
+
+    #log {
+      position: absolute;
+      top: 0px;
+      width: 50%;
+      right: 0%;
+      height: 100%;
+      overflow: auto;
+      border: 1px solid #cccccc;
+    }
+
+    #c {
+      margin-bottom: 10px;
+      font-size: small;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../base.js"></script>
+  <script type="text/javascript">
+    goog.require('goog.debug.DivConsole');
+    goog.require('goog.events');
+    goog.require('goog.events.EventType');
+    goog.require('goog.graphics');
+    goog.require('goog.log');
+  </script>
+</head>
+
+<body>
+  <div>
+    <span id="shapes"></span>
+  </div>
+
+  <div>
+    <span id="colors"></span>
+  </div>
+
+  <p>
+    <a href="javascript:void(logconsole.clear())">Clear Log</a>
+  </p>
+
+  <div id="log"></div>
+
+  <p> Try to mouse over, mouse out, or click the ellipse and the group of
+    circles. The ellipse will be disposed in 10 sec.
+  </p>
+
+  <script type="text/javascript">
+    // Set up a logger to track responses
+    var log = goog.log.getLogger('Events');
+    goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
+    var logconsole = new goog.debug.DivConsole(document.getElementById('log'));
+    logconsole.setCapturing(true);
+
+    // A helper function to handle events.
+    function handleEvent(elementType) {
+      return function(e) {
+        log.info(elementType + ' ' + e.type + '.');
+      }
+    }
+
+    // The events to catch.
+    var events = [goog.events.EventType.MOUSEOVER,
+                  goog.events.EventType.MOUSEOUT,
+                  goog.events.EventType.CLICK]
+
+    // Create an elipse.
+    var graphics = goog.graphics.createGraphics(600, 200);
+    var fill = new goog.graphics.SolidFill('yellow');
+    var stroke = new goog.graphics.Stroke(2, 'green');
+
+    var elipseElem = graphics.drawEllipse(300, 140, 80, 40, stroke, fill);
+    goog.events.listen(elipseElem, events, handleEvent('Ellipse'));
+
+
+    // Create a group of circles.
+    stroke = new goog.graphics.Stroke(1, 'black');
+    var group = graphics.createGroup();
+    goog.events.listen(group, events, handleEvent('Group'));
+
+    fill = new goog.graphics.SolidFill('blue');
+    var blueCircle = graphics.drawCircle(500, 60, 40, stroke, fill, group);
+    goog.events.listen(blueCircle, events, handleEvent('Blue-Circle'));
+
+    fill = new goog.graphics.SolidFill("red", 0.5);
+    var redCircle = graphics.drawCircle(500, 90, 40, stroke, fill, group);
+    goog.events.listen(redCircle, events, handleEvent('Red-Circle'));
+
+    fill = new goog.graphics.SolidFill('green', 0.2);
+    var greenCircle = graphics.drawCircle(500, 120, 40, stroke, fill, group);
+    goog.events.listen(greenCircle, events, handleEvent('Green-Circle'));
+
+    graphics.render(document.getElementById('shapes'));
+
+    goog.global.setTimeout(function()  {elipseElem.dispose();}, 10000);
+  </script>
+</body>
+</html>