Merge pull request openlayers#2167 from elemoine/graticule

Add a Graticule component
NShively · Jul 24, 2014 · f5bb790 · f5bb790
2 parents 9fd5c13 + e5a0e73
commit f5bb790
Show file tree

Hide file tree

Showing 12 changed files with 1,066 additions and 3 deletions.
diff --git a/examples/data/geojson/countries-110m.geojson b/examples/data/geojson/countries-110m.geojson
diff --git a/examples/graticule.html b/examples/graticule.html
@@ -0,0 +1,51 @@
+<!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>Graticule 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">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Graticule example</h4>
+          <p id="shortdesc">This example shows how to add a graticule overlay to a map.</p>
+          <div id="docs">
+            <p>See the <a href="graticule.js" target="_blank">graticule.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">graticule</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="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>
+
+  </body>
+</html>
diff --git a/examples/graticule.js b/examples/graticule.js
@@ -0,0 +1,25 @@
+goog.require('ol.Graticule');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View({
+    center: ol.proj.transform([4.8, 47.75], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 5
+  })
+});
+
+// Create the graticule component
+var graticule = new ol.Graticule();
+graticule.setMap(map);
diff --git a/examples/sphere-mollweide.html b/examples/sphere-mollweide.html
@@ -0,0 +1,52 @@
+<!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>Sphere Mollweide 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">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Sphere Mollweide example</h4>
+          <p id="shortdesc">Example of a Sphere Mollweide map with a Graticule component.</p>
+          <div id="docs">
+            <p>See the <a href="sphere-mollweide.js" target="_blank">sphere-mollweide.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">graticule, Mollweide, projection, proj4js</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="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>
+
+  </body>
+</html>
diff --git a/examples/sphere-mollweide.js b/examples/sphere-mollweide.js
@@ -0,0 +1,42 @@
+goog.require('ol.Graticule');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.GeoJSON');
+
+
+proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +
+    '+b=6371000 +units=m +no_defs');
+
+// Configure the Sphere Mollweide projection object with an extent,
+// and a world extent. These are required for the Graticule.
+var sphereMollweideProjection = ol.proj.get('ESRI:53009');
+sphereMollweideProjection.setExtent([
+  -9009954.605703328, -9009954.605703328,
+  9009954.605703328, 9009954.605703328]);
+sphereMollweideProjection.setWorldExtent([-179, -90, 179, 90]);
+
+var map = new ol.Map({
+  keyboardEventTarget: document,
+  layers: [
+    new ol.layer.Vector({
+      source: new ol.source.GeoJSON({
+        projection: sphereMollweideProjection,
+        url: 'data/geojson/countries-110m.geojson'
+      })
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    projection: sphereMollweideProjection,
+    resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
+    zoom: 0
+  })
+});
+
+var graticule = new ol.Graticule({
+  map: map
+});
diff --git a/externs/olx.js b/externs/olx.js
@@ -106,6 +106,41 @@ olx.GeolocationOptions.prototype.projection;
 olx.LogoOptions;
 
 
+/**
+ * @typedef {{map: (ol.Map|undefined),
+ *     maxLines: (number|undefined),
+ *     targetSize: (number|undefined)}}
+ */
+olx.GraticuleOptions;
+
+
+/**
+ * Reference to an `ol.Map` object.
+ * @type {ol.Map|undefined}
+ */
+olx.GraticuleOptions.prototype.map;
+
+
+/**
+ * The maximum number of meridians and parallels from the center of the
+ * map. The default value is 100, which means that at most 200 meridians
+ * and 200 parallels will be displayed. The default value is appropriate
+ * for conformal projections like Spherical Mercator. If you increase
+ * the value more lines will be drawn and the drawing performance will
+ * decrease.
+ * @type {number|undefined}
+ */
+olx.GraticuleOptions.prototype.maxLines;
+
+
+/**
+ * The target size of the graticule cells, in pixels. Default
+ * value is 100 pixels.
+ * @type {number|undefined}
+ */
+olx.GraticuleOptions.prototype.targetSize;
+
+
 /**
  * Object literal with config options for the map.
  * @typedef {{controls: (ol.Collection|Array.<ol.control.Control>|undefined),
@@ -293,7 +328,8 @@ olx.OverlayOptions.prototype.insertFirst;
  *     units: (ol.proj.Units|string),
  *     extent: (ol.Extent|undefined),
  *     axisOrientation: (string|undefined),
- *     global: (boolean|undefined)}}
+ *     global: (boolean|undefined),
+ *     worldExtent: (ol.Extent|undefined)}}
  * @api
  */
 olx.ProjectionOptions;
@@ -334,6 +370,13 @@ olx.ProjectionOptions.prototype.axisOrientation;
 olx.ProjectionOptions.prototype.global;
 
 
+/**
+ * The world extent for the SRS.
+ * @type {ol.Extent|undefined}
+ */
+olx.ProjectionOptions.prototype.worldExtent;
+
+
 /**
  * Object literal with config options for the view.
  * @typedef {{center: (ol.Coordinate|undefined),