Merge pull request #2839 from tschaub/publish

Dependency updates and new package name.

build.py

@@ -1,16 +1,54 @@
 #!/usr/bin/env python
 
 from cStringIO import StringIO
+import glob
 import gzip
 import json
+import multiprocessing
 import os
-import glob
 import re
 import shutil
 import sys
 
 from pake import Target
 from pake import ifind, main, output, rule, target, variables, virtual, which
+from Queue import Queue
+from threading import Thread
+
+
+class ThreadPool:
+    """A basic pool of worker threads"""
+    class Worker(Thread):
+        def __init__(self, tasks):
+            Thread.__init__(self)
+            self.tasks = tasks
+            self.daemon = True # threads will be killed on exit
+            self.start()
+
+        def run(self):
+            while True:
+                # block until a task is ready to be done
+                function, args, kargs = self.tasks.get()
+                try:
+                    function(*args, **kargs)
+                except:
+                    print(sys.exc_info()[0])
+                    self.tasks.errors = True
+                self.tasks.task_done()
+
+    def __init__(self, num_threads = multiprocessing.cpu_count() + 1):
+        self.tasks = Queue(num_threads)
+        self.tasks.errors = False
+        # create num_threads Workers, by default the number of CPUs + 1
+        for _ in range(num_threads): self.Worker(self.tasks)
+
+    def add_task(self, function, *args, **kargs):
+        self.tasks.put((function, args, kargs))
+
+    def wait_completion(self):
+        # wait for the queue to be empty
+        self.tasks.join()
+        return self.tasks.errors
 
 
 if sys.platform == 'win32':
@@ -75,9 +113,7 @@ EXAMPLES_SRC = [path
                 for path in ifind('examples')
                 if path.endswith('.js')
                 if not path.endswith('.combined.js')
-                if not path.startswith('examples/bootstrap')
                 if path != 'examples/Jugl.js'
-                if path != 'examples/jquery.min.js'
                 if path != 'examples/example-list.js']
 
 EXAMPLES_JSON = ['build/' + example.replace('.html', '.json')
@@ -215,30 +251,45 @@ def build_examples_all_js(t):
 @rule(r'\Abuild/examples/(?P<id>.*).json\Z')
 def examples_star_json(name, match):
     def action(t):
-        # It would make more sense to use olx.js as an input file here. We use
-        # it as an externs file instead to prevent "Cannot read property '*' of
-        # undefined" error when running examples in "raw" or "whitespace" mode.
-        # Note that we use the proper way in config/examples-all.json, which
-        # is only used to check the examples code using the compiler.
+
+        # When compiling the ol3 code and the application code together it is
+        # better to use oli.js and olx.js files as "input" files rather than
+        # "externs" files. Indeed, externs prevent renaming, which is neither
+        # necessary nor desirable in this case.
+        #
+        # oli.js and olx.js do not provide or require namespaces (using
+        # "goog.provide" or "goog.require"). For that reason, if they are
+        # specified as input files through the "src" property, then
+        # closure-util will exclude them when creating the dependencies graph.
+        # So the compile "js" property is used instead. With that property the
+        # oli.js and olx.js files are passed directly to the compiler. And by
+        # setting "manage_closure_dependencies" to "true" the compiler will not
+        # exclude them from its dependencies graph.
+
         content = json.dumps({
           "exports": [],
-          "src": ["src/**/*.js", "examples/%(id)s.js" % match.groupdict()],
+          "src": [
+            "src/**/*.js",
+            "examples/%(id)s.js" % match.groupdict()],
           "compile": {
+            "js": [
+              "externs/olx.js",
+              "externs/oli.js",
+            ],
             "externs": [
               "externs/bingmaps.js",
               "externs/bootstrap.js",
               "externs/closure-compiler.js",
               "externs/example.js",
               "externs/geojson.js",
-              "externs/jquery-1.7.js",
-              "externs/oli.js",
-              "externs/olx.js",
+              "externs/jquery-1.9.js",
               "externs/proj4js.js",
               "externs/tilejson.js",
               "externs/topojson.js",
               "externs/vbarray.js"
             ],
             "define": [
+              "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
               "goog.dom.ASSUME_STANDARDS_MODE=true",
               "goog.json.USE_NATIVE_JSON=true",
               "goog.DEBUG=false"
@@ -274,11 +325,13 @@ def examples_star_json(name, match):
               "tweakValidation",
               "undefinedNames",
               "undefinedVars",
-              "unknownDefines",
               "uselessCode",
               "violatedModuleDep",
               "visibility"
             ],
+            "jscomp_off": [
+              "unknownDefines"
+            ],
             "extra_annotation_name": [
               "api", "observable"
             ],
@@ -601,8 +654,7 @@ def host_examples(t):
     t.cp('build/ol.js', 'build/ol-debug.js', build_dir)
     t.cp('build/ol.css', css_dir)
     t.cp('examples/index.html', 'examples/example-list.js',
-         'examples/example-list.xml', 'examples/Jugl.js',
-         'examples/jquery.min.js', examples_dir)
+         'examples/example-list.xml', 'examples/Jugl.js', examples_dir)
     t.rm_rf('build/hosted/%(BRANCH)s/closure-library')
     t.cp_r(closure_lib_path, 'build/hosted/%(BRANCH)s/closure-library')
     t.rm_rf('build/hosted/%(BRANCH)s/ol')
@@ -621,10 +673,14 @@ def check_examples(t):
     examples = ['build/hosted/%(BRANCH)s/' + e
                 for e in EXAMPLES
                 if not open(e.replace('.html', '.js'), 'rU').readline().startswith('// NOCOMPILE')]
-    all_examples = \
-        [e + '?mode=advanced' for e in examples]
+    all_examples = [e + '?mode=advanced' for e in examples]
+    # Run the examples checks in a pool of threads
+    pool = ThreadPool()
     for example in all_examples:
-        t.run('%(PHANTOMJS)s', 'bin/check-example.js', example)
+        pool.add_task(t.run, '%(PHANTOMJS)s', 'bin/check-example.js', example)
+    errors = pool.wait_completion()
+    if errors:
+        sys.exit(1)
 
 
 @target('test', phony=True)

closure-util.json

@@ -1,3 +1,3 @@
 {
-  "library_url": "https://github.com/google/closure-library/archive/946a7d39d4ffe08676c755b21d901e71d9904a3b.zip"
+  "library_url": "https://github.com/google/closure-library/archive/fb35d5232edef340dd9a7c6e479556829d0fa452.zip"
 }

config/examples-all.json

@@ -1,22 +1,28 @@
 {
   "exports": [],
-  "src": ["src/**/*.js", "build/examples/all.js"],
+  "src": [
+    "src/**/*.js",
+    "build/examples/all.js"
+  ],
   "compile": {
+    "js": [
+      "externs/olx.js",
+      "externs/oli.js"
+    ],
     "externs": [
       "externs/bingmaps.js",
       "externs/bootstrap.js",
       "externs/closure-compiler.js",
       "externs/example.js",
       "externs/geojson.js",
-      "externs/jquery-1.7.js",
-      "externs/oli.js",
-      "externs/olx.js",
+      "externs/jquery-1.9.js",
       "externs/proj4js.js",
       "externs/tilejson.js",
       "externs/topojson.js",
       "externs/vbarray.js"
     ],
     "define": [
+      "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
       "goog.dom.ASSUME_STANDARDS_MODE=true",
       "goog.json.USE_NATIVE_JSON=true",
       "goog.DEBUG=false"
@@ -61,7 +67,7 @@
       "api", "observable"
     ],
     "compilation_level": "ADVANCED",
-    "output_wrapper": "// OpenLayers 3. See http://ol3.js.org/\n(function(){%output%})();",
+    "output_wrapper": "// OpenLayers 3. See http://ol3js.org/\n(function(){%output%})();",
     "use_types_for_optimization": true,
     "manage_closure_dependencies": true
 

config/jsdoc/api/plugins/observable.js

@@ -47,7 +47,7 @@ exports.handlers = {
         if (!cls.fires) {
           cls.fires = [];
         }
-        event = 'ol.ObjectEvent#event:change:' + name.toLowerCase();
+        event = 'ol.ObjectEvent#event:change:' + name;
         if (cls.fires.indexOf(event) == -1) {
           cls.fires.push(event);
         }

config/jsdoc/info/publish.js

@@ -22,14 +22,6 @@ exports.publish = function(data, opts) {
     return types;
   }
 
-  function replaceUnknownTypes(item) {
-    item.types.forEach(function(type, index) {
-      if (!(type in names)) {
-        item.types[index] = '*';
-      }
-    });
-  }
-
   // get all doclets with the "api" property or define (excluding events) or
   // with olx namespace
   var classes = {};
@@ -168,16 +160,7 @@ exports.publish = function(data, opts) {
   });
 
   base = base.filter(function(symbol) {
-    var pass = symbol.name in augments || symbol.virtual;
-    if (pass) {
-      if (symbol.params) {
-        symbol.params.forEach(replaceUnknownTypes);
-      }
-      if (symbol.returns) {
-        symbol.returns.forEach(replaceUnknownTypes);
-      }
-    }
-    return pass;
+    return (symbol.name in augments || symbol.virtual);
   });
 
   process.stdout.write(

config/ol.json

@@ -13,6 +13,7 @@
       "externs/vbarray.js"
     ],
     "define": [
+      "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
       "goog.dom.ASSUME_STANDARDS_MODE=true",
       "goog.json.USE_NATIVE_JSON=true",
       "goog.DEBUG=false"

css/ol.css

@@ -55,6 +55,10 @@
   right: .5em;
   transition: opacity .25s;
 }
+.ol-rotate.ol-hidden {
+  opacity: 0;
+  display: none;
+}
 .ol-zoom-extent {
   top: 4.643em;
   left: .5em;
@@ -255,29 +259,20 @@ button.ol-full-screen-true:after {
   left: .5em;
   background: #eee;
   background: rgba(255, 255, 255, 0.4);
-  border-radius: 4px;
-  outline: none;
-  overflow: hidden;
-  width: 1.5675em;
+  width: 24px;
   height: 200px;
-  padding: 3px;
-  margin: 0;
 }
 .ol-zoomslider-thumb {
   position: absolute;
-  display: block;
   background: #7b98bc;
   background: rgba(0,60,136,0.5);
   border-radius: 2px;
-  outline: none;
-  overflow: hidden;
   cursor: pointer;
-  font-size: 1.14em;
-  height: 1em;
-  width: 1.375em;
+  height: 10px;
+  width: 22px;
   margin: 3px;
-  padding: 0;
 }
+
 .ol-touch .ol-zoomslider {
   top: 5.5em;
   width: 2.052em;
@@ -292,3 +287,40 @@ button.ol-full-screen-true:after {
 .ol-has-tooltip [role=tooltip] {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
 }
+
+.ol-overviewmap {
+  position: absolute;
+  left: 0.5em;
+  bottom: 0.5em;
+}
+.ol-overviewmap.ol-uncollapsible {
+  bottom: 0;
+  left: 0;
+  border-radius: 0 4px 0 0;
+}
+.ol-overviewmap .ol-overviewmap-map,
+.ol-overviewmap button {
+  display: inline-block;
+}
+.ol-overviewmap .ol-overviewmap-map {
+  border: 1px solid #7b98bc;
+  height: 150px;
+  margin: 2px;
+  width: 150px;
+}
+.ol-overviewmap:not(.ol-collapsed) button{
+  bottom: 1px;
+  left: 2px;
+  position: absolute;
+}
+.ol-overviewmap:not(.ol-collapsed) button:hover [role=tooltip],
+.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+.ol-overviewmap.ol-uncollapsible button {
+  display: none;
+}
+.ol-overviewmap:not(.ol-collapsed) {
+  background: rgba(255,255,255,0.8);
+}
+.ol-overviewmap-box {
+  border: 2px dotted rgba(0,60,136,0.7);
+}

examples/accessible.html

@@ -64,7 +64,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=accessible" type="text/javascript"></script>
 

examples/animation.html

@@ -57,7 +57,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=animation" type="text/javascript"></script>
 

examples/attributions.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=attributions" type="text/javascript"></script>
 

examples/bind-input.html

@@ -84,7 +84,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=bind-input" type="text/javascript"></script>
 

examples/bing-maps.html

@@ -42,6 +42,7 @@
           <h4 id="title">Bing Maps example</h4>
           <p id="shortdesc">Example of a Bing Maps layer.</p>
           <div id="docs">
+            <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
             <p>See the <a href="bing-maps.js" target="_blank">bing-maps.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">bing, bing-maps</div>
@@ -51,7 +52,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=bing-maps" type="text/javascript"></script>
 

examples/bing-maps.js

@@ -20,6 +20,9 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
     source: new ol.source.BingMaps({
       key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
       imagerySet: styles[i]
+      // use maxZoom 19 to see stretched tiles instead of the BingMaps
+      // "no photos at this zoom level" tiles
+      // maxZoom: 19
     })
   }));
 }

examples/box-selection.html

@@ -5,18 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <style type="text/css">
-    div.fill {
-      width: 100%;
-      height: 100%;
-    }
-    </style>
-    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
-    <title>Google Maps integration example</title>
+    <title>Box selection example</title>
   </head>
   <body>
 
@@ -32,31 +24,36 @@
 
       <div class="row-fluid">
         <div class="span12">
-          <div id="map" class="map">
-            <div id="gmap" class="fill"></div>
-            <div id="olmap" class="fill"></div>
-          </div>
+          <div id="map" class="map"></div>
         </div>
       </div>
 
       <div class="row-fluid">
 
         <div class="span4">
-          <h4 id="title">Google Maps integration example</h4>
-          <p id="shortdesc">Example of a GMaps map with an ol3 map as control, to give users a Google base map with ol3 content on top.</p>
+          <h4 id="title">Box selection example</h4>
+          <p id="shortdesc">Using a DragBox interaction to select features.</p>
           <div id="docs">
-            <p>See the <a href="google-map.js" target="_blank">google-map.js source</a> to see how this is done.</p>
+            <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
+            to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
+            <p>Use <code>SHIFT+drag</code> to draw boxes.</p>
+            <p>See the <a href="box-selection.js" target="_blank">box-selection.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">DragBox, feature, selection, box</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
           </div>
-          <div id="tags">google</div>
         </div>
 
       </div>
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=google-map" type="text/javascript"></script>
+    <script src="loader.js?id=box-selection" type="text/javascript"></script>
 
   </body>
 </html>

examples/box-selection.js

@@ -0,0 +1,81 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.events.condition');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragBox');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.source.OSM');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var vectorSource = new ol.source.GeoJSON({
+  projection: 'EPSG:3857',
+  url: 'data/geojson/countries.geojson'
+});
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    new ol.layer.Vector({
+      source: vectorSource
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+// a normal select interaction to handle click
+var select = new ol.interaction.Select();
+map.addInteraction(select);
+
+var selectedFeatures = select.getFeatures();
+
+// a DragBox interaction used to select features by drawing boxes
+var dragBox = new ol.interaction.DragBox({
+  condition: ol.events.condition.shiftKeyOnly,
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: [0, 0, 255, 1]
+    })
+  })
+});
+
+map.addInteraction(dragBox);
+
+var infoBox = document.getElementById('info');
+
+dragBox.on('boxend', function(e) {
+  // features that intersect the box are added to the collection of
+  // selected features, and their names are displayed in the "info"
+  // div
+  var info = [];
+  var extent = dragBox.getGeometry().getExtent();
+  vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
+    selectedFeatures.push(feature);
+    info.push(feature.get('name'));
+  });
+  if (info.length > 0) {
+    infoBox.innerHTML = info.join(', ');
+  }
+});
+
+// clear selection when drawing a new box and when clicking on the map
+dragBox.on('boxstart', function(e) {
+  selectedFeatures.clear();
+  infoBox.innerHTML = ' ';
+});
+map.on('click', function() {
+  selectedFeatures.clear();
+  infoBox.innerHTML = ' ';
+});

examples/brightness-contrast.html

@@ -66,7 +66,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
 

examples/canvas-tiles.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
 

examples/center.html

@@ -123,7 +123,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=center" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/cluster.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=cluster" type="text/javascript"></script>
 

examples/custom-controls.html

@@ -82,7 +82,7 @@
       </div>
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=custom-controls" type="text/javascript"></script>
 

examples/d3.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="http://d3js.org/d3.v3.min.js"></script>
     <script src="http://d3js.org/topojson.v1.min.js"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>

examples/device-orientation.html

@@ -50,7 +50,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=device-orientation" type="text/javascript"></script>
 

examples/drag-and-drop-image-vector.html

@@ -48,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
 

examples/drag-and-drop.html

@@ -48,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
 

examples/drag-rotate-and-zoom.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
 

examples/draw-and-modify-features.html

@@ -53,7 +53,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=draw-and-modify-features" type="text/javascript"></script>
 

examples/draw-features.html

@@ -53,7 +53,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=draw-features" type="text/javascript"></script>
 

examples/dynamic-data.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=dynamic-data" type="text/javascript"></script>
 

examples/epsg-4326.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
 

examples/export-map.html

@@ -48,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=export-map" type="text/javascript"></script>
 

examples/export-map.js

@@ -2,13 +2,20 @@ goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
 goog.require('ol.source.OSM');
 
-
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
+    }),
+    new ol.layer.Vector({
+      source: new ol.source.GeoJSON({
+        projection: 'EPSG:3857',
+        url: 'data/geojson/countries.geojson'
+      })
     })
   ],
   target: 'map',

examples/fractal.html

@@ -56,7 +56,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=fractal" type="text/javascript"></script>
 

examples/full-screen-drag-rotate-and-zoom.html

@@ -56,7 +56,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
 

examples/full-screen.html

@@ -62,7 +62,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=full-screen" type="text/javascript"></script>
 

examples/geojson.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=geojson" type="text/javascript"></script>
 

examples/geolocation-orientation.html

@@ -40,7 +40,7 @@
         <button id="simulate">Simulate</button>
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
 

examples/geolocation-orientation.js

@@ -220,7 +220,7 @@ function simulatePositionChange(position) {
       'EPSG:3857');
   geolocation.set('position', projectedPosition);
   geolocation.set('speed', coords.speed);
-  geolocation.dispatchChangeEvent();
+  geolocation.changed();
 }
 
 function disableButtons() {

examples/geolocation.html

@@ -53,7 +53,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=geolocation" type="text/javascript"></script>
 

examples/geolocation.js

@@ -8,7 +8,10 @@ goog.require('ol.dom.Input');
 goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
-
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
 
 var view = new ol.View({
   center: [0, 0],
@@ -57,6 +60,19 @@ var accuracyFeature = new ol.Feature();
 accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
 
 var positionFeature = new ol.Feature();
+positionFeature.setStyle(new ol.style.Style({
+  image: new ol.style.Circle({
+    radius: 6,
+    fill: new ol.style.Fill({
+      color: '#3399CC'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#fff',
+      width: 2
+    })
+  })
+}));
+
 positionFeature.bindTo('geometry', geolocation, 'position')
     .transform(function() {}, function(coordinates) {
       return coordinates ? new ol.geom.Point(coordinates) : null;

examples/getfeatureinfo-image.html

@@ -49,7 +49,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=getfeatureinfo-image" type="text/javascript"></script>
 

examples/getfeatureinfo-tile.html

@@ -49,7 +49,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=getfeatureinfo-tile" type="text/javascript"></script>
 

examples/google-map.js

@@ -1,67 +0,0 @@
-// NOCOMPILE
-// This example uses the GMapx v3 API, which we do not have an exports file for.
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.interaction');
-goog.require('ol.interaction.DragPan');
-goog.require('ol.layer.Vector');
-goog.require('ol.proj');
-goog.require('ol.source.GeoJSON');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-
-
-var gmap = new google.maps.Map(document.getElementById('gmap'), {
-  disableDefaultUI: true,
-  keyboardShortcuts: false,
-  draggable: false,
-  disableDoubleClickZoom: true,
-  scrollwheel: false,
-  streetViewControl: false
-});
-
-var view = new ol.View({
-  // make sure the view doesn't go beyond the 22 zoom levels of Google Maps
-  maxZoom: 21
-});
-view.on('change:center', function() {
-  var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
-  gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
-});
-view.on('change:resolution', function() {
-  gmap.setZoom(view.getZoom());
-});
-
-var vector = new ol.layer.Vector({
-  source: new ol.source.GeoJSON({
-    url: 'data/geojson/countries.geojson',
-    projection: 'EPSG:3857'
-  }),
-  style: new ol.style.Style({
-    fill: new ol.style.Fill({
-      color: 'rgba(255, 255, 255, 0.6)'
-    }),
-    stroke: new ol.style.Stroke({
-      color: '#319FD3',
-      width: 1
-    })
-  })
-});
-
-var olMapDiv = document.getElementById('olmap');
-var map = new ol.Map({
-  layers: [vector],
-  interactions: ol.interaction.defaults({
-    altShiftDragRotate: false,
-    dragPan: false,
-    rotate: false
-  }).extend([new ol.interaction.DragPan({kinetic: null})]),
-  target: olMapDiv,
-  view: view
-});
-view.setCenter([0, 0]);
-view.setZoom(1);
-
-olMapDiv.parentNode.removeChild(olMapDiv);
-gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);

examples/gpx.html

@@ -54,7 +54,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=gpx" type="text/javascript"></script>
 

examples/gpx.js

@@ -96,7 +96,7 @@ map.on('click', function(evt) {
 
 var exportGPXElement = document.getElementById('export-gpx');
 if ('download' in exportGPXElement) {
-  var vectorSource = /** @type {ol.source.Vector} */ (vector.getSource());
+  var vectorSource = vector.getSource();
   exportGPXElement.addEventListener('click', function(e) {
     if (!exportGPXElement.href) {
       var features = [];
@@ -110,7 +110,7 @@ if ('download' in exportGPXElement) {
           /** @type {Node} */ (node));
       var base64 = exampleNS.strToBase64(string);
       exportGPXElement.href =
-          'data:gpx+xml;base64,' + base64;
+          'data:text/gpx+xml;base64,' + base64;
     }
   }, false);
 } else {

examples/graticule.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=graticule" type="text/javascript"></script>
 

examples/heatmap-earthquakes.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=heatmap-earthquakes" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/hue-saturation.html

@@ -66,7 +66,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
 

examples/icon.html

@@ -53,7 +53,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=icon" type="text/javascript"></script>

examples/igc.html

@@ -50,7 +50,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=igc" type="text/javascript"></script>
 

examples/image-filter.html

@@ -57,7 +57,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=image-filter" type="text/javascript"></script>
 

examples/image-vector-layer.html

@@ -51,7 +51,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=image-vector-layer" type="text/javascript"></script>
 

examples/kml-earthquakes.html

@@ -60,13 +60,13 @@
             </p>
             <p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">KML, vector, style</div>
+          <div id="tags">KML, vector, style, tooltip</div>
         </div>
       </div>
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=kml-earthquakes" type="text/javascript"></script>

examples/kml-timezones.html

@@ -54,7 +54,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=kml-timezones" type="text/javascript"></script>

examples/kml.html

@@ -53,7 +53,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=kml" type="text/javascript"></script>
 

examples/kml.js

@@ -63,7 +63,7 @@ map.on('click', function(evt) {
 
 var exportKMLElement = document.getElementById('export-kml');
 if ('download' in exportKMLElement) {
-  var vectorSource = /** @type {ol.source.Vector} */ (vector.getSource());
+  var vectorSource = vector.getSource();
   exportKMLElement.addEventListener('click', function(e) {
     if (!exportKMLElement.href) {
       var features = [];

examples/layer-clipping-webgl.html

@@ -48,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=layer-clipping-webgl" type="text/javascript"></script>
 

examples/layer-clipping.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=layer-clipping" type="text/javascript"></script>
 

examples/layer-group.html

@@ -118,7 +118,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=layer-group" type="text/javascript"></script>
 

examples/layer-spy.html

@@ -52,7 +52,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=layer-spy" type="text/javascript"></script>
 

examples/layer-swipe.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=layer-swipe" type="text/javascript"></script>
 

examples/localized-openstreetmap.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=localized-openstreetmap" type="text/javascript"></script>
 

examples/mapguide-untiled.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=mapguide-untiled" type="text/javascript"></script>
 

examples/mapquest.html

@@ -48,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=mapquest" type="text/javascript"></script>
 

examples/measure.html

@@ -57,7 +57,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=measure" type="text/javascript"></script>
 

examples/min-max-resolution.html

@@ -52,7 +52,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=min-max-resolution" type="text/javascript"></script>
 

examples/mobile-full-screen.html

@@ -16,7 +16,7 @@
   </head>
   <body>
     <div id="map" class="map"></div>
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
 

examples/modify-features.html

@@ -45,7 +45,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=modify-features" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/modify-test.html

@@ -49,7 +49,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=modify-test" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/mouse-position.html

@@ -51,7 +51,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=mouse-position" type="text/javascript"></script>
 

examples/moveend.html

@@ -46,7 +46,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=moveend" type="text/javascript"></script>
 

examples/navigation-controls.html

@@ -48,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=navigation-controls" type="text/javascript"></script>
 

examples/overlay.html

@@ -24,9 +24,6 @@
         font-weight: bold;
         text-shadow: black 0.1em 0.1em 0.2em;
       }
-      .popover {
-        z-index: auto;
-      }
       .popover-content {
         min-width: 180px;
       }
@@ -76,7 +73,7 @@
       <div id="popup" title="Welcome to ol3"></div>
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=overlay" type="text/javascript"></script>

examples/overlay.js

@@ -53,7 +53,7 @@ map.on('click', function(evt) {
 
   $(element).popover('destroy');
   popup.setPosition(coordinate);
-  // the keys are quoted to prevent renaming in ADVANCED_OPTIMIZATIONS mode.
+  // the keys are quoted to prevent renaming in ADVANCED mode.
   $(element).popover({
     'placement': 'top',
     'animation': false,

examples/overviewmap-custom.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+      .ol-custom-overviewmap,
+      .ol-custom-overviewmap.ol-uncollapsible {
+        bottom: auto;
+        left: auto;
+        right: 0;
+        top: 0;
+      }
+
+      .ol-custom-overviewmap:not(.ol-collapsed)  {
+        border: 1px solid black;
+      }
+
+      .ol-custom-overviewmap .ol-overviewmap-map {
+        border: none;
+        width: 300px;
+      }
+
+      .ol-custom-overviewmap .ol-overviewmap-box {
+        border: 2px solid red;
+      }
+
+      .ol-custom-overviewmap:not(.ol-collapsed) button{
+        bottom: auto;
+        left: auto;
+        right: 1px;
+        top: 1px;
+      }
+
+      .ol-rotate {
+        top: 170px;
+        right: 0;
+      }
+
+    </style>
+    <title>ol3 OverviewMap control with advanced customization example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+      <h4 id="title">OverviewMap control, advanced</h4>
+      <div id="map" class="map"></div>
+
+      <div class="row-fluid">
+        <p id="shortdesc">Example of OverviewMap control with advanced customization.</p>
+        <div id="docs">
+          <p>See the <a href="overviewmap-custom.js" target="_blank">overviewmap-custom.js source</a> to see how this is done.</p>
+          <p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS.  You can also rotate the map using the shift key to see how the overview map reacts.</p>
+        </div>
+        <div id="tags">overview, overviewmap</div>
+      </div>
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=overviewmap-custom" type="text/javascript"></script>
+
+  </body>
+</html>

examples/overviewmap-custom.js

@@ -0,0 +1,43 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.OverviewMap');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+var overviewMapControl = new ol.control.OverviewMap({
+  // see in overviewmap-custom.html to see the custom CSS used
+  className: 'ol-overviewmap ol-custom-overviewmap',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM({
+        'url': '//{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
+      })
+    })
+  ],
+  collapseLabel: '\u00BB',
+  label: '\u00AB',
+  collapsed: false
+});
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    overviewMapControl
+  ]),
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [500000, 6000000],
+    zoom: 7
+  })
+});

examples/overviewmap.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>ol3 OverviewMap control example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+      <h4 id="title">OverviewMap control</h4>
+      <div id="map" class="map"></div>
+
+      <div class="row-fluid">
+        <p id="shortdesc">Example of OverviewMap control.</p>
+        <div id="docs">
+          <p>See the <a href="overviewmap.js" target="_blank">overviewmap.js source</a> to see how this is done.</p>
+        </div>
+        <div id="tags">overview, overviewmap</div>
+      </div>
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=overviewmap" type="text/javascript"></script>
+
+  </body>
+</html>

examples/overviewmap.js

@@ -0,0 +1,22 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.OverviewMap');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new ol.control.OverviewMap()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [500000, 6000000],
+    zoom: 7
+  })
+});

examples/popup.html

@@ -98,7 +98,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=popup" type="text/javascript"></script>
 

examples/preload.html

@@ -47,7 +47,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=preload" type="text/javascript"></script>
 

examples/rotation.html

@@ -44,7 +44,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=rotation" type="text/javascript"></script>
 

examples/rtree.js

@@ -1,105 +0,0 @@
-// NOCOMPILE
-// FIXME this example dives into private members and will never compile :)
-goog.require('ol.Feature');
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.extent');
-goog.require('ol.geom.Point');
-goog.require('ol.geom.Polygon');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-
-
-var i, ii, j, jj;
-
-var count = 2000;
-var features = new Array(count);
-var e = 18000000;
-for (i = 0; i < count; ++i) {
-  features[i] = new ol.Feature({
-    'geometry': new ol.geom.Point(
-        [2 * e * Math.random() - e, 2 * e * Math.random() - e])
-  });
-}
-var vectorSource = new ol.source.Vector({
-  features: features
-});
-
-var styleArray = [new ol.style.Style({
-  image: new ol.style.Circle({
-    radius: 3,
-    fill: null,
-    stroke: new ol.style.Stroke({color: 'red', width: 1})
-  })
-})];
-
-var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
-var depthStyle = [];
-for (i = 0, ii = colors.length; i < ii; ++i) {
-  depthStyle[i] = new ol.style.Style({
-    fill: null,
-    image: null,
-    stroke: new ol.style.Stroke({
-      color: colors[i],
-      width: (7 - i) / 2
-    }),
-    zIndex: i
-  });
-}
-var extentsByDepth = [];
-vectorSource.rBush_.forEachNode(function(node) {
-  if (node.height > 0) {
-    if (goog.isDef(extentsByDepth[node.height])) {
-      extentsByDepth[node.height].push(node.extent);
-    } else {
-      extentsByDepth[node.height] = [node.extent];
-    }
-  }
-});
-var rtreeExtentFeatures = [];
-for (i = 0, ii = extentsByDepth.length; i < ii; ++i) {
-  var extents = extentsByDepth[i];
-  if (!goog.isDef(extents)) {
-    continue;
-  }
-  for (j = 0, jj = extents.length; j < jj; ++j) {
-    var extent = extents[j];
-    var geometry = new ol.geom.Polygon([[
-      ol.extent.getBottomLeft(extent),
-      ol.extent.getTopLeft(extent),
-      ol.extent.getTopRight(extent),
-      ol.extent.getBottomRight(extent)
-    ]]);
-    var feature = new ol.Feature({
-      'geometry': geometry,
-      'styleArray': [depthStyle[i]]
-    });
-    rtreeExtentFeatures.push(feature);
-  }
-}
-
-var vector = new ol.layer.Vector({
-  source: vectorSource,
-  style: styleArray
-});
-
-var rtree = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: rtreeExtentFeatures
-  }),
-  style: function(feature, resolution) {
-    return feature.get('styleArray');
-  }
-});
-
-var map = new ol.Map({
-  layers: [vector, rtree],
-  target: 'map',
-  view: new ol.View({
-    center: [0, 0],
-    zoom: 2
-  })
-});

examples/scale-line.html

@@ -50,7 +50,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=scale-line" type="text/javascript"></script>
 

examples/select-features.html

@@ -54,7 +54,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=select-features" type="text/javascript"></script>
 

examples/semi-transparent-layer.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=semi-transparent-layer" type="text/javascript"></script>
 

examples/side-by-side.html

@@ -55,7 +55,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=side-by-side" type="text/javascript"></script>
 

examples/simple.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=simple" type="text/javascript"></script>
 

examples/sphere-mollweide.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
     <script src="loader.js?id=sphere-mollweide" type="text/javascript"></script>

examples/stamen.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=stamen" type="text/javascript"></script>
 

examples/static-image.html

@@ -34,8 +34,16 @@
           <h4 id="title">Static image example</h4>
           <p id="shortdesc">Example of a static image layer.</p>
           <div id="docs">
-            <p>Source: <a href="http://xkcd.com/256/">xkcd.com/256/</a></p>
-            <p>See the <a href="static-image.js" target="_blank">static-image.js source</a> to see how this is done.</p>
+            <p>
+              This example uses a <a href="http://xkcd.com/256/">static image</a>
+              as a layer source.  The map view is configured with a custom
+              projection that translates image coordinates directly into map
+              coordinates.
+            </p>
+            <p>
+              See the <a href="static-image.js" target="_blank">static-image.js source</a>
+              for details on how this is done.
+            </p>
           </div>
           <div id="tags">static image, xkcd</div>
         </div>
@@ -44,7 +52,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=static-image" type="text/javascript"></script>
 

examples/static-image.js

@@ -7,13 +7,14 @@ goog.require('ol.proj.Projection');
 goog.require('ol.source.ImageStatic');
 
 
-// Maps always need a projection, but the static image is not geo-referenced,
-// and are only measured in pixels.  So, we create a fake projection that the
-// map can use to properly display the layer.
-var pixelProjection = new ol.proj.Projection({
-  code: 'pixel',
+// Map views always need a projection.  Here we just want to map image
+// coordinates directly to map coordinates, so we create a projection that uses
+// the image extent in pixels.
+var extent = [0, 0, 1024, 968];
+var projection = new ol.proj.Projection({
+  code: 'xkcd-image',
   units: 'pixels',
-  extent: [0, 0, 1024, 968]
+  extent: extent
 });
 
 var map = new ol.Map({
@@ -26,16 +27,15 @@ var map = new ol.Map({
           })
         ],
         url: 'http://imgs.xkcd.com/comics/online_communities.png',
-        imageSize: [1024, 968],
-        projection: pixelProjection,
-        imageExtent: pixelProjection.getExtent()
+        projection: projection,
+        imageExtent: extent
       })
     })
   ],
   target: 'map',
   view: new ol.View({
-    projection: pixelProjection,
-    center: ol.extent.getCenter(pixelProjection.getExtent()),
+    projection: projection,
+    center: ol.extent.getCenter(extent),
     zoom: 2
   })
 });

examples/synthetic-lines.html

@@ -101,7 +101,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=synthetic-lines" type="text/javascript"></script>
     <script src="../resources/display-frame-rate.js" type="text/javascript"></script>

examples/synthetic-points.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=synthetic-points" type="text/javascript"></script>

examples/teleport.html

@@ -53,7 +53,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=teleport" type="text/javascript"></script>
 

examples/tile-vector.html

@@ -59,7 +59,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=tile-vector" type="text/javascript"></script>
 

examples/tilejson.html

@@ -43,7 +43,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=tilejson" type="text/javascript"></script>
 

examples/tissot.html

@@ -23,8 +23,13 @@
     <div class="container-fluid">
 
       <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
+        <div class="span6">
+          <h4>EPSG:4326</h4>
+          <div id="map4326" class="map"></div>
+        </div>
+        <div class="span6">
+          <h4>EPSG:3857</h4>
+          <div id="map3857" class="map"></div>
         </div>
       </div>
 
@@ -32,7 +37,7 @@
 
         <div class="span12">
           <h4 id="title">Tissot indicatrix example</h4>
-          <p id="shortdesc">Example of a <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> map.</p>
+          <p id="shortdesc">Example of <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> maps. The map on the left is an EPSG:4326 map. The one on the left is EPSG:3857.</p>
           <div id="docs">
             <p>See the <a href="tissot.js" target="_blank">tissot.js source</a> to see how this is done.</p>
           </div>
@@ -43,7 +48,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=tissot" type="text/javascript"></script>
 

examples/tissot.js

@@ -8,9 +8,15 @@ goog.require('ol.layer.Vector');
 goog.require('ol.source.TileWMS');
 goog.require('ol.source.Vector');
 
-var vectorSource = new ol.source.Vector();
+var vectorLayer4326 = new ol.layer.Vector({
+  source: new ol.source.Vector()
+});
 
-var map = new ol.Map({
+var vectorLayer3857 = new ol.layer.Vector({
+  source: new ol.source.Vector()
+});
+
+var map4326 = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.TileWMS({
@@ -20,12 +26,10 @@ var map = new ol.Map({
         }
       })
     }),
-    new ol.layer.Vector({
-      source: vectorSource
-    })
+    vectorLayer4326
   ],
   renderer: 'canvas',
-  target: 'map',
+  target: 'map4326',
   view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
@@ -33,12 +37,35 @@ var map = new ol.Map({
   })
 });
 
+var map3857 = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.TileWMS({
+        url: 'http://demo.opengeo.org/geoserver/wms',
+        params: {
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+        }
+      })
+    }),
+    vectorLayer3857
+  ],
+  renderer: 'canvas',
+  target: 'map3857',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
 var wgs84Sphere = new ol.Sphere(6378137);
 
 var radius = 800000;
-for (var x = -180; x < 180; x += 30) {
-  for (var y = -90; y < 90; y += 30) {
-    var circle = ol.geom.Polygon.circular(wgs84Sphere, [x, y], radius, 64);
-    vectorSource.addFeature(new ol.Feature(circle));
+var x, y;
+for (x = -180; x < 180; x += 30) {
+  for (y = -90; y < 90; y += 30) {
+    var circle4326 = ol.geom.Polygon.circular(wgs84Sphere, [x, y], radius, 64);
+    var circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
+    vectorLayer4326.getSource().addFeature(new ol.Feature(circle4326));
+    vectorLayer3857.getSource().addFeature(new ol.Feature(circle3857));
   }
 }

examples/topojson.html

@@ -45,7 +45,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=topojson" type="text/javascript"></script>
 

examples/vector-labels.html

@@ -353,7 +353,7 @@
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
     <script src="loader.js?id=vector-labels" type="text/javascript"></script>