Merge pull request #8944 from jahow/fix-graticule

Use a layer for the graticule instead of a control

changelog/upgrade-notes.md

@@ -2,8 +2,14 @@
 
 ### Next version
 
+
 Breaking change: The `OverviewMap` control now cannot be instantiated without a list of layers. 
 
+Breaking change: layers can no longer be shared between several `Map` objects.
+
+Breaking change: the `Graticule` control has been replaced by a layer also called `Graticule`, found in `ol/layer/Graticule`.
+The API remains similar.
+
 ### v5.3.0
 
 #### The `getUid` function returns string

examples/graticule.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Map Graticule
-shortdesc: This example shows how to add a graticule overlay to a map.
+shortdesc: This example shows how to add a graticule layer to a map.
 docs: >
-  This example shows how to add a graticule overlay to a map.
+  This example shows how to add a graticule layer to a map.
 tags: "graticule"
 ---
 <div id="map" class="map"></div>

examples/graticule.js

@@ -1,4 +1,4 @@
-import Graticule from '../src/ol/Graticule.js';
+import Graticule from '../src/ol/layer/Graticule.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
@@ -13,6 +13,16 @@ const map = new Map({
       source: new OSM({
         wrapX: false
       })
+    }),
+    new Graticule({
+      // the style to use for the lines, optional.
+      strokeStyle: new Stroke({
+        color: 'rgba(255,120,0,0.9)',
+        width: 2,
+        lineDash: [0.5, 4]
+      }),
+      showLabels: true,
+      wrapX: false
     })
   ],
   target: 'map',
@@ -21,16 +31,3 @@ const map = new Map({
     zoom: 5
   })
 });
-
-// Create the graticule component
-const graticule = new Graticule({
-  // the style to use for the lines, optional.
-  strokeStyle: new Stroke({
-    color: 'rgba(255,120,0,0.9)',
-    width: 2,
-    lineDash: [0.5, 4]
-  }),
-  showLabels: true
-});
-
-graticule.setMap(map);

examples/sphere-mollweide.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Sphere Mollweide
-shortdesc: Example of a Sphere Mollweide map with a Graticule component.
+shortdesc: Example of a Sphere Mollweide map with a Graticule layer.
 docs: >
-  Example of a Sphere Mollweide map with a Graticule component.
+  Example of a Sphere Mollweide map with a Graticule layer.
 tags: "graticule, Mollweide, projection, proj4js"
 ---
 <div id="map" class="map"></div>

examples/sphere-mollweide.js

@@ -1,4 +1,4 @@
-import Graticule from '../src/ol/Graticule.js';
+import Graticule from '../src/ol/layer/Graticule.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
@@ -30,17 +30,13 @@ const map = new Map({
         url: 'data/geojson/countries-110m.geojson',
         format: new GeoJSON()
       })
-    })
+    }),
+    new Graticule()
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
     projection: sphereMollweideProjection,
-    resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
     zoom: 0
   })
 });
-
-new Graticule({
-  map: map
-});

src/ol/index.js

@@ -7,7 +7,7 @@ export {default as Collection} from './Collection.js';
 export {default as Disposable} from './Disposable.js';
 export {default as Feature} from './Feature.js';
 export {default as Geolocation} from './Geolocation.js';
-export {default as Graticule} from './Graticule.js';
+export {default as Graticule} from './layer/Graticule.js';
 export {default as Image} from './Image.js';
 export {default as ImageBase} from './ImageBase.js';
 export {default as ImageCanvas} from './ImageCanvas.js';

src/ol/layer/Graticule.js

@@ -1,19 +1,29 @@
 /**
- * @module ol/Graticule
+ * @module ol/layer/Graticule
  */
-import {degreesToStringHDMS} from './coordinate.js';
+import VectorLayer from './Vector.js';
-import {listen, unlistenByKey} from './events.js';
+import {assign} from '../obj.js';
-import {intersects, getCenter} from './extent.js';
+import {degreesToStringHDMS} from '../coordinate';
-import GeometryLayout from './geom/GeometryLayout.js';
+import Text from '../style/Text';
-import LineString from './geom/LineString.js';
+import Fill from '../style/Fill';
-import Point from './geom/Point.js';
+import Stroke from '../style/Stroke';
-import {meridian, parallel} from './geom/flat/geodesic.js';
+import LineString from '../geom/LineString.js';
-import {clamp} from './math.js';
+import VectorSource from '../source/Vector';
-import {get as getProjection, equivalent as equivalentProjection, getTransform, transformExtent} from './proj.js';
+import {
-import RenderEventType from './render/EventType.js';
+  equivalent as equivalentProjection,
-import Fill from './style/Fill.js';
+  get as getProjection,
-import Stroke from './style/Stroke.js';
+  getTransform,
-import Text from './style/Text.js';
+  transformExtent
+} from '../proj';
+import {getCenter, intersects, equals, getIntersection, isEmpty} from '../extent';
+import {clamp} from '../math';
+import Style from '../style/Style';
+import Feature from '../Feature';
+import {bbox} from '../loadingstrategy';
+import {meridian, parallel} from '../geom/flat/geodesic';
+import GeometryLayout from '../geom/GeometryLayout';
+import Point from '../geom/Point';
+import Collection from '../Collection';
 
 
 /**
@@ -39,10 +49,21 @@ const INTERVALS = [
  * @property {string} text
  */
 
+
 /**
  * @typedef {Object} Options
- * @property {import("./PluggableMap.js").default} [map] Reference to an
+ * @property {number} [opacity=1] Opacity (0, 1).
- * {@link module:ol/Map~Map} object.
+ * @property {boolean} [visible=true] Visibility.
+ * @property {import("../extent.js").Extent} [extent] The bounding extent for layer rendering.  The layer will not be
+ * rendered outside of this extent.
+ * @property {number} [zIndex] The z-index for layer rendering.  At rendering time, the layers
+ * will be ordered, first by Z-index and then by position. When `undefined`, a `zIndex` of 0 is assumed
+ * for layers that are added to the map's `layers` collection, or `Infinity` when the layer's `setMap()`
+ * method was used.
+ * @property {number} [minResolution] The minimum resolution (inclusive) at which this layer will be
+ * visible.
+ * @property {number} [maxResolution] The maximum resolution (exclusive) below which this layer will
+ * be visible.
  * @property {number} [maxLines=100] The maximum number of meridians and
  * parallels from the center of the map. The default value of 100 means that at
  * most 200 meridians and 200 parallels will be displayed. The default value is
@@ -111,35 +132,41 @@ const INTERVALS = [
  * ```js
  * [30, 10]
  * ```
+ * @property {boolean} [wrapX=true] Whether to repeat the graticule horizontally.
  */
 
 
 /**
- * Render a grid for a coordinate system on a map.
+ * @classdesc
+ * Layer that renders a grid for a coordinate system.
+ *
+ * @fires import("../render/Event.js").RenderEvent
  * @api
  */
-class Graticule {
+class Graticule extends VectorLayer {
-
   /**
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    const options = opt_options || {};
+    const options = opt_options ? opt_options : {};
+
+    const baseOptions = assign({}, options);
+
+    delete baseOptions.maxLines;
+    delete baseOptions.strokeStyle;
+    delete baseOptions.targetSize;
+    delete baseOptions.showLabels;
+    delete baseOptions.lonLabelFormatter;
+    delete baseOptions.latLabelFormatter;
+    delete baseOptions.lonLabelPosition;
+    delete baseOptions.latLabelPosition;
+    delete baseOptions.lonLabelStyle;
+    delete baseOptions.latLabelStyle;
+    delete baseOptions.intervals;
+    super(baseOptions);
 
     /**
-     * @type {import("./PluggableMap.js").default}
+     * @type {import("../proj/Projection.js").default}
-     * @private
-     */
-    this.map_ = null;
-
-    /**
-     * @type {?import("./events.js").EventsKey}
-     * @private
-     */
-    this.postcomposeListenerKey_ = null;
-
-    /**
-     * @type {import("./proj/Projection.js").default}
      */
     this.projection_ = null;
 
@@ -222,19 +249,19 @@ class Graticule {
     this.strokeStyle_ = options.strokeStyle !== undefined ? options.strokeStyle : DEFAULT_STROKE_STYLE;
 
     /**
-     * @type {import("./proj.js").TransformFunction|undefined}
+     * @type {import("../proj.js").TransformFunction|undefined}
      * @private
      */
     this.fromLonLatTransform_ = undefined;
 
     /**
-     * @type {import("./proj.js").TransformFunction|undefined}
+     * @type {import("../proj.js").TransformFunction|undefined}
      * @private
      */
     this.toLonLatTransform_ = undefined;
 
     /**
-     * @type {import("./coordinate.js").Coordinate}
+     * @type {import("../coordinate.js").Coordinate}
      * @private
      */
     this.projectionCenterLonLat_ = null;
@@ -251,7 +278,7 @@ class Graticule {
      */
     this.parallelsLabels_ = null;
 
-    if (options.showLabels == true) {
+    if (options.showLabels) {
 
       /**
        * @type {null|function(number):string}
@@ -286,11 +313,23 @@ class Graticule {
         options.latLabelPosition;
 
       /**
-       * @type {Text}
+       * @type {Object.<string,Style>}
        * @private
        */
-      this.lonLabelStyle_ = options.lonLabelStyle !== undefined ? options.lonLabelStyle :
+      this.lonLabelStyleCache_ = {};
+
+      /**
+       * @private
+       * @param {import("../Feature").default} feature Feature
+       * @return {Style} style
+       */
+      this.lonLabelStyle_ = function(feature) {
+        const label = feature.get('graticule_label');
+        if (!this.lonLabelStyleCache_[label]) {
+          this.lonLabelStyleCache_[label] = new Style({
+            text: options.lonLabelStyle !== undefined ? options.lonLabelStyle :
               new Text({
+                text: label,
                 font: '12px Calibri,sans-serif',
                 textBaseline: 'bottom',
                 fill: new Fill({
@@ -300,16 +339,32 @@ class Graticule {
                   color: 'rgba(255,255,255,1)',
                   width: 3
                 })
+              })
           });
+        }
+        return this.lonLabelStyleCache_[label];
+      }.bind(this);
 
       /**
-       * @type {Text}
+       * @type {Object.<string,Style>}
        * @private
        */
-      this.latLabelStyle_ = options.latLabelStyle !== undefined ? options.latLabelStyle :
+      this.latLabelStyleCache_ = {};
+
+      /**
+       * @private
+       * @param {import("../Feature").default} feature Feature
+       * @return {Style} style
+       */
+      this.latLabelStyle_ = function(feature) {
+        const label = feature.get('graticule_label');
+        if (!this.latLabelStyleCache_[label]) {
+          this.latLabelStyleCache_[label] = new Style({
+            text: options.latLabelStyle !== undefined ? options.latLabelStyle :
               new Text({
+                text: label,
                 font: '12px Calibri,sans-serif',
-          textAlign: 'end',
+                textAlign: 'right',
                 fill: new Fill({
                   color: 'rgba(0,0,0,1)'
                 }),
@@ -317,7 +372,11 @@ class Graticule {
                   color: 'rgba(255,255,255,1)',
                   width: 3
                 })
+              })
           });
+        }
+        return this.latLabelStyleCache_[label];
+      }.bind(this);
 
       this.meridiansLabels_ = [];
       this.parallelsLabels_ = [];
@@ -329,7 +388,143 @@ class Graticule {
      */
     this.intervals_ = options.intervals !== undefined ? options.intervals : INTERVALS;
 
-    this.setMap(options.map !== undefined ? options.map : null);
+    // use a source with a custom loader for lines & text
+    this.setSource(
+      new VectorSource({
+        loader: this.loaderFunction.bind(this),
+        strategy: bbox,
+        features: new Collection(),
+        overlaps: false,
+        useSpatialIndex: false,
+        wrapX: options.wrapX
+      })
+    );
+
+    /**
+     * feature pool to use when updating graticule
+     * @type {Array<Feature>}
+     * @private
+     */
+    this.featurePool_ = [];
+
+    /**
+     * @type {Style}
+     * @private
+     */
+    this.lineStyle_ = new Style({
+      stroke: this.strokeStyle_
+    });
+
+    /**
+     * @type {import("../extent.js").Extent}
+     */
+    this.renderedExtent_ = null;
+
+    this.setRenderOrder(null);
+
+    this.renderBuffer_ = 0;
+
+    this.updateWhileAnimating_ = true;
+    this.updateWhileInteracting_ = true;
+
+    this.tmpExtent_ = null;
+  }
+
+  /**
+   * Update geometries in the source based on current view
+   * @param {import("../extent").Extent} extent Extent
+   * @param {number} resolution Resolution
+   * @param {import("../proj/Projection.js").default} projection Projection
+   */
+  loaderFunction(extent, resolution, projection) {
+    const source = /** @type import("../source/Vector").default} */ (this.getSource());
+
+    // only consider the intersection between our own extent & the requested one
+    const layerExtent = this.getExtent() || [-Infinity, -Infinity, Infinity, Infinity];
+    const renderExtent = getIntersection(layerExtent, extent, this.tmpExtent_);
+
+    // we should not keep track of loaded extents
+    setTimeout(function() {
+      source.removeLoadedExtent(extent);
+    }, 0);
+
+    if (this.renderedExtent_ && equals(this.renderedExtent_, renderExtent)) {
+      return;
+    }
+    this.renderedExtent_ = renderExtent;
+
+    // bail out if nothing to render
+    if (isEmpty(renderExtent)) {
+      return;
+    }
+
+    // update projection info
+    const center = getCenter(renderExtent);
+    const squaredTolerance = resolution * resolution / 4;
+
+    const updateProjectionInfo = !this.projection_ ||
+      !equivalentProjection(this.projection_, projection);
+
+    if (updateProjectionInfo) {
+      this.updateProjectionInfo_(projection);
+    }
+
+    this.createGraticule_(renderExtent, center, resolution, squaredTolerance);
+
+    // first make sure we have enough features in the pool
+    let featureCount = this.meridians_.length + this.parallels_.length;
+    if (this.meridiansLabels_) {
+      featureCount += this.meridiansLabels_.length;
+    }
+    if (this.parallelsLabels_) {
+      featureCount += this.parallelsLabels_.length;
+    }
+
+    let feature;
+    while (featureCount > this.featurePool_.length) {
+      feature = new Feature();
+      this.featurePool_.push(feature);
+    }
+
+    const featuresColl = source.getFeaturesCollection();
+    featuresColl.clear();
+    let poolIndex = 0;
+
+    // add features for the lines & labels
+    let i, l;
+    for (i = 0, l = this.meridians_.length; i < l; ++i) {
+      feature = this.featurePool_[poolIndex++];
+      feature.setGeometry(this.meridians_[i]);
+      feature.setStyle(this.lineStyle_);
+      featuresColl.push(feature);
+    }
+    for (i = 0, l = this.parallels_.length; i < l; ++i) {
+      feature = this.featurePool_[poolIndex++];
+      feature.setGeometry(this.parallels_[i]);
+      feature.setStyle(this.lineStyle_);
+      featuresColl.push(feature);
+    }
+    let labelData;
+    if (this.meridiansLabels_) {
+      for (i = 0, l = this.meridiansLabels_.length; i < l; ++i) {
+        labelData = this.meridiansLabels_[i];
+        feature = this.featurePool_[poolIndex++];
+        feature.setGeometry(labelData.geom);
+        feature.setStyle(this.lonLabelStyle_);
+        feature.set('graticule_label', labelData.text);
+        featuresColl.push(feature);
+      }
+    }
+    if (this.parallelsLabels_) {
+      for (i = 0, l = this.parallelsLabels_.length; i < l; ++i) {
+        labelData = this.parallelsLabels_[i];
+        feature = this.featurePool_[poolIndex++];
+        feature.setGeometry(labelData.geom);
+        feature.setStyle(this.latLabelStyle_);
+        feature.set('graticule_label', labelData.text);
+        featuresColl.push(feature);
+      }
+    }
   }
 
   /**
@@ -337,7 +532,7 @@ class Graticule {
    * @param {number} minLat Minimal latitude.
    * @param {number} maxLat Maximal latitude.
    * @param {number} squaredTolerance Squared tolerance.
-   * @param {import("./extent.js").Extent} extent Extent.
+   * @param {import("../extent.js").Extent} extent Extent.
    * @param {number} index Index.
    * @return {number} Index.
    * @private
@@ -357,37 +552,12 @@ class Graticule {
     return index;
   }
 
-  /**
-   * @param {LineString} lineString Meridian
-   * @param {import("./extent.js").Extent} extent Extent.
-   * @param {number} index Index.
-   * @return {Point} Meridian point.
-   * @private
-   */
-  getMeridianPoint_(lineString, extent, index) {
-    const flatCoordinates = lineString.getFlatCoordinates();
-    const clampedBottom = Math.max(extent[1], flatCoordinates[1]);
-    const clampedTop = Math.min(extent[3], flatCoordinates[flatCoordinates.length - 1]);
-    const lat = clamp(
-      extent[1] + Math.abs(extent[1] - extent[3]) * this.lonLabelPosition_,
-      clampedBottom, clampedTop);
-    const coordinate = [flatCoordinates[0], lat];
-    let point;
-    if (index in this.meridiansLabels_) {
-      point = this.meridiansLabels_[index].geom;
-      point.setCoordinates(coordinate);
-    } else {
-      point = new Point(coordinate);
-    }
-    return point;
-  }
-
   /**
    * @param {number} lat Latitude.
    * @param {number} minLon Minimal longitude.
    * @param {number} maxLon Maximal longitude.
    * @param {number} squaredTolerance Squared tolerance.
-   * @param {import("./extent.js").Extent} extent Extent.
+   * @param {import("../extent.js").Extent} extent Extent.
    * @param {number} index Index.
    * @return {number} Index.
    * @private
@@ -408,39 +578,13 @@ class Graticule {
   }
 
   /**
-   * @param {LineString} lineString Parallels.
+   * @param {import("../extent.js").Extent} extent Extent.
-   * @param {import("./extent.js").Extent} extent Extent.
+   * @param {import("../coordinate.js").Coordinate} center Center.
-   * @param {number} index Index.
-   * @return {Point} Parallel point.
-   * @private
-   */
-  getParallelPoint_(lineString, extent, index) {
-    const flatCoordinates = lineString.getFlatCoordinates();
-    const clampedLeft = Math.max(extent[0], flatCoordinates[0]);
-    const clampedRight = Math.min(extent[2], flatCoordinates[flatCoordinates.length - 2]);
-    const lon = clamp(
-      extent[0] + Math.abs(extent[0] - extent[2]) * this.latLabelPosition_,
-      clampedLeft, clampedRight);
-    const coordinate = [lon, flatCoordinates[1]];
-    let point;
-    if (index in this.parallelsLabels_) {
-      point = this.parallelsLabels_[index].geom;
-      point.setCoordinates(coordinate);
-    } else {
-      point = new Point(coordinate);
-    }
-    return point;
-  }
-
-  /**
-   * @param {import("./extent.js").Extent} extent Extent.
-   * @param {import("./coordinate.js").Coordinate} center Center.
    * @param {number} resolution Resolution.
    * @param {number} squaredTolerance Squared tolerance.
    * @private
    */
   createGraticule_(extent, center, resolution, squaredTolerance) {
-
     const interval = this.getInterval_(resolution);
     if (interval == -1) {
       this.meridians_.length = this.parallels_.length = 0;
@@ -557,15 +701,6 @@ class Graticule {
     return interval;
   }
 
-  /**
-   * Get the map associated with this graticule.
-   * @return {import("./PluggableMap.js").default} The map.
-   * @api
-   */
-  getMap() {
-    return this.map_;
-  }
-
   /**
    * @param {number} lon Longitude.
    * @param {number} minLat Minimal latitude.
@@ -587,6 +722,31 @@ class Graticule {
     return lineString;
   }
 
+  /**
+   * @param {LineString} lineString Meridian
+   * @param {import("../extent.js").Extent} extent Extent.
+   * @param {number} index Index.
+   * @return {Point} Meridian point.
+   * @private
+   */
+  getMeridianPoint_(lineString, extent, index) {
+    const flatCoordinates = lineString.getFlatCoordinates();
+    const clampedBottom = Math.max(extent[1], flatCoordinates[1]);
+    const clampedTop = Math.min(extent[3], flatCoordinates[flatCoordinates.length - 1]);
+    const lat = clamp(
+      extent[1] + Math.abs(extent[1] - extent[3]) * this.lonLabelPosition_,
+      clampedBottom, clampedTop);
+    const coordinate = [flatCoordinates[0], lat];
+    let point;
+    if (index in this.meridiansLabels_) {
+      point = this.meridiansLabels_[index].geom;
+      point.setCoordinates(coordinate);
+    } else {
+      point = new Point(coordinate);
+    }
+    return point;
+  }
+
   /**
    * Get the list of meridians.  Meridians are lines of equal longitude.
    * @return {Array<LineString>} The meridians.
@@ -617,6 +777,32 @@ class Graticule {
     return lineString;
   }
 
+
+  /**
+   * @param {LineString} lineString Parallels.
+   * @param {import("../extent.js").Extent} extent Extent.
+   * @param {number} index Index.
+   * @return {Point} Parallel point.
+   * @private
+   */
+  getParallelPoint_(lineString, extent, index) {
+    const flatCoordinates = lineString.getFlatCoordinates();
+    const clampedLeft = Math.max(extent[0], flatCoordinates[0]);
+    const clampedRight = Math.min(extent[2], flatCoordinates[flatCoordinates.length - 2]);
+    const lon = clamp(
+      extent[0] + Math.abs(extent[0] - extent[2]) * this.latLabelPosition_,
+      clampedLeft, clampedRight);
+    const coordinate = [lon, flatCoordinates[1]];
+    let point;
+    if (index in this.parallelsLabels_) {
+      point = this.parallelsLabels_[index].geom;
+      point.setCoordinates(coordinate);
+    } else {
+      point = new Point(coordinate);
+    }
+    return point;
+  }
+
   /**
    * Get the list of parallels.  Parallels are lines of equal latitude.
    * @return {Array<LineString>} The parallels.
@@ -627,62 +813,7 @@ class Graticule {
   }
 
   /**
-   * @param {import("./render/Event.js").default} e Event.
+   * @param {import("../proj/Projection.js").default} projection Projection.
-   * @private
-   */
-  handlePostCompose_(e) {
-    const vectorContext = e.vectorContext;
-    const frameState = e.frameState;
-    const extent = frameState.extent;
-    const viewState = frameState.viewState;
-    const center = viewState.center;
-    const projection = viewState.projection;
-    const resolution = viewState.resolution;
-    const pixelRatio = frameState.pixelRatio;
-    const squaredTolerance =
-        resolution * resolution / (4 * pixelRatio * pixelRatio);
-
-    const updateProjectionInfo = !this.projection_ ||
-        !equivalentProjection(this.projection_, projection);
-
-    if (updateProjectionInfo) {
-      this.updateProjectionInfo_(projection);
-    }
-
-    this.createGraticule_(extent, center, resolution, squaredTolerance);
-
-    // Draw the lines
-    vectorContext.setFillStrokeStyle(null, this.strokeStyle_);
-    let i, l, line;
-    for (i = 0, l = this.meridians_.length; i < l; ++i) {
-      line = this.meridians_[i];
-      vectorContext.drawGeometry(line);
-    }
-    for (i = 0, l = this.parallels_.length; i < l; ++i) {
-      line = this.parallels_[i];
-      vectorContext.drawGeometry(line);
-    }
-    let labelData;
-    if (this.meridiansLabels_) {
-      for (i = 0, l = this.meridiansLabels_.length; i < l; ++i) {
-        labelData = this.meridiansLabels_[i];
-        this.lonLabelStyle_.setText(labelData.text);
-        vectorContext.setTextStyle(this.lonLabelStyle_);
-        vectorContext.drawGeometry(labelData.geom);
-      }
-    }
-    if (this.parallelsLabels_) {
-      for (i = 0, l = this.parallelsLabels_.length; i < l; ++i) {
-        labelData = this.parallelsLabels_[i];
-        this.latLabelStyle_.setText(labelData.text);
-        vectorContext.setTextStyle(this.latLabelStyle_);
-        vectorContext.drawGeometry(labelData.geom);
-      }
-    }
-  }
-
-  /**
-   * @param {import("./proj/Projection.js").default} projection Projection.
    * @private
    */
   updateProjectionInfo_(projection) {
@@ -709,25 +840,7 @@ class Graticule {
 
     this.projection_ = projection;
   }
-
-  /**
-   * Set the map for this graticule.  The graticule will be rendered on the
-   * provided map.
-   * @param {import("./PluggableMap.js").default} map Map.
-   * @api
-   */
-  setMap(map) {
-    if (this.map_) {
-      unlistenByKey(this.postcomposeListenerKey_);
-      this.postcomposeListenerKey_ = null;
-      this.map_.render();
-    }
-    if (map) {
-      this.postcomposeListenerKey_ = listen(map, RenderEventType.POSTCOMPOSE, this.handlePostCompose_, this);
-      map.render();
-    }
-    this.map_ = map;
-  }
 }
 
+
 export default Graticule;

test/spec/ol/graticule.test.js

@@ -1,15 +1,17 @@
-import Graticule from '../../../src/ol/Graticule.js';
+import Graticule from '../../../src/ol/layer/Graticule.js';
 import Map from '../../../src/ol/Map.js';
 import {get as getProjection} from '../../../src/ol/proj.js';
 import Stroke from '../../../src/ol/style/Stroke.js';
 import Text from '../../../src/ol/style/Text.js';
+import Feature from '../../../src/ol/Feature';
 
-describe('ol.Graticule', function() {
+describe('ol.layer.Graticule', function() {
   let graticule;
 
   function createGraticule() {
-    graticule = new Graticule({
+    graticule = new Graticule();
-      map: new Map({})
+    new Map({
+      layers: [graticule]
     });
   }
 
@@ -31,9 +33,11 @@ describe('ol.Graticule', function() {
 
     it('creates a graticule with labels', function() {
       graticule = new Graticule({
-        map: new Map({}),
         showLabels: true
       });
+      new Map({
+        layers: [graticule]
+      });
       const extent = [-25614353.926475704, -7827151.696402049,
         25614353.926475704, 7827151.696402049];
       const projection = getProjection('EPSG:3857');
@@ -75,6 +79,7 @@ describe('ol.Graticule', function() {
     it('can be configured with label options', function() {
       const latLabelStyle = new Text();
       const lonLabelStyle = new Text();
+      const feature = new Feature();
       graticule = new Graticule({
         map: new Map({}),
         showLabels: true,
@@ -98,15 +103,14 @@ describe('ol.Graticule', function() {
       graticule.createGraticule_(extent, [0, 0], resolution, squaredTolerance);
       expect(graticule.meridiansLabels_[0].text).to.be('lon: 0');
       expect(graticule.parallelsLabels_[0].text).to.be('lat: 0');
-      expect(graticule.lonLabelStyle_).to.eql(lonLabelStyle);
+      expect(graticule.lonLabelStyle_(feature).getText()).to.eql(lonLabelStyle);
-      expect(graticule.latLabelStyle_).to.eql(latLabelStyle);
+      expect(graticule.latLabelStyle_(feature).getText()).to.eql(latLabelStyle);
       expect(graticule.lonLabelPosition_).to.be(0.9);
       expect(graticule.latLabelPosition_).to.be(0.1);
     });
 
     it('can be configured with interval limits', function() {
       graticule = new Graticule({
-        map: new Map({}),
         showLabels: true,
         lonLabelFormatter: function(lon) {
           return lon.toString();
@@ -116,6 +120,9 @@ describe('ol.Graticule', function() {
         },
         intervals: [10]
       });
+      new Map({
+        layers: [graticule]
+      });
       const extent = [-25614353.926475704, -7827151.696402049,
         25614353.926475704, 7827151.696402049];
       const projection = getProjection('EPSG:3857');