MapConductor · wf9a5m75 · Jul 6, 2026
diff --git a/.github/workflows/deploy-basic-example.yml b/.github/workflows/deploy-basic-example.yml
@@ -0,0 +1,64 @@
+name: Deploy basic example
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+        with:
+          submodules: recursive
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build basic example
+        run: pnpm --filter @mapconductor/example-basic build
+        env:
+          VITE_BASE_PATH: /${{ github.event.repository.name }}/
+          VITE_GOOGLE_MAPS_API_KEY: ${{ secrets.VITE_GOOGLE_MAPS_API_KEY }}
+
+      - name: Add SPA fallback
+        run: cp examples/basic/dist/index.html examples/basic/dist/404.html
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: examples/basic/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitmodules b/.gitmodules
@@ -19,3 +19,15 @@
 [submodule "reactnative-for-maplibre"]
 	path = reactnative-for-maplibre
 	url = ./reactnative-for-maplibre
+[submodule "react-geojson-layer"]
+	path = react-geojson-layer
+	url = ./react-geojson-layer
+[submodule "react-heatmap"]
+	path = react-heatmap
+	url = ./react-heatmap
+[submodule "react-icons"]
+	path = react-icons
+	url = ./react-icons
+[submodule "react-marker-clustering"]
+	path = react-marker-clustering
+	url = ./react-marker-clustering
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -13,7 +13,11 @@
     "@mapconductor/js-sdk-core": "workspace:*",
     "@mapconductor/react-for-googlemaps": "workspace:*",
     "@mapconductor/react-for-maplibre": "workspace:*",
+    "@mapconductor/react-icons": "workspace:*",
+    "@mapconductor/react-marker-clustering": "workspace:*",
     "@mapconductor/js-sdk-react": "workspace:*",
+    "@mapconductor/react-geojson-layer": "workspace:*",
+    "@mapconductor/react-heatmap": "workspace:*",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router-dom": "^7.18.0"

diff --git a/examples/basic/public/geojson/sample-railway.geojson b/examples/basic/public/geojson/sample-railway.geojson
@@ -0,0 +1,149 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": "yamanote-1",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [139.7744, 35.6812],
+          [139.7703, 35.6818],
+          [139.7664, 35.6830],
+          [139.7627, 35.6855],
+          [139.7599, 35.6882],
+          [139.7587, 35.6916],
+          [139.7592, 35.6950],
+          [139.7614, 35.6980],
+          [139.7649, 35.6999],
+          [139.7692, 35.7007],
+          [139.7732, 35.6998],
+          [139.7764, 35.6977],
+          [139.7785, 35.6947],
+          [139.7784, 35.6913],
+          [139.7766, 35.6882],
+          [139.7744, 35.6812]
+        ]
+      },
+      "properties": {
+        "N02_002": "普通鉄道",
+        "N02_003": "幹線鉄道",
+        "N02_004": "山手線",
+        "N02_005": "東日本旅客鉄道"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "chuo-1",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [139.7320, 35.6980],
+          [139.7420, 35.6980],
+          [139.7520, 35.6974],
+          [139.7620, 35.6967],
+          [139.7665, 35.6958],
+          [139.7744, 35.6812]
+        ]
+      },
+      "properties": {
+        "N02_002": "普通鉄道",
+        "N02_003": "幹線鉄道",
+        "N02_004": "中央線快速",
+        "N02_005": "東日本旅客鉄道"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "ginza-1",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [139.7353, 35.6673],
+          [139.7432, 35.6727],
+          [139.7516, 35.6753],
+          [139.7595, 35.6762],
+          [139.7659, 35.6773],
+          [139.7707, 35.6804],
+          [139.7744, 35.6812],
+          [139.7760, 35.6775],
+          [139.7781, 35.6742],
+          [139.7822, 35.6719]
+        ]
+      },
+      "properties": {
+        "N02_002": "普通鉄道",
+        "N02_003": "地下鉄",
+        "N02_004": "銀座線",
+        "N02_005": "東京地下鉄"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "sobu-1",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [139.7744, 35.6812],
+          [139.7817, 35.6856],
+          [139.7891, 35.6892],
+          [139.7972, 35.6909],
+          [139.8063, 35.6934],
+          [139.8133, 35.6979]
+        ]
+      },
+      "properties": {
+        "N02_002": "普通鉄道",
+        "N02_003": "幹線鉄道",
+        "N02_004": "総武線",
+        "N02_005": "東日本旅客鉄道"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "keihin-1",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [139.7744, 35.6812],
+          [139.7712, 35.6770],
+          [139.7687, 35.6726],
+          [139.7668, 35.6682],
+          [139.7649, 35.6621],
+          [139.7635, 35.6560]
+        ]
+      },
+      "properties": {
+        "N02_002": "普通鉄道",
+        "N02_003": "幹線鉄道",
+        "N02_004": "京浜東北線",
+        "N02_005": "東日本旅客鉄道"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "hibiya-1",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [139.7150, 35.6450],
+          [139.7243, 35.6511],
+          [139.7327, 35.6572],
+          [139.7411, 35.6634],
+          [139.7500, 35.6697],
+          [139.7600, 35.6750],
+          [139.7687, 35.6795],
+          [139.7744, 35.6812],
+          [139.7800, 35.6844],
+          [139.7851, 35.6876]
+        ]
+      },
+      "properties": {
+        "N02_002": "普通鉄道",
+        "N02_003": "地下鉄",
+        "N02_004": "日比谷線",
+        "N02_005": "東京地下鉄"
+      }
+    }
+  ]
+}
diff --git a/examples/basic/public/postoffice/cluster_red.png b/examples/basic/public/postoffice/cluster_red.png
diff --git a/examples/basic/public/postoffice/postoffice.webp b/examples/basic/public/postoffice/postoffice.webp
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
@@ -3,7 +3,7 @@ import { Routes, Route, Navigate, useNavigate, useLocation, useParams } from 're
 import { PageNav } from './components/PageNav';
 import { CirclePage } from './pages/CirclePage';
 import { MapPage } from './pages/map/basic/StoreMapPage';
-import { MarkerPage } from './pages/MarkerPage';
+import { MarkerIconsPage } from './pages/marker/icons/MarkerIconsPage';
 import { PolygonPage } from './pages/PolygonPage';
 import { PolylinePage } from './pages/PolylinePage';
 import { GroundImagePage } from './pages/groundimage/GroundImagePage';
@@ -15,25 +15,49 @@ import { MapDesignPage } from './pages/map/design/MapDesignPage';
 import { FlyToPage } from './pages/map/flyto/FlyToPage';
 import { TiltPage } from './pages/map/tilt/TiltPage';
 import { VisibleRegionPage } from './pages/map/visibleregion/VisibleRegionPage';
+import { CameraSyncPage } from './pages/map/camerasync/CameraSyncPage';
 import { MarkerAnimationPage } from './pages/marker/animation/MarkerAnimationPage';
 import { PostOfficePage } from './pages/marker/postoffice/PostOfficePage';
+import { PostOfficeClusterPage } from './pages/marker/postofficecluster/PostOfficeClusterPage';
 import { PolygonClickPage } from './pages/polygon/click/PolygonClickPage';
 import { PolygonGeodesicPage } from './pages/polygon/geodesic/PolygonGeodesicPage';
 import { PolygonHolePage } from './pages/polygon/hole/PolygonHolePage';
 import { PolylineClickPage } from './pages/polyline/click/PolylineClickPage';
 import { RasterLayerPage } from './pages/rasterlayer/RasterLayerPage';
-import { UnsupportedSamplePage } from './pages/unsupported/UnsupportedSamplePage';
-import { DEFAULT_SAMPLE_PAGE, SAMPLE_PAGES, isKnownSamplePage } from './sampleRegistry';
+import { HeatmapLayerPage } from './pages/heatmaplayer/HeatmapLayerPage';
+import { BasicGeoJSONPage } from './pages/geojson/basic/BasicGeoJSONPage';
+import { GeoJSONLayerPage } from './pages/geojson/layer/GeoJSONLayerPage';
+import { DEFAULT_SAMPLE_PAGE, getSamplePageDefinition, isKnownSamplePage } from './sampleRegistry';
 
 type MapProvider = 'maplibre' | 'google' | 'google-3d';
 
+function providerRouteId(provider: string | undefined): string {
+  return provider ?? '';
+}
+
+function isPageUnavailableOnProvider(page: string | undefined, provider: string | undefined): boolean {
+  const definition = getSamplePageDefinition(page);
+  return definition?.unavailableProviders?.includes(providerRouteId(provider)) ?? false;
+}
+
+function ProviderUnavailableOverlay() {
+  return (
+    <div className="provider-unavailable-overlay" role="status" aria-live="polite">
+      <div className="provider-unavailable-box">
+        This feature is not available on this provider
+      </div>
+    </div>
+  );
+}
+
 function pageContent(page: string | undefined) {
   switch (page) {
     case 'map-design': return <MapDesignPage />;
     case 'fly-to': return <FlyToPage />;
     case 'tilt': return <TiltPage />;
     case 'visible-region': return <VisibleRegionPage />;
-    case 'marker': return <MarkerPage />;
+    case 'camera-sync': return <CameraSyncPage />;
+    case 'marker': return <MarkerIconsPage />;
     case 'marker-animation': return <MarkerAnimationPage />;
     case 'post-office': return <PostOfficePage />;
     case 'circle': return <CirclePage />;
@@ -49,12 +73,10 @@ function pageContent(page: string | undefined) {
     case 'info-bubble-styled': return <StyledInfoBubblePage />;
     case 'info-bubble-multiple': return <MultipleBubblesPage />;
     case 'info-bubble-rich': return <RichContentBubblePage />;
-    case 'post-office-cluster':
-    case 'geojson-basic':
-    case 'geojson-layer':
-    case 'heatmap-layer':
-    case 'camera-sync':
-      return <UnsupportedSamplePage title={SAMPLE_PAGES.find(item => item.id === page)?.label ?? 'Unsupported'} />;
+    case 'post-office-cluster': return <PostOfficeClusterPage />;
+    case 'heatmap-layer': return <HeatmapLayerPage />;
+    case 'geojson-basic': return <BasicGeoJSONPage />;
+    case 'geojson-layer': return <GeoJSONLayerPage />;
     default: return <MapPage />;
   }
 }
@@ -68,7 +90,14 @@ function ProviderPageRoute() {
     return <Navigate to={`/maplibre/${DEFAULT_SAMPLE_PAGE}`} replace />;
   }
 
-  return pageContent(page);
+  const isUnavailable = isPageUnavailableOnProvider(requestedPage, provider);
+
+  return (
+    <>
+      {isUnavailable ? <MapPage /> : pageContent(page)}
+      {isUnavailable && <ProviderUnavailableOverlay />}
+    </>
+  );
 }
 
 function App() {
@@ -81,6 +110,8 @@ function App() {
     location.pathname.startsWith('/google-maps-3d') ? 'google-3d' :
     location.pathname.startsWith('/google-maps') ? 'google' :
     null;
+  const currentPage = location.pathname.split('/').filter(Boolean)[1] || DEFAULT_SAMPLE_PAGE;
+  const showProviderSelector = getSamplePageDefinition(currentPage)?.showProviderSelector ?? true;
 
   const switchProvider = (provider: MapProvider) => {
     const pathParts = location.pathname.split('/').filter(Boolean);
@@ -111,17 +142,19 @@ function App() {
             <span />
             <span />
           </button>
-          <label className="provider-control">
-            <span>Provider</span>
-            <select
-              value={currentProvider ?? 'maplibre'}
-              onChange={event => switchProvider(event.target.value as MapProvider)}
-            >
-              <option value="maplibre">MapLibre</option>
-              <option value="google">Google Maps</option>
-              <option value="google-3d">Google Maps 3D</option>
-            </select>
-          </label>
+          {showProviderSelector && (
+            <label className="provider-control">
+              <span>Provider</span>
+              <select
+                value={currentProvider ?? 'maplibre'}
+                onChange={event => switchProvider(event.target.value as MapProvider)}
+              >
+                <option value="maplibre">MapLibre</option>
+                <option value="google">Google Maps</option>
+                <option value="google-3d">Google Maps 3D</option>
+              </select>
+            </label>
+          )}
         </div>
       </header>