Add overviewmap-custom example, complex use case

2014-10-09 10:10:47 -04:00
parent f17bb1a852
commit efbeba3bb9
2 changed files with 120 additions and 0 deletions
--- a/examples/overviewmap-custom.html
+++ b/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>
--- a/examples/overviewmap-custom.js
+++ b/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
+  })
+});