updated singleWorldView doc

TerminalTim · TerminalTim · commit a8e5316f8724 · 2025-02-21T19:04:41.000+01:00
added example for single world view

Signed-off-by: Tim Deubler &lt;tim.deubler@here.com&gt;
diff --git a/packages/display/src/MapOptions.ts b/packages/display/src/MapOptions.ts
@@ -149,7 +149,9 @@ export interface MapOptions {
      * - `true`: Restricts repetition on both the latitude (Y-axis) and longitude (X-axis).
      * - `false`: Allows infinite repetition on both axes.
      * - `'latitude'`: Restricts repetition only on the latitude (Y-axis), allowing infinite panning on the X-axis.
-     * - `'both'`: Restricts repetition on both axes (latitude and longitude).
+     * - `'both'`: Restricts repetition on both latitude and longitude axes.
+     *
+     * When set to `true` or `'latitude'`, zooming out is limited to prevent the map from repeating, allowing it to cover the entire visible area without repetition.
      *
      * @default false
      */
diff --git a/packages/playground/examples/display/world_repetition_modes.html b/packages/playground/examples/display/world_repetition_modes.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <title>XYZ Maps Example: World Repetition Modes</title>
+    <style type="text/css">
+        #map {
+            position: absolute;
+            overflow: hidden;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+<div id="map"></div>
+</body>
+</html>
diff --git a/packages/playground/examples/display/world_repetition_modes.ts b/packages/playground/examples/display/world_repetition_modes.ts
@@ -0,0 +1,35 @@
+import {MVTLayer} from '@here/xyz-maps-core';
+import {Map} from '@here/xyz-maps-display';
+
+// This example demonstrates the `singleWorldView` option,
+// which controls whether the map repeats infinitely when zoomed out.
+// It has the following options:
+
+// - `true`: Restricts repetition on both latitude (Y-axis) and longitude (X-axis).
+// - `false`: Allows infinite repetition on both axes.
+// - `'latitude'`: Restricts repetition only on the latitude (Y-axis), allowing infinite panning on the X-axis.
+// - `'both'`: Restricts repetition on both latitude and longitude axes.
+
+// When set to `true` or `'latitude'`, zooming out is limited to prevent the map from repeating, allowing it to cover the entire visible area without repetition.
+
+// In this example, `singleWorldView: true` ensures that the world is displayed only once at the maximum zoom-out level,
+// and repetition is restricted on both axes (latitude and longitude).
+
+const display = new Map(document.getElementById('map'), {
+    zoomlevel: 2,
+    center: {
+        longitude: -122.48024,
+        latitude: 37.77326
+    },
+    layers: [
+        new MVTLayer({
+            min: 1,
+            max: 20,
+            remote: {
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
+            }
+        })
+    ],
+    // Restricts repetition on both latitude and longitude axes. Zoom-out is limited to prevent the map from repeating.
+    singleWorldView: true
+});
diff --git a/packages/playground/examples/examples.json b/packages/playground/examples/examples.json
@@ -67,6 +67,10 @@
     {
       "file": "./display/custom_lightning.html",
       "docs": "interfaces/core.layerstyle.html#lights"
+    },
+    {
+      "file": "./display/world_repetition_modes.html",
+      "docs": "interfaces/display.mapoptions.html#singleworldview"
     }
   ],
   "Editor": [

Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,10 @@`
`67`	`67`	`{`
`68`	`68`	`"file": "./display/custom_lightning.html",`
`69`	`69`	`"docs": "interfaces/core.layerstyle.html#lights"`
	`70`	`+ },`
	`71`	`+ {`
	`72`	`+ "file": "./display/world_repetition_modes.html",`
	`73`	`+ "docs": "interfaces/display.mapoptions.html#singleworldview"`
`70`	`74`	`}`
`71`	`75`	`],`
`72`	`76`	`"Editor": [`