diff --git a/examples/basic/src/SingletonMaps.tsx b/examples/basic/src/SingletonMaps.tsx
index 15690da..8e3dfee 100644
--- a/examples/basic/src/SingletonMaps.tsx
+++ b/examples/basic/src/SingletonMaps.tsx
@@ -39,6 +39,10 @@ import { TomTomDesign, useTomTomViewState } from '@mapconductor/react-for-tomtom
import { MapTilerDesign, useMapTilerViewState } from '@mapconductor/react-for-maptiler';
import { LongdoDesign, useLongdoViewState } from '@mapconductor/react-for-longdo';
import { MapplsDesign, useMapplsViewState } from '@mapconductor/react-for-mappls';
+// deck.gl は読み込み時に `globalThis.deck` を取り合う（別バージョンが居ると例外）。
+// Longdo の web SDK が自前の deck.gl 8 系を積んでいるので、deck.gl の地図を出さない
+// ページでは評価しないこと。状態とデザインは deck.gl を引かない `/state` から取る。
+import { DeckGLDesign, useDeckGLMapViewState } from '@mapconductor/react-for-deckgl/state';
import type { SingletonMapContent } from './providers/singleton/types';
export type { SingletonMapContent };
@@ -60,7 +64,8 @@ export type SingletonMapId =
| 'tomtom'
| 'maptiler'
| 'longdo'
- | 'mappls';
+ | 'mappls'
+ | 'deckgl';
type AnyMapViewState = MapViewStateInterface>;
type AnyMapDesignType = MapDesignTypeInterface;
@@ -127,6 +132,7 @@ const LazyHereSingletonView = lazy(() => import('./providers/singleton/HereSingl
const LazyTomTomSingletonView = lazy(() => import('./providers/singleton/TomTomSingletonView'));
const LazyMapTilerSingletonView = lazy(() => import('./providers/singleton/MapTilerSingletonView'));
const LazyMapplsSingletonView = lazy(() => import('./providers/singleton/MapplsSingletonView'));
+const LazyDeckGLSingletonView = lazy(() => import('./providers/singleton/DeckGLSingletonView'));
const LazyLongdoSingletonView = lazy(() => import('./providers/singleton/LongdoSingletonView'));
export function SingletonMapsProvider({ children }: { children: ReactNode }) {
@@ -162,6 +168,7 @@ export function SingletonMapsProvider({ children }: { children: ReactNode }) {
const mapTilerState = useMapTilerViewState({ apiKey: mapTilerApiKey, mapDesignType: MapTilerDesign.Streets, cameraPosition: DEFAULT_CAMERA });
const longdoState = useLongdoViewState({ apiKey: longdoApiKey, mapDesignType: LongdoDesign.Normal, cameraPosition: DEFAULT_CAMERA });
const mapplsState = useMapplsViewState({ apiKey: mapplsApiKey, mapDesignType: MapplsDesign.Default, cameraPosition: DEFAULT_CAMERA });
+ const deckglState = useDeckGLMapViewState({ mapDesignType: DeckGLDesign.Standard, cameraPosition: DEFAULT_CAMERA });
const statesById = useMemo>(() => ({
'google-2d': google2DState,
@@ -181,9 +188,10 @@ export function SingletonMapsProvider({ children }: { children: ReactNode }) {
maptiler: mapTilerState,
longdo: longdoState,
mappls: mapplsState,
+ deckgl: deckglState,
}), [
google2DState, google3DState, maplibre2DState, maplibre3DState, mapboxState,
- leafletState, openLayersState, arcgis2DState, arcgis3DState, mapkitState, azuremapsState, cesiumState, hereState, tomtomState, mapTilerState, longdoState, mapplsState,
+ leafletState, openLayersState, arcgis2DState, arcgis3DState, mapkitState, azuremapsState, cesiumState, hereState, tomtomState, mapTilerState, longdoState, mapplsState, deckglState,
]);
// Capture each provider's default map design once, up front, before any page
@@ -268,6 +276,8 @@ export function SingletonMapsProvider({ children }: { children: ReactNode }) {
onCameraMoveStart={content['google-2d']?.onCameraMoveStart}
onCameraMove={content['google-2d']?.onCameraMove}
onCameraMoveEnd={content['google-2d']?.onCameraMoveEnd}
+ mapStyle={content['google-2d']?.mapStyle}
+ onStyleDiagnostics={content['google-2d']?.onStyleDiagnostics}
>
{content['google-2d'] && {content['google-2d']!.children}}
@@ -286,6 +296,8 @@ export function SingletonMapsProvider({ children }: { children: ReactNode }) {
onCameraMoveStart={content['google-3d']?.onCameraMoveStart}
onCameraMove={content['google-3d']?.onCameraMove}
onCameraMoveEnd={content['google-3d']?.onCameraMoveEnd}
+ mapStyle={content['google-3d']?.mapStyle}
+ onStyleDiagnostics={content['google-3d']?.onStyleDiagnostics}
>
{content['google-3d'] && {content['google-3d']!.children}}
@@ -351,6 +363,10 @@ export function SingletonMapsProvider({ children }: { children: ReactNode }) {
id: 'mappls',
node: ,
},
+ {
+ id: 'deckgl',
+ node: ,
+ },
];
return (
@@ -365,7 +381,7 @@ export function SingletonMapsProvider({ children }: { children: ReactNode }) {
);
}
-export function SingletonMapSlot({ id, children, onMapClick, onCameraMoveStart, onCameraMove, onCameraMoveEnd, cameraRestriction }: SingletonMapSlotProps) {
+export function SingletonMapSlot({ id, children, onMapClick, onCameraMoveStart, onCameraMove, onCameraMoveEnd, cameraRestriction, mapStyle, onStyleDiagnostics }: SingletonMapSlotProps) {
const { register, unregister } = useSingletonMapsContext();
const owner = useId();
@@ -378,6 +394,8 @@ export function SingletonMapSlot({ id, children, onMapClick, onCameraMoveStart,
onCameraMove,
onCameraMoveEnd,
cameraRestriction,
+ mapStyle,
+ onStyleDiagnostics,
});
return () => unregister(id, owner);
}, [
@@ -389,6 +407,8 @@ export function SingletonMapSlot({ id, children, onMapClick, onCameraMoveStart,
onCameraMove,
onCameraMoveEnd,
cameraRestriction,
+ mapStyle,
+ onStyleDiagnostics,
register,
unregister,
]);
diff --git a/examples/basic/src/app/AppHeader.tsx b/examples/basic/src/app/AppHeader.tsx
index ba0c5fd..0ea3fa7 100644
--- a/examples/basic/src/app/AppHeader.tsx
+++ b/examples/basic/src/app/AppHeader.tsx
@@ -18,6 +18,7 @@ const PROVIDERS: Array<{ value: MapProvider; label: string }> = [
{ value: 'maptiler', label: 'MapTiler' },
{ value: 'longdo', label: 'Longdo' },
{ value: 'mappls', label: 'Mappls' },
+ { value: 'deckgl', label: 'deck.gl' },
{ value: 'google', label: 'Google Maps' },
{ value: 'google-3d', label: 'Google Maps 3D' },
];
diff --git a/examples/basic/src/app/appRouting.tsx b/examples/basic/src/app/appRouting.tsx
index fd99b29..aec273a 100644
--- a/examples/basic/src/app/appRouting.tsx
+++ b/examples/basic/src/app/appRouting.tsx
@@ -3,13 +3,13 @@ import { SamplePageLayout } from '../components/SamplePageLayout';
import { getLanguageFromPath } from '../samples/i18n';
import { DEFAULT_SAMPLE_PAGE, isKnownSamplePage, isSupportedLanguage, resolveProviderForPage, type SupportedLanguage } from '../samples/sampleRegistry';
-export type MapProvider = 'maplibre' | 'mapbox' | 'leaflet' | 'openlayers' | 'google' | 'google-3d' | 'arcgis' | 'arcgis-3d' | 'mapkit' | 'azuremaps' | 'cesium' | 'here' | 'tomtom' | 'maptiler' | 'longdo' | 'mappls';
+export type MapProvider = 'maplibre' | 'mapbox' | 'leaflet' | 'openlayers' | 'google' | 'google-3d' | 'arcgis' | 'arcgis-3d' | 'mapkit' | 'azuremaps' | 'cesium' | 'here' | 'tomtom' | 'maptiler' | 'longdo' | 'mappls' | 'deckgl';
const providerByPath = new Map([
['maplibre', 'maplibre'], ['maplibre-3d', 'maplibre'], ['mapbox', 'mapbox'],
['leaflet', 'leaflet'], ['openlayers', 'openlayers'], ['google-maps', 'google'],
['google', 'google'], ['google-maps-3d', 'google-3d'], ['google-3d', 'google-3d'],
- ['arcgis', 'arcgis'], ['arcgis-3d', 'arcgis-3d'], ['mapkit', 'mapkit'], ['azuremaps', 'azuremaps'], ['cesium', 'cesium'], ['here', 'here'], ['tomtom', 'tomtom'], ['maptiler', 'maptiler'], ['longdo', 'longdo'], ['mappls', 'mappls'],
+ ['arcgis', 'arcgis'], ['arcgis-3d', 'arcgis-3d'], ['mapkit', 'mapkit'], ['azuremaps', 'azuremaps'], ['cesium', 'cesium'], ['here', 'here'], ['tomtom', 'tomtom'], ['maptiler', 'maptiler'], ['longdo', 'longdo'], ['mappls', 'mappls'], ['deckgl', 'deckgl'],
]);
export function parseSamplePath(pathname: string) {
@@ -28,7 +28,7 @@ export function providerPath(provider: MapProvider, page: string): string {
maplibre: resolveProviderForPage('maplibre', page),
mapbox: 'mapbox', leaflet: 'leaflet', openlayers: 'openlayers',
google: 'google-maps', 'google-3d': 'google-maps-3d',
- arcgis: 'arcgis', 'arcgis-3d': 'arcgis-3d', mapkit: 'mapkit', azuremaps: 'azuremaps', cesium: 'cesium', here: 'here', tomtom: 'tomtom', maptiler: 'maptiler', longdo: 'longdo', mappls: 'mappls',
+ arcgis: 'arcgis', 'arcgis-3d': 'arcgis-3d', mapkit: 'mapkit', azuremaps: 'azuremaps', cesium: 'cesium', here: 'here', tomtom: 'tomtom', maptiler: 'maptiler', longdo: 'longdo', mappls: 'mappls', deckgl: 'deckgl',
};
return paths[provider];
}
diff --git a/examples/basic/src/index.css b/examples/basic/src/index.css
index c309657..59e0bf9 100644
--- a/examples/basic/src/index.css
+++ b/examples/basic/src/index.css
@@ -610,6 +610,11 @@ body,
inset: 0;
z-index: 0;
visibility: hidden;
+ /* `visibility` alone is not enough: a descendant can set its own
+ `visibility: visible` and come back -- Longdo's built-in MapLibre
+ attribution does, and stayed on screen under every other provider.
+ Opacity is not inherited, so nothing inside can undo it. */
+ opacity: 0;
pointer-events: none;
}
@@ -619,6 +624,7 @@ body,
.singleton-map-layer.active {
visibility: visible;
+ opacity: 1;
pointer-events: auto;
}
@@ -724,6 +730,17 @@ body,
margin-bottom: 4px;
}
+/* The category name doubles as its draw/skip switch, in the label row. */
+.category-visibility {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.category-visibility input {
+ width: auto;
+}
+
.checkbox-control {
display: flex;
align-items: center;
@@ -1021,3 +1038,17 @@ body,
.hello-map-notes li {
margin: 4px 0;
}
+
+/* ベクタースタイルのページが出す診断行。ルールが当たらなかった、この地図が
+ 受け取れなかった、スタイルが読めなかった — どれも「ほぼ動いた」に見えるので
+ 目立たせる。 */
+.diagnostic {
+ margin: 2px 0;
+ font-size: 11px;
+ line-height: 1.35;
+ color: #b45309;
+}
+
+.diagnostic.error {
+ color: #b91c1c;
+}
diff --git a/examples/basic/src/pages/common/showBasemap.ts b/examples/basic/src/pages/common/showBasemap.ts
new file mode 100644
index 0000000..9325217
--- /dev/null
+++ b/examples/basic/src/pages/common/showBasemap.ts
@@ -0,0 +1,65 @@
+import {
+ VectorStyleSupportKey,
+ type MapDesignTypeInterface,
+ type MapViewStateInterface,
+} from '@mapconductor/js-sdk-core';
+import { ArcGISDesign, ArcGISMapViewState } from '@mapconductor/react-for-arcgis';
+import { AzureMapsDesign, AzureMapsViewState } from '@mapconductor/react-for-azuremaps';
+import { CesiumDesign, CesiumMapViewState } from '@mapconductor/react-for-cesium';
+// Import the state-only entry point. The full deck.gl barrel installs a
+// versioned `globalThis.deck`; Mappls loads its own deck runtime and fails
+// when it finds a different version already registered on the page.
+import { DeckGLDesign, DeckGLMapViewState } from '@mapconductor/react-for-deckgl/state';
+import { GoogleMapDesign, GoogleMapViewState } from '@mapconductor/react-for-googlemaps';
+import { HereMapDesign, HereViewState } from '@mapconductor/react-for-here';
+import { LeafletDesign, LeafletMapViewState } from '@mapconductor/react-for-leaflet';
+import { LongdoDesign, LongdoViewState } from '@mapconductor/react-for-longdo';
+import { MapboxDesign, MapboxViewState } from '@mapconductor/react-for-mapbox';
+import { MapLibreDesign, MapLibreViewState } from '@mapconductor/react-for-maplibre';
+import { MapTilerDesign, MapTilerViewState } from '@mapconductor/react-for-maptiler';
+import { OpenLayersDesign, OpenLayersMapViewState } from '@mapconductor/react-for-openlayers';
+import { TomTomDesign, TomTomViewState } from '@mapconductor/react-for-tomtom';
+
+/**
+ * Blanks the backend's own basemap, or restores it.
+ *
+ * Each provider says "draw nothing" with its own design value (`None`, or
+ * Azure's `Blank`). MapKit and Mappls have none; there the opaque tiles cover
+ * the basemap, which is still fetched for nobody.
+ */
+export function showBasemap(state: MapViewStateInterface>, visible: boolean) {
+ // A map that takes the style directly gets it *as* its design from the
+ // layer; blanking first would only load one style to throw it away. Going
+ // back to the provider's own basemap is still done here.
+ if (!visible && state.serviceRegistry.has(VectorStyleSupportKey)) return;
+ if (state instanceof MapLibreViewState) {
+ state.mapDesignType = visible ? MapLibreDesign.OsmBrightJa : MapLibreDesign.None;
+ } else if (state instanceof GoogleMapViewState) {
+ // The 3D map has no "none" mode, and the same state class serves both.
+ const map = state.getMapViewHolder()?.map as { tagName?: string } | undefined;
+ if (map?.tagName === 'GMP-MAP-3D') return;
+ state.mapDesignType = visible ? GoogleMapDesign.Normal : GoogleMapDesign.None;
+ } else if (state instanceof ArcGISMapViewState) {
+ state.mapDesignType = visible ? ArcGISDesign.OsmStandard : ArcGISDesign.None;
+ } else if (state instanceof MapboxViewState) {
+ state.mapDesignType = visible ? MapboxDesign.Streets : MapboxDesign.None;
+ } else if (state instanceof MapTilerViewState) {
+ state.mapDesignType = visible ? MapTilerDesign.Streets : MapTilerDesign.None;
+ } else if (state instanceof TomTomViewState) {
+ state.mapDesignType = visible ? TomTomDesign.Standard : TomTomDesign.None;
+ } else if (state instanceof LongdoViewState) {
+ state.mapDesignType = visible ? LongdoDesign.Normal : LongdoDesign.None;
+ } else if (state instanceof HereViewState) {
+ state.mapDesignType = visible ? HereMapDesign.NormalDay : HereMapDesign.None;
+ } else if (state instanceof LeafletMapViewState) {
+ state.mapDesignType = visible ? LeafletDesign.OpenStreetMap : LeafletDesign.None;
+ } else if (state instanceof OpenLayersMapViewState) {
+ state.mapDesignType = visible ? OpenLayersDesign.OpenStreetMap : OpenLayersDesign.None;
+ } else if (state instanceof DeckGLMapViewState) {
+ state.mapDesignType = visible ? DeckGLDesign.Standard : DeckGLDesign.None;
+ } else if (state instanceof CesiumMapViewState) {
+ state.mapDesignType = visible ? CesiumDesign.Default : CesiumDesign.None;
+ } else if (state instanceof AzureMapsViewState) {
+ state.mapDesignType = visible ? AzureMapsDesign.Road : AzureMapsDesign.Blank;
+ }
+}
diff --git a/examples/basic/src/pages/heatmaplayer/HeatmapLayerPage.tsx b/examples/basic/src/pages/heatmaplayer/HeatmapLayerPage.tsx
index deca661..4b4089c 100644
--- a/examples/basic/src/pages/heatmaplayer/HeatmapLayerPage.tsx
+++ b/examples/basic/src/pages/heatmaplayer/HeatmapLayerPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactNode } from 'react';
+import { lazy, Suspense, useEffect, useState, type ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState, type MapLibreViewState } from '@mapconductor/react-for-maplibre';
@@ -9,6 +9,12 @@ import { ArcGISDesign, ArcGISMapView2D, useArcGISViewState, type ArcGISViewState
import { TomTomDesign, TomTomMapView2D, useTomTomViewState, type TomTomViewState } from '@mapconductor/react-for-tomtom';
import { MapTilerDesign, MapTilerMapView2D, useMapTilerViewState, type MapTilerViewState } from '@mapconductor/react-for-maptiler';
import { MapplsDesign, MapplsMapView2D, useMapplsViewState, type MapplsViewState } from '@mapconductor/react-for-mappls';
+// deck.gl は読み込み時に `globalThis.deck` を取り合う（別バージョンが居ると例外）。
+// このモジュールは全プロバイダのページから評価されるので、描画コンポーネントだけ遅延読み込みにする。
+import { DeckGLDesign, useDeckGLMapViewState, type DeckGLMapViewStateInterface } from '@mapconductor/react-for-deckgl/state';
+const LazyDeckGLMapView = lazy(() =>
+ import('@mapconductor/react-for-deckgl').then(m => ({ default: m.DeckGLMapView })),
+);
import { HeatmapOverlay, HeatmapPoints, HeatmapPointState } from '@mapconductor/react-heatmap';
import { ControlPanel } from '../../components/ControlPanel';
import { SingletonMapSlot, useSingletonMapState } from '../../SingletonMaps';
@@ -215,12 +221,29 @@ function MapTilerHeatmapLayerPage() {
);
}
+function DeckGLHeatmapLayerPage() {
+ const mapViewState = useDeckGLMapViewState({
+ mapDesignType: DeckGLDesign.Light,
+ cameraPosition: INIT_CAMERA_POSITION,
+ });
+ return (
+ (
+
+ {children}
+
+ )}
+ />
+ );
+}
+
export function HeatmapLayerPage() {
const location = useLocation();
if (location.pathname.startsWith('/google-maps')) return ;
if (location.pathname.startsWith('/maptiler')) return ;
if (location.pathname.startsWith('/tomtom')) return ;
if (location.pathname.startsWith('/mappls')) return ;
+ if (location.pathname.startsWith('/deckgl')) return ;
if (location.pathname.startsWith('/mapbox')) return ;
if (location.pathname.startsWith('/leaflet')) return ;
if (location.pathname.startsWith('/openlayers')) return ;
diff --git a/examples/basic/src/pages/map/camerasync/cameraSyncProviderRegistry.tsx b/examples/basic/src/pages/map/camerasync/cameraSyncProviderRegistry.tsx
index e7d493a..583b670 100644
--- a/examples/basic/src/pages/map/camerasync/cameraSyncProviderRegistry.tsx
+++ b/examples/basic/src/pages/map/camerasync/cameraSyncProviderRegistry.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { lazy, Suspense, type ReactNode } from 'react';
import type { MapCameraPosition } from '@mapconductor/js-sdk-core';
import {
GoogleMapView,
@@ -61,6 +61,14 @@ import {
MapplsMapView2D,
type MapplsViewState,
} from '@mapconductor/react-for-mappls';
+import type { DeckGLMapViewStateInterface } from '@mapconductor/react-for-deckgl/state';
+
+// deck.gl は読み込み時に `globalThis.deck` を取り合い、別バージョンが既に居ると例外を
+// 投げる。Longdo の web SDK が自前の deck.gl 8 系を積んでいるため、既定ペインの Longdo が
+// 居るだけで壊れてしまう。deck.gl のペインを選んだときだけ読み込む。
+const LazyDeckGLMapView = lazy(() =>
+ import('@mapconductor/react-for-deckgl').then(m => ({ default: m.DeckGLMapView })),
+);
interface MapViewRenderProps {
paneState: PaneState;
@@ -195,6 +203,16 @@ const adapters: CameraSyncProviderAdapter[] = [
id: 'mappls', label: 'Mappls', altitude: (_pane, position) => convertedAltitude(position, googleZoom),
render: props => renderMappls(props),
},
+ {
+ // deck.gl works in unified zoom once the driver has applied its +1 offset,
+ // so the Google-reference altitude applies unchanged (same as MapLibre).
+ id: 'deckgl', label: 'deck.gl', altitude: (_pane, position) => convertedAltitude(position, googleZoom),
+ render: ({ paneState: pane, children, ...events }) => (
+
+ {children}
+
+ ),
+ },
];
export const cameraSyncProviders: readonly CameraSyncProviderAdapter[] = adapters;
diff --git a/examples/basic/src/pages/map/camerasync/cameraSyncProviders.tsx b/examples/basic/src/pages/map/camerasync/cameraSyncProviders.tsx
index 50d8a14..f73148a 100644
--- a/examples/basic/src/pages/map/camerasync/cameraSyncProviders.tsx
+++ b/examples/basic/src/pages/map/camerasync/cameraSyncProviders.tsx
@@ -45,6 +45,7 @@ import { TomTomDesign, useTomTomViewState } from '@mapconductor/react-for-tomtom
import { MapTilerDesign, useMapTilerViewState } from '@mapconductor/react-for-maptiler';
import { LongdoDesign, useLongdoViewState } from '@mapconductor/react-for-longdo';
import { MapplsDesign, useMapplsViewState } from '@mapconductor/react-for-mappls';
+import { DeckGLDesign, useDeckGLMapViewState } from '@mapconductor/react-for-deckgl/state';
type ProviderStateMap = Record;
@@ -79,6 +80,7 @@ export function useCameraSyncProviderStates(prefix: 'left' | 'right'): ProviderS
const mapTilerState = useMapTilerViewState({ id: `camera-sync-${prefix}-maptiler`, apiKey: mapTilerApiKey, mapDesignType: prefix === 'left' ? MapTilerDesign.Streets : MapTilerDesign.StreetsLight, cameraPosition: INITIAL_CAMERA });
const longdoState = useLongdoViewState({ id: `camera-sync-${prefix}-longdo`, apiKey: longdoApiKey, mapDesignType: LongdoDesign.Normal, cameraPosition: INITIAL_CAMERA });
const mapplsState = useMapplsViewState({ id: `camera-sync-${prefix}-mappls`, apiKey: mapplsApiKey, mapDesignType: MapplsDesign.Default, cameraPosition: INITIAL_CAMERA });
+ const deckglState = useDeckGLMapViewState({ id: `camera-sync-${prefix}-deckgl`, mapDesignType: DeckGLDesign.Standard, cameraPosition: INITIAL_CAMERA });
return {
maplibre: paneState('maplibre', mapLibreState),
@@ -98,5 +100,6 @@ export function useCameraSyncProviderStates(prefix: 'left' | 'right'): ProviderS
maptiler: paneState('maptiler', mapTilerState),
longdo: paneState('longdo', longdoState),
mappls: paneState('mappls', mapplsState),
+ deckgl: paneState('deckgl', deckglState),
};
}
diff --git a/examples/basic/src/pages/map/camerasync/types.ts b/examples/basic/src/pages/map/camerasync/types.ts
index e11c4af..c6f2755 100644
--- a/examples/basic/src/pages/map/camerasync/types.ts
+++ b/examples/basic/src/pages/map/camerasync/types.ts
@@ -24,7 +24,8 @@ export type PaneProvider =
| 'tomtom'
| 'maptiler'
| 'longdo'
- | 'mappls';
+ | 'mappls'
+ | 'deckgl';
export interface CameraLocationInfo {
name: string;
diff --git a/examples/basic/src/pages/map/design/MapDesignPage.tsx b/examples/basic/src/pages/map/design/MapDesignPage.tsx
index 4698c76..6bd8098 100644
--- a/examples/basic/src/pages/map/design/MapDesignPage.tsx
+++ b/examples/basic/src/pages/map/design/MapDesignPage.tsx
@@ -31,6 +31,7 @@ const DESIGN_OPTIONS_LOADERS: Record Promise> =
tomtom: () => import('../../../providers/designOptions/tomtomDesignOptions').then(m => m.TOMTOM_DESIGNS),
longdo: () => import('../../../providers/designOptions/longdoDesignOptions').then(m => m.LONGDO_DESIGNS),
mappls: () => import('../../../providers/designOptions/mapplsDesignOptions').then(m => m.MAPPLS_DESIGNS),
+ deckgl: () => import('../../../providers/designOptions/deckglDesignOptions').then(m => m.DECKGL_DESIGNS),
};
export function MapDesignPage() {
diff --git a/examples/basic/src/pages/marker/postoffice/PostOfficeMapProvider.tsx b/examples/basic/src/pages/marker/postoffice/PostOfficeMapProvider.tsx
index f3f1c85..cc42ded 100644
--- a/examples/basic/src/pages/marker/postoffice/PostOfficeMapProvider.tsx
+++ b/examples/basic/src/pages/marker/postoffice/PostOfficeMapProvider.tsx
@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { lazy, Suspense, useMemo, type ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import {
type MapCameraPosition,
@@ -22,6 +22,13 @@ import { MapTilerDesign, MapTilerMapView2D, useMapTilerViewState } from '@mapcon
import '@mapconductor/react-for-maptiler/style.css';
import { LongdoDesign, LongdoMapView2D, useLongdoViewState } from '@mapconductor/react-for-longdo';
import { MapplsDesign, MapplsMapView2D, useMapplsViewState } from '@mapconductor/react-for-mappls';
+// deck.gl は読み込み時に `globalThis.deck` を取り合う（別バージョンが居ると例外）。
+// このモジュールは全プロバイダのページから評価されるので、Longdo など自前の deck.gl を
+// 積んだ SDK のページを壊さないよう、描画コンポーネントだけ遅延読み込みにする。
+import { DeckGLDesign, useDeckGLMapViewState } from '@mapconductor/react-for-deckgl/state';
+const LazyDeckGLMapView = lazy(() =>
+ import('@mapconductor/react-for-deckgl').then(m => ({ default: m.DeckGLMapView })),
+);
import { SingletonMapSlot, useSingletonMapState } from '../../../SingletonMaps';
export type PostOfficeMapState = MapViewStateInterface>;
@@ -261,12 +268,25 @@ function MapplsProvider({ cameraPosition, markerTilingOptions, children }: PostO
});
}
+function DeckGLProviderView({ cameraPosition, markerTilingOptions, children }: PostOfficeMapProviderProps) {
+ const state = useDeckGLMapViewState({ mapDesignType: DeckGLDesign.Standard, cameraPosition });
+ return children({
+ mapViewState: state,
+ renderMapView: (content, onMapClick) => (
+
+ {content}
+
+ ),
+ });
+}
+
export function PostOfficeMapProvider(props: PostOfficeMapProviderProps) {
const pathname = useLocation().pathname;
if (pathname.startsWith('/google-maps')) return ;
if (pathname.startsWith('/maptiler')) return ;
if (pathname.startsWith('/longdo')) return ;
if (pathname.startsWith('/mappls')) return ;
+ if (pathname.startsWith('/deckgl')) return ;
if (pathname.startsWith('/tomtom')) return ;
if (pathname.startsWith('/mapbox')) return ;
if (pathname.startsWith('/leaflet')) return ;
diff --git a/examples/basic/src/pages/marker/streettree/StreetTreeInfoBubble.tsx b/examples/basic/src/pages/marker/streettree/StreetTreeInfoBubble.tsx
new file mode 100644
index 0000000..2afe28c
--- /dev/null
+++ b/examples/basic/src/pages/marker/streettree/StreetTreeInfoBubble.tsx
@@ -0,0 +1,23 @@
+import type { MarkerState } from '@mapconductor/js-sdk-core';
+import { InfoBubble } from '@mapconductor/js-sdk-react';
+import type { StreetTree } from './streetTreeData';
+
+export function StreetTreeInfoBubble({ marker }: { marker: MarkerState }) {
+ const tree = marker.extra as unknown as StreetTree;
+ if (!tree) return null;
+ return (
+
+
+ {tree.species}
+
+
+
樹高
{tree.heightM.toFixed(1)} m
+
幹周
{tree.girthCm} cm
+
行政区
{tree.ward}
+
路線
{tree.roadName}
+
+
+
+
+ );
+}
diff --git a/examples/basic/src/pages/marker/streettree/StreetTreePage.tsx b/examples/basic/src/pages/marker/streettree/StreetTreePage.tsx
new file mode 100644
index 0000000..b9b5ecf
--- /dev/null
+++ b/examples/basic/src/pages/marker/streettree/StreetTreePage.tsx
@@ -0,0 +1,109 @@
+import { useCallback, useState } from 'react';
+import {
+ MarkerTilingOptions,
+ type MapDesignTypeInterface,
+ type MapViewStateInterface,
+ type MarkerState,
+} from '@mapconductor/js-sdk-core';
+import { Markers } from '@mapconductor/js-sdk-react';
+import { MapLibreDesign } from '@mapconductor/react-for-maplibre';
+import { MapViewContainer } from '../../../MapViewContainer';
+import { ControlPanel } from '../../../components/ControlPanel';
+import { useSampleI18n } from '../../../samples/i18n';
+import { StreetTreeInfoBubble } from './StreetTreeInfoBubble';
+import { browserStreetTreeDataSource } from './streetTreeData';
+import { useStreetTreeMarkers } from './useStreetTreeMarkers';
+
+const INIT_CAMERA = { lat: 35.6812, lng: 139.7671, zoom: 11 };
+
+const MARKER_TILING_OPTIONS: MarkerTilingOptions = {
+ ...MarkerTilingOptions.Default,
+ // Trees are planted a few metres apart along a road, so below street level
+ // most of them sit on top of one another. Thinning them to one per icon
+ // width halves the tile bytes and shows the same map.
+ declutterPx: 14,
+ iconScaleCallback: (_state, zoom) =>
+ zoom > 15 ? 1.4 : zoom > 13 ? 1.0 : zoom > 11 ? 0.7 : 0.5,
+};
+
+export function StreetTreePage() {
+ const { t } = useSampleI18n();
+ const [selected, setSelected] = useState(null);
+ const selectMarker = useCallback((marker: MarkerState) => setSelected(marker), []);
+ const { error, markerStates, trees, species, isLoading } =
+ useStreetTreeMarkers(browserStreetTreeDataSource, selectMarker);
+
+ /**
+ * Swaps in a basemap stripped down to what a tree map needs: land, water,
+ * the major roads and the place names, with the finer streets appearing from
+ * zoom 13. The default style draws 51 transportation line layers, and at this
+ * density they compete with the trees for every pixel.
+ *
+ * MapLibre only, by construction: the design type is provider-specific, and
+ * this one carries a style URL. On any other provider the page runs on
+ * whatever that provider's default is.
+ */
+ const applyTreeStyle = useCallback(
+ (state: MapViewStateInterface>) => {
+ const maplibre = state as unknown as { mapDesignType?: unknown };
+ if (!('mapDesignType' in maplibre)) return;
+ const design = state.mapDesignType as { styleJsonURL?: string } | undefined;
+ if (design && !('styleJsonURL' in design)) return;
+ maplibre.mapDesignType = new MapLibreDesign(
+ 'street-tree',
+ `${import.meta.env.BASE_URL}streettree/street-tree-style.json`,
+ );
+ },
+ [],
+ );
+
+ if (error) {
+ return (
+
+ {isLoading
+ ? t({
+ en: 'Loading…',
+ ja: '読み込み中…',
+ 'es-419': 'Cargando…',
+ de: 'Wird geladen…',
+ th: 'กำลังโหลด…',
+ hi: 'लोड हो रहा है…',
+ })
+ : t({
+ en: `${trees?.length ?? 0} trees, ${species?.length ?? 0} species, one colour each. Tap a tree for its record.`,
+ ja: `${trees?.length ?? 0} 本・${species?.length ?? 0} 種、樹種ごとに色分け。タップで詳細が出ます。`,
+ 'es-419': `${trees?.length ?? 0} árboles, ${species?.length ?? 0} especies, un color cada una. Toca un árbol para ver su registro.`,
+ de: `${trees?.length ?? 0} Bäume, ${species?.length ?? 0} Arten, je eine Farbe. Für Details antippen.`,
+ th: `${trees?.length ?? 0} ต้น ${species?.length ?? 0} ชนิด สีละชนิด แตะเพื่อดูรายละเอียด`,
+ hi: `${trees?.length ?? 0} पेड़, ${species?.length ?? 0} प्रजातियाँ, हर एक का एक रंग। विवरण के लिए टैप करें।`,
+ })}
+
+
+
+ );
+}
diff --git a/examples/basic/src/pages/marker/streettree/streetTreeData.ts b/examples/basic/src/pages/marker/streettree/streetTreeData.ts
new file mode 100644
index 0000000..eaab1ca
--- /dev/null
+++ b/examples/basic/src/pages/marker/streettree/streetTreeData.ts
@@ -0,0 +1,113 @@
+/**
+ * Tokyo's street trees: 144,183 of them, from the metropolitan government's
+ * open data.
+ *
+ * A harder shape than the post office set. There are six times as many, they
+ * sit inside one metropolitan area rather than spread over a country, and each
+ * species draws its own colour — so the renderer cannot collapse two trees of
+ * different species that land on the same pixel.
+ *
+ * Species with fewer than a hundred trees are folded into one bucket. The
+ * distribution has a long tail: a hundred species cover 96% of the trees, and
+ * the remaining three hundred would be indistinguishable colours nobody could
+ * read off a legend. The bucket is still the fifth largest group, so it is not
+ * a rounding error being hidden.
+ */
+export interface StreetTree {
+ // MarkerState.extra is Serializable, which wants an index signature: the SDK
+ // carries this across the marker abstraction without knowing what it is.
+ [key: string]: unknown;
+ latitude: number;
+ longitude: number;
+ species: string;
+ speciesIndex: number;
+ /** Height in metres, as recorded in the survey. */
+ heightM: number;
+ /** Trunk circumference in centimetres. */
+ girthCm: number;
+ ward: string;
+ roadName: string;
+}
+
+export interface StreetTreeData {
+ trees: StreetTree[];
+ /** The species table the icon colours are indexed by. */
+ species: string[];
+}
+
+/** Magic, then a version byte the reader checks by length rather than value. */
+const MAGIC = 'TREE';
+const HEADER_BYTES = 5;
+
+/** lat, lon, species, height, girth, ward, road. */
+const RECORD_BYTES = 20;
+
+/**
+ * Reads the packed asset: the magic, three string tables, then one fixed
+ * record per tree, all little-endian.
+ *
+ * The source is a 12 MB Shift-JIS CSV. Parsing that in the browser would
+ * measure CSV parsing rather than the map, and the packed form is 2.8 MB.
+ * android-sdk and ios-sdk read the same bytes.
+ */
+export function decodeStreetTrees(buffer: ArrayBuffer): StreetTreeData {
+ const view = new DataView(buffer);
+ const bytes = new Uint8Array(buffer);
+ const utf8 = new TextDecoder();
+ let at = HEADER_BYTES;
+
+ const magic = utf8.decode(bytes.subarray(0, MAGIC.length));
+ if (magic !== MAGIC) throw new Error('unexpected street tree asset format');
+
+ const table = (): string[] => {
+ const count = view.getUint32(at, true);
+ at += 4;
+ const names: string[] = new Array(count);
+ for (let index = 0; index < count; index++) {
+ const length = view.getUint16(at, true);
+ at += 2;
+ names[index] = utf8.decode(bytes.subarray(at, at + length));
+ at += length;
+ }
+ return names;
+ };
+
+ const species = table();
+ const wards = table();
+ const roads = table();
+
+ const count = view.getUint32(at, true);
+ at += 4;
+ const trees: StreetTree[] = new Array(count);
+ for (let index = 0; index < count; index++) {
+ const speciesIndex = view.getUint16(at + 8, true);
+ trees[index] = {
+ latitude: view.getFloat32(at, true),
+ longitude: view.getFloat32(at + 4, true),
+ speciesIndex,
+ species: species[speciesIndex],
+ heightM: view.getFloat32(at + 10, true),
+ girthCm: view.getUint16(at + 14, true),
+ ward: wards[view.getUint16(at + 16, true)],
+ roadName: roads[view.getUint16(at + 18, true)],
+ };
+ at += RECORD_BYTES;
+ }
+ return { trees, species };
+}
+
+export interface StreetTreeDataSource {
+ load(): Promise;
+}
+
+export function createStreetTreeDataSource(baseUrl: string): StreetTreeDataSource {
+ return {
+ async load() {
+ const response = await fetch(`${baseUrl}streettree/tokyo-trees.bin`);
+ if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ return decodeStreetTrees(await response.arrayBuffer());
+ },
+ };
+}
+
+export const browserStreetTreeDataSource = createStreetTreeDataSource(import.meta.env.BASE_URL);
diff --git a/examples/basic/src/pages/marker/streettree/treeIcons.ts b/examples/basic/src/pages/marker/streettree/treeIcons.ts
new file mode 100644
index 0000000..5b3dc7e
--- /dev/null
+++ b/examples/basic/src/pages/marker/streettree/treeIcons.ts
@@ -0,0 +1,69 @@
+import { ImageIcon } from '@mapconductor/js-sdk-core';
+
+/**
+ * One coloured dot per species, shared by every tree of that species.
+ *
+ * Baked once into a canvas. Building an icon per marker would measure icon
+ * generation rather than drawing, and there are 144,183 markers against a
+ * hundred or so species.
+ */
+/**
+ * `sizeCssPx` は **CSS ピクセル**。タイルは 256px の canvas に描かれて 256 CSS px
+ * として表示されるので、ここは devicePixelRatio を掛けない -- 掛けると画面が
+ * 精細なほど大きくなってしまう。
+ *
+ * ios-sdk はポイント、android-sdk は dp で同じ 10 を使う。android は一時期ここだけ
+ * 生ピクセルで作っていて、端末が精細なほど小さく見えていた。
+ */
+export function createSpeciesIcons(count: number, sizeCssPx = 10): ImageIcon[] {
+ return Array.from({ length: count }, (_unused, index) => {
+ const canvas = document.createElement('canvas');
+ canvas.width = sizeCssPx;
+ canvas.height = sizeCssPx;
+ const context = canvas.getContext('2d');
+ if (context) {
+ const radius = sizeCssPx / 2 - 1;
+ context.beginPath();
+ context.arc(sizeCssPx / 2, sizeCssPx / 2, radius, 0, Math.PI * 2);
+ context.fillStyle = speciesColour(index, count);
+ context.fill();
+ context.strokeStyle = 'rgba(0, 0, 0, 0.43)';
+ context.lineWidth = 1;
+ context.stroke();
+ }
+ return new ImageIcon(canvas, {
+ iconSize: sizeCssPx,
+ anchor: { x: 0.5, y: 0.5 },
+ infoAnchor: { x: 0.5, y: 0 },
+ });
+ });
+}
+
+/**
+ * Golden-angle hue rotation, so neighbouring species indices do not come out
+ * as neighbouring colours. The last entry is the "other" bucket, which reads
+ * as grey rather than competing with a named species for a hue.
+ *
+ * Matches android-sdk's StreetTreeIcons and ios-sdk's StreetTreeIcons, so a
+ * species is the same colour on all three.
+ */
+function speciesColour(index: number, count: number): string {
+ if (index === count - 1) return 'rgb(150, 150, 155)';
+ return hsvToCss((index * 137.508) % 360, 0.7, 0.8);
+}
+
+function hsvToCss(hue: number, saturation: number, value: number): string {
+ const sector = hue / 60;
+ const chroma = value * saturation;
+ const second = chroma * (1 - Math.abs((sector % 2) - 1));
+ const [r, g, b] =
+ sector < 1 ? [chroma, second, 0]
+ : sector < 2 ? [second, chroma, 0]
+ : sector < 3 ? [0, chroma, second]
+ : sector < 4 ? [0, second, chroma]
+ : sector < 5 ? [second, 0, chroma]
+ : [chroma, 0, second];
+ const base = value - chroma;
+ const byte = (channel: number) => Math.round((channel + base) * 255);
+ return `rgb(${byte(r)}, ${byte(g)}, ${byte(b)})`;
+}
diff --git a/examples/basic/src/pages/marker/streettree/useStreetTreeMarkers.ts b/examples/basic/src/pages/marker/streettree/useStreetTreeMarkers.ts
new file mode 100644
index 0000000..d8e7a9a
--- /dev/null
+++ b/examples/basic/src/pages/marker/streettree/useStreetTreeMarkers.ts
@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+ createGeoPoint,
+ createMarkerState,
+ type ImageIcon,
+ type MarkerState,
+} from '@mapconductor/js-sdk-core';
+import { createSpeciesIcons } from './treeIcons';
+import type { StreetTree, StreetTreeDataSource } from './streetTreeData';
+
+interface StreetTreeMarkerResult {
+ error: string | null;
+ markerStates: MarkerState[];
+ trees: StreetTree[] | null;
+ species: string[] | null;
+ isLoading: boolean;
+}
+
+export function useStreetTreeMarkers(
+ dataSource: StreetTreeDataSource,
+ onMarkerClick: (marker: MarkerState) => void,
+): StreetTreeMarkerResult {
+ const [trees, setTrees] = useState(null);
+ const [species, setSpecies] = useState(null);
+ const [icons, setIcons] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let active = true;
+ dataSource.load().then(data => {
+ if (!active) return;
+ setTrees(data.trees);
+ setSpecies(data.species);
+ setIcons(createSpeciesIcons(data.species.length));
+ }).catch(reason => {
+ if (active) setError(String(reason));
+ });
+ return () => { active = false; };
+ }, [dataSource]);
+
+ const markerStates = useMemo(
+ () => (trees ?? []).map((tree, index) =>
+ createMarkerState({
+ id: String(index),
+ position: createGeoPoint({ latitude: tree.latitude, longitude: tree.longitude }),
+ extra: tree,
+ icon: icons?.[tree.speciesIndex] ?? null,
+ onClick: onMarkerClick,
+ })),
+ [icons, onMarkerClick, trees],
+ );
+
+ return { error, markerStates, trees, species, isLoading: trees === null && error === null };
+}
diff --git a/examples/basic/src/pages/vectorstyle/StyleAdjustmentsPage.tsx b/examples/basic/src/pages/vectorstyle/StyleAdjustmentsPage.tsx
new file mode 100644
index 0000000..a1edfe8
--- /dev/null
+++ b/examples/basic/src/pages/vectorstyle/StyleAdjustmentsPage.tsx
@@ -0,0 +1,226 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { MapDesignTypeInterface, MapViewStateInterface } from '@mapconductor/js-sdk-core';
+import { buildStyleRules, createVectorStyle, LayerRole, NO_STYLE_RULES } from '@mapconductor/react-vectorstyle';
+import { VectorTileRasteriser } from '@mapconductor/react-vectortile';
+import { ControlPanel, SliderControl } from '../../components/ControlPanel';
+import { MapViewContainer } from '../../MapViewContainer';
+import { useSampleI18n } from '../../samples/i18n';
+import { showBasemap } from '../common/showBasemap';
+
+const INIT_CAMERA = { lat: 35.6812, lng: 139.7671, zoom: 12 };
+
+/**
+ * OpenStreetMap in the Shortbread schema: layers name a standard source
+ * layer, so a rule can say "roads" without knowing this style's layer ids.
+ * The same document the android and iOS samples adjust.
+ */
+const STYLE_URL = 'https://tiles.versatiles.org/assets/styles/colorful/style.json';
+
+type Preset = 'roads' | 'night' | 'water' | 'asAuthored';
+
+const PRESETS: readonly Preset[] = ['roads', 'night', 'water', 'asAuthored'];
+
+const grey = (level: number) => {
+ const channel = Math.round(Math.max(0, Math.min(1, level)) * 255);
+ return `rgb(${channel},${channel},${channel})`;
+};
+
+/** android の `StylePreset` / iOS の `StylePreset` と同じ 4 つ。 */
+function rulesFor(preset: Preset, roadLightness: number) {
+ const road = grey(roadLightness);
+ switch (preset) {
+ case 'asAuthored':
+ return NO_STYLE_RULES;
+ case 'roads':
+ return buildStyleRules((rules) => {
+ rules.all({ color: '#000000' });
+ rules.role(LayerRole.label, { visible: false });
+ rules.role(LayerRole.roadCasing, { color: grey(0.19) });
+ rules.role(LayerRole.road, { color: road, widthScale: 1.4 });
+ });
+ case 'night':
+ return buildStyleRules((rules) => {
+ rules.all({ colorFilter: { darken: 0.55 } });
+ rules.role(LayerRole.road, { color: road });
+ rules.role(LayerRole.water, { color: 'rgb(10,28,43)' });
+ });
+ case 'water':
+ return buildStyleRules((rules) => {
+ rules.all({ visible: false });
+ rules.role(LayerRole.background, { visible: true, color: grey(0.95) });
+ rules.role(LayerRole.water, { visible: true, color: 'rgb(46,112,184)' });
+ });
+ }
+}
+
+/**
+ * The same adjustments on every backend, through whichever road that backend
+ * can take.
+ *
+ * MapLibre, Mapbox and MapTiler read the style themselves: they are handed
+ * the author's document and then the *differences* each rule change makes,
+ * so moving the slider sets a few hundred paint properties and the map never
+ * reloads a tile. Every other provider here has no vector renderer, and on
+ * the web there is no rasteriser to draw the style into tiles for them yet —
+ * they say so in the diagnostics rather than showing a map that quietly
+ * ignored the rules. android and iOS have one, which is why the same page
+ * there works everywhere.
+ */
+export function StyleAdjustmentsPage() {
+ const { t } = useSampleI18n();
+ // Held, not rebuilt: `createVectorStyle` compares a rasteriser by
+ // identity, so a new one each render would look like a different style
+ // and tear the map down on every frame. `@State` on iOS, `remember` on
+ // android, `useMemo` here.
+ const rasteriser = useMemo(() => new VectorTileRasteriser(), []);
+ const [preset, setPreset] = useState('roads');
+ const [roadLightness, setRoadLightness] = useState(1);
+ const [fromCurrentDesign, setFromCurrentDesign] = useState(false);
+ const [styleJson, setStyleJson] = useState(null);
+ const [failure, setFailure] = useState(null);
+ const [diagnostics, setDiagnostics] = useState([]);
+ const [mapViewState, setMapViewState] =
+ useState> | null>(null);
+ const onStateReady = useCallback(
+ (state: MapViewStateInterface>) => setMapViewState(state),
+ [],
+ );
+
+ // A style *is* the basemap, so the backend's own one comes down while
+ // one is drawn — but only where it has to. `showBasemap` leaves the
+ // three that read styles alone (they replace their own design), and
+ // while adjusting the map's own style nothing is blanked at all: there
+ // the point is the design the backend is already drawing.
+ //
+ // The page's own choice must not follow the shared map onto other pages.
+ useEffect(() => {
+ if (!mapViewState) return;
+ showBasemap(mapViewState, fromCurrentDesign);
+ return () => showBasemap(mapViewState, true);
+ }, [mapViewState, fromCurrentDesign]);
+
+ useEffect(() => {
+ let cancelled = false;
+ fetch(STYLE_URL)
+ .then((response) => response.text())
+ .then((text) => {
+ if (!cancelled) setStyleJson(text);
+ })
+ .catch((error: unknown) => {
+ if (!cancelled) setFailure(String(error));
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ // A new object on every slider frame, by design: what decides whether the
+ // map reloads is the style's *key*, not its identity. Same rules, same
+ // key, and the installed style takes the difference in place.
+ const style = useMemo(() => {
+ if (!fromCurrentDesign && !styleJson) return null;
+ return createVectorStyle({
+ document: fromCurrentDesign ? 'currentDesign' : { text: styleJson as string },
+ rules: rulesFor(preset, roadLightness),
+ rasteriser,
+ });
+ }, [fromCurrentDesign, styleJson, preset, roadLightness, rasteriser]);
+
+ return (
+
+
+
+ {PRESETS.map((id) => (
+
+ ))}
+
+
+
+
+
+
+ {/* A rule that matched nothing, an adjustment this backend
+ would not take, a style that could not be read: these all
+ look like "it nearly worked" and nothing else reports them. */}
+ {failure ?
{failure}
: null}
+ {diagnostics.map((line) => (
+
+ {line}
+
+ ))}
+
+
+ );
+}
+
+const PRESET_LABELS = {
+ roads: { en: 'Roads', ja: '道路', 'es-419': 'Vías', de: 'Straßen', th: 'ถนน', hi: 'सड़कें' },
+ night: { en: 'Night', ja: 'ナイト', 'es-419': 'Noche', de: 'Nacht', th: 'กลางคืน', hi: 'रात' },
+ water: { en: 'Water', ja: '水域', 'es-419': 'Agua', de: 'Wasser', th: 'น้ำ', hi: 'जल' },
+ asAuthored: {
+ en: 'As authored',
+ ja: '元のまま',
+ 'es-419': 'Como se creó',
+ de: 'Wie erstellt',
+ th: 'ตามต้นฉบับ',
+ hi: 'मूल रूप में',
+ },
+} as const;
diff --git a/examples/basic/src/pages/vectortile/VectorTileLayerPage.tsx b/examples/basic/src/pages/vectortile/VectorTileLayerPage.tsx
new file mode 100644
index 0000000..6dfe40f
--- /dev/null
+++ b/examples/basic/src/pages/vectortile/VectorTileLayerPage.tsx
@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { type MapDesignTypeInterface, type MapViewStateInterface } from '@mapconductor/js-sdk-core';
+import { VectorTileLayer } from '@mapconductor/react-vectortile';
+import { ControlPanel, SliderControl } from '../../components/ControlPanel';
+import { MapViewContainer } from '../../MapViewContainer';
+import { showBasemap } from '../common/showBasemap';
+import { useSampleI18n } from '../../samples/i18n';
+import type { Phrase } from '../../samples/language';
+import {
+ CATEGORY_ORDER,
+ DEFAULT_PALETTE,
+ TINTED,
+ styleRulesFor,
+ type Category,
+ type ColourCategory,
+ type Palette,
+} from './categories';
+
+const INIT_CAMERA = { lat: 35.6812, lng: 139.7671, zoom: 12 };
+
+/**
+ * OpenStreetMap data in the Shortbread schema, which is what lets the SDK give
+ * every layer a role: a layer names a standard source layer, so the water can
+ * be found without knowing this particular style's layer ids.
+ */
+const STYLE_URL = 'https://tiles.versatiles.org/assets/styles/colorful/style.json';
+
+
+const CATEGORY_LABELS: Record = {
+ water: { en: 'Water', ja: '水域', 'es-419': 'Agua', de: 'Wasser', th: 'แหล่งน้ำ', hi: 'जल' },
+ land: { en: 'Land', ja: '陸地', 'es-419': 'Terreno', de: 'Land', th: 'พื้นดิน', hi: 'भूमि' },
+ street: { en: 'Roads', ja: '道路', 'es-419': 'Carreteras', de: 'Straßen', th: 'ถนน', hi: 'सड़कें' },
+ building: { en: 'Buildings', ja: '建物', 'es-419': 'Edificios', de: 'Gebäude', th: 'อาคาร', hi: 'इमारतें' },
+ label: { en: 'Labels', ja: 'ラベル', 'es-419': 'Etiquetas', de: 'Beschriftungen', th: 'ป้ายชื่อ', hi: 'लेबल' },
+};
+
+/**
+ * Renders a MapLibre vector style as raster tiles, and repaints it live.
+ *
+ * The point of the colour pickers is not the colours. Changing them replaces
+ * the style and re-rasterises the tiles already in memory — no vector tile is
+ * fetched again, because the geometry did not change, only the paint applied to
+ * it. That is what makes this practical on backends that cannot read a vector
+ * style at all: they see an ordinary raster layer throughout.
+ */
+export function VectorTileLayerPage() {
+ const { t } = useSampleI18n();
+ const [baseStyle, setBaseStyle] = useState