Add a marker label position sample page

examples/basic/src/ClientMapRoutes.tsx

@@ -35,6 +35,7 @@ const TiltPage = lazy(() => import('./pages/map/tilt/TiltPage').then(m => ({ def
 const UISettingsPage = lazy(() => import('./pages/map/uisettings/UISettingsPage').then(m => ({ default: m.UISettingsPage })));
 const VisibleRegionPage = lazy(() => import('./pages/map/visibleregion/VisibleRegionPage').then(m => ({ default: m.VisibleRegionPage })));
 const CameraSyncPage = lazy(() => import('./pages/map/camerasync/CameraSyncPage').then(m => ({ default: m.CameraSyncPage })));
+const MarkerLabelPositionPage = lazy(() => import('./pages/marker/labelposition/MarkerLabelPositionPage').then(m => ({ default: m.MarkerLabelPositionPage })));
 const MarkerAnimationPage = lazy(() => import('./pages/marker/animation/MarkerAnimationPage').then(m => ({ default: m.MarkerAnimationPage })));
 const PostOfficePage = lazy(() => import('./pages/marker/postoffice/PostOfficePage').then(m => ({ default: m.PostOfficePage })));
 const PostOfficeClusterPage = lazy(() => import('./pages/marker/postofficecluster/PostOfficeClusterPage').then(m => ({ default: m.PostOfficeClusterPage })));
@@ -84,6 +85,7 @@ function pageContent(page: string | undefined) {
     case 'visible-region': return <VisibleRegionPage />;
     case 'camera-sync': return <CameraSyncPage />;
     case 'marker': return <MarkerIconsPage />;
+    case 'marker-label-position': return <MarkerLabelPositionPage />;
     case 'marker-animation': return <MarkerAnimationPage />;
     case 'post-office': return <PostOfficePage />;
     case 'circle': return <CirclePage />;

examples/basic/src/pages/marker/labelposition/MarkerLabelPositionPage.tsx

@@ -0,0 +1,58 @@
+import { useMemo, useState } from 'react';
+import {
+  ColorDefaultIcon,
+  createGeoPoint,
+  createMarkerState,
+  type MarkerLabelPosition,
+} from '@mapconductor/js-sdk-core';
+import { InfoBubble, Markers } from '@mapconductor/js-sdk-react';
+import { MapViewContainer } from '../../../MapViewContainer';
+
+// 信州大学（松本キャンパス）周辺に 3 × 3 で並べ、それぞれ違う labelPosition を付ける。
+const CENTER = { latitude: 36.2526, longitude: 137.9828 };
+const INIT_CAMERA = { lat: CENTER.latitude, lng: CENTER.longitude, zoom: 15 };
+const STEP = { latitude: 0.004, longitude: 0.007 };
+
+const POSITIONS: MarkerLabelPosition[][] = [
+  ['left top', 'center top', 'right top'],
+  ['left center', 'center center', 'right center'],
+  ['left bottom', 'center bottom', 'right bottom'],
+];
+
+export function MarkerLabelPositionPage() {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const markers = useMemo(
+    () =>
+      POSITIONS.flatMap((row, rowIndex) =>
+        row.map((labelPosition, columnIndex) =>
+          createMarkerState({
+            id: labelPosition,
+            position: createGeoPoint({
+              latitude: CENTER.latitude + (1 - rowIndex) * STEP.latitude,
+              longitude: CENTER.longitude + (columnIndex - 1) * STEP.longitude,
+            }),
+            icon: new ColorDefaultIcon({
+              label: labelPosition === 'center center' ? '信' : '信州大学',
+              labelPosition,
+              debug: true,
+            }),
+            extra: labelPosition,
+            onClick: state => setSelectedId(state.id),
+          }),
+        ),
+      ),
+    [],
+  );
+  const selected = markers.find(marker => marker.id === selectedId);
+
+  return (
+    <MapViewContainer initialCamera={INIT_CAMERA} onMapClick={() => setSelectedId(null)}>
+      <Markers states={markers} />
+      {selected ? (
+        <InfoBubble key={selected.id} marker={selected} bubbleColor="#ffffff" borderColor="#000000">
+          <code>labelPosition: "{selected.extra as string}"</code>
+        </InfoBubble>
+      ) : null}
+    </MapViewContainer>
+  );
+}

examples/basic/src/samples/documentation/index.ts

@@ -15,6 +15,7 @@ import tilt from './pages/tilt';
 import visibleRegion from './pages/visible-region';
 import cameraSync from './pages/camera-sync';
 import marker from './pages/marker';
+import markerLabelPosition from './pages/marker-label-position';
 import markerAnimation from './pages/marker-animation';
 import postOffice from './pages/post-office';
 import postOfficeCluster from './pages/post-office-cluster';
@@ -49,6 +50,7 @@ const DOCUMENTATION: Record<string, SamplePageDoc> = {
   'visible-region': visibleRegion,
   'camera-sync': cameraSync,
   marker,
+  'marker-label-position': markerLabelPosition,
   'marker-animation': markerAnimation,
   'post-office': postOffice,
   'post-office-cluster': postOfficeCluster,
@@ -166,6 +168,7 @@ const IMPORT_DEFINITIONS: readonly ImportDefinition[] = [
       'MapCameraPosition',
       'MapDesignTypeInterface',
       'MapViewStateInterface',
+      'MarkerLabelPosition',
       'MarkerState',
       'VisibleRegion',
     ],

examples/basic/src/samples/documentation/pages/marker-label-position.ts

@@ -0,0 +1,60 @@
+import type { SamplePageDoc } from '../types';
+
+const doc: SamplePageDoc = {
+  code: `<MapViewContainer state={mapViewState}>
+  <Markers states={markers} />
+</MapViewContainer>`,
+  state: `const POSITIONS: MarkerLabelPosition[] = [
+  'left top', 'center top', 'right top',
+  'left center', 'center center', 'right center',
+  'left bottom', 'center bottom', 'right bottom',
+];
+const markers = useMemo(() => POSITIONS.map((labelPosition, index) => createMarkerState({
+  id: labelPosition,
+  position: positions[index],
+  icon: new ColorDefaultIcon({
+    label: '信州大学',
+    labelPosition, // e.g. 'right center' draws the label beside the pin
+  }),
+})), [positions]);`,
+  explanation: {
+    en: [
+      'Place a default marker’s label beside, above or below the pin instead of on top of it.',
+      'labelPosition takes the same keywords as CSS background-position: a horizontal one (left / center / right) and a vertical one (top / center / bottom), in either order. A single keyword leaves the other axis at center.',
+      'left and right put the label outside the pin and align it to the pin’s top, head or tip. In the center column, top and bottom move the label above or below the pin. The default, center center, keeps the label on the pin head as before.',
+      'The icon grows only on the label’s side, and the pin tip stays on the marker’s position. Info bubbles still attach to the pin, not to the middle of the wider icon.',
+    ],
+    ja: [
+      '既定マーカーのラベルを、ピンに重ねるのではなく横・上・下に置きます。',
+      'labelPosition は CSS の background-position と同じキーワードを受け取ります。横（left / center / right）と縦（top / center / bottom）を空白で区切り、順序はどちらでも構いません。片方だけなら残りは center です。',
+      'left / right はラベルをピンの外側に置き、縦はピンの上端・頭の中心・先端に揃えます。center の列では top / bottom がピンの上・下に置きます。既定の center center はこれまでどおりピンの頭に重ねます。',
+      'アイコンはラベルの側にだけ広がり、ピンの先端はマーカーの位置に留まります。吹き出しも広がったアイコンの中央ではなく、ピンに付きます。',
+    ],
+    'es-419': [
+      'Coloca la etiqueta de un marcador predeterminado al lado, encima o debajo del pin en lugar de sobre él.',
+      'labelPosition usa las mismas palabras clave que background-position de CSS: una horizontal (left / center / right) y una vertical (top / center / bottom), en cualquier orden. Con una sola palabra, el otro eje queda en center.',
+      'left y right colocan la etiqueta fuera del pin y la alinean con la parte superior, la cabeza o la punta del pin. En la columna center, top y bottom la llevan encima o debajo del pin. El valor predeterminado, center center, la mantiene sobre la cabeza del pin como antes.',
+      'El icono solo crece hacia el lado de la etiqueta y la punta del pin sigue en la posición del marcador. Los globos de información siguen anclados al pin, no al centro del icono ampliado.',
+    ],
+    de: [
+      'Die Beschriftung eines Standard-Markers neben, über oder unter die Nadel setzen statt darauf.',
+      'labelPosition verwendet dieselben Schlüsselwörter wie CSS background-position: eines für die Horizontale (left / center / right) und eines für die Vertikale (top / center / bottom), in beliebiger Reihenfolge. Bei nur einem Schlüsselwort bleibt die andere Achse auf center.',
+      'left und right setzen die Beschriftung außerhalb der Nadel und richten sie an deren Oberkante, Kopf oder Spitze aus. In der Spalte center rücken top und bottom sie über oder unter die Nadel. Der Standard center center belässt sie wie bisher auf dem Nadelkopf.',
+      'Das Icon wächst nur zur Seite der Beschriftung, und die Nadelspitze bleibt auf der Markerposition. Info-Sprechblasen hängen weiterhin an der Nadel, nicht an der Mitte des breiteren Icons.',
+    ],
+    th: [
+      'วางป้ายข้อความของมาร์กเกอร์เริ่มต้นไว้ข้าง ๆ ด้านบน หรือด้านล่างของหมุด แทนการวางทับหมุด',
+      'labelPosition ใช้คีย์เวิร์ดเดียวกับ background-position ของ CSS คือแนวนอน (left / center / right) และแนวตั้ง (top / center / bottom) เรียงลำดับใดก็ได้ ถ้าระบุเพียงคำเดียว อีกแกนจะเป็น center',
+      'left และ right วางป้ายไว้นอกหมุดและจัดให้ตรงกับขอบบน หัว หรือปลายของหมุด ในคอลัมน์ center ค่า top และ bottom จะย้ายป้ายไปไว้เหนือหรือใต้หมุด ค่าเริ่มต้น center center ยังคงวางป้ายบนหัวหมุดเหมือนเดิม',
+      'ไอคอนจะขยายเฉพาะฝั่งที่มีป้าย และปลายหมุดยังอยู่ที่ตำแหน่งของมาร์กเกอร์ บับเบิลข้อมูลยังคงติดกับหมุด ไม่ใช่กึ่งกลางของไอคอนที่กว้างขึ้น',
+    ],
+    hi: [
+      'डिफ़ॉल्ट मार्कर का लेबल पिन के ऊपर रखने के बजाय उसके बगल में, ऊपर या नीचे रखें।',
+      'labelPosition वही कीवर्ड लेता है जो CSS का background-position लेता है: एक क्षैतिज (left / center / right) और एक ऊर्ध्वाधर (top / center / bottom), किसी भी क्रम में। सिर्फ़ एक कीवर्ड देने पर दूसरी धुरी center रहती है।',
+      'left और right लेबल को पिन के बाहर रखते हैं और उसे पिन के ऊपरी सिरे, सिर या नोक से संरेखित करते हैं। center कॉलम में top और bottom लेबल को पिन के ऊपर या नीचे ले जाते हैं। डिफ़ॉल्ट center center पहले की तरह लेबल को पिन के सिर पर रखता है।',
+      'आइकन सिर्फ़ लेबल की तरफ़ बढ़ता है और पिन की नोक मार्कर की जगह पर ही रहती है। इन्फ़ो बबल भी पिन से जुड़ा रहता है, चौड़े आइकन के बीच से नहीं।',
+    ],
+  },
+};
+
+export default doc;

examples/basic/src/samples/sampleRegistry.ts

@@ -27,6 +27,7 @@ export const SAMPLE_PAGES: SamplePageDefinition[] = [
   { id: 'visible-region', label: { en: 'Visible Region', ja: '表示領域', 'es-419': 'Región visible', de: 'Sichtbarer Bereich', th: 'พื้นที่ที่มองเห็น', hi: 'दृश्य क्षेत्र' }, group: 'Map' },
   { id: 'camera-sync', label: { en: 'Camera Sync', ja: 'カメラ同期', 'es-419': 'Sincronización de cámara', de: 'Kamerasynchronisation', th: 'การซิงก์กล้อง', hi: 'कैमरा सिंक' }, group: 'Map', showProviderSelector: false },
   { id: 'marker', label: { en: 'Marker Icons', ja: 'マーカーアイコン', 'es-419': 'Iconos de marcadores', de: 'Marker-Icons', th: 'ไอคอนมาร์กเกอร์', hi: 'मार्कर आइकन' }, group: 'Marker' },
+  { id: 'marker-label-position', label: { en: 'Marker Label Position', ja: 'マーカーラベルの位置' }, group: 'Marker' },
   { id: 'marker-animation', label: { en: 'Marker Animation', ja: 'マーカーアニメーション', 'es-419': 'Animación de marcadores', de: 'Marker-Animation', th: 'แอนิเมชันมาร์กเกอร์', hi: 'मार्कर एनिमेशन' }, group: 'Marker' },
   { id: 'post-office', label: { en: 'Post Office', ja: '郵便局', 'es-419': 'Oficinas postales', de: 'Postfilialen', th: 'ที่ทำการไปรษณีย์', hi: 'डाकघर' }, group: 'Marker', unavailableProviders: ['google-maps-3d'] },
   { id: 'post-office-cluster', label: { en: 'Post Office Cluster', ja: '郵便局クラスタリング', 'es-419': 'Agrupación de oficinas postales', de: 'Postfilialen-Clustering', th: 'การจัดกลุ่มที่ทำการไปรษณีย์', hi: 'डाकघरों की क्लस्टरिंग' }, group: 'Marker' },