Merge pull request #8944 from jahow/fix-graticule

Use a layer for the graticule instead of a control

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
-});