Add GIS SeamlessPhoto Preview

.storybook/manager.ts

@@ -4,7 +4,7 @@ import CustomTheme from "./CustomTheme.ts";
 
 addons.setConfig({
   theme: CustomTheme,
-  navSize: 300,
+  navSize: 500,
   bottomPanelHeight: 100,
   rightPanelWidth: 100,
   enableShortcuts: true,

.vscode/settings.json

@@ -6,6 +6,7 @@
     "arcgisonline",
     "BODC",
     "clearmap",
+    "cyberjapandata",
     "DAAC",
     "GEBCO",
     "geofabrik",

public/stylejson/cyberjapandata.gsi.go.jp/xyz/seamlessphoto/style.json

@@ -0,0 +1,22 @@
+{
+  "version": 8,
+  "sources": {
+    "gsi_xyz_seamlessphoto": {
+      "type": "raster",
+      "tiles": [
+        "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.png"
+      ],
+      "tileSize": 256,
+      "attribution": "<a href=\"https://maps.gsi.go.jp/development/ichiran.html\">地理院タイル</a>, データソース：Landsat8画像（GSI,TSIC,GEO Grid/AIST）, Landsat8画像（courtesy of the U.S. Geological Survey）, 海底地形（GEBCO） / Images on 世界衛星モザイク画像 obtained from site https://lpdaac.usgs.gov/data_access maintained by the NASA Land Processes Distributed Active Archive Center (LP DAAC), USGS/Earth Resources Observation and Science (EROS) Center, Sioux Falls, South Dakota, (Year). Source of image data product."
+    }
+  },
+  "layers": [
+    {
+      "id": "gsi_xyz_seamlessphoto",
+      "source": "gsi_xyz_seamlessphoto",
+      "type": "raster",
+      "maxzoom": 15,
+      "minzoom": 5
+    }
+  ]
+}

src/App.tsx

@@ -1,8 +1,8 @@
 import './App.css'
-import { ArcGISWorldImagery } from './components/SatelliteImagery/ArcGISWorldImagery'
-import { OpenStreetMapFrHotRaster } from './components/OpenStreetMap/OpenStreetMapFrHotRaster'
-import { OpenStreetMapJpOSMBrightVector } from './components/OpenStreetMap/OpenStreetMapJpOSMBrightVector'
-import { OpenStreetMapOrgRaster } from './components/OpenStreetMap/OpenStreetMapOrgRaster'
+import { ArcGISWorldImagery } from './components/BaseMaps/SatelliteImagery/ArcGISWorldImagery'
+import { OpenStreetMapFrHotRaster } from './components/BaseMaps/OpenStreetMap/OpenStreetMapFrHotRaster'
+import { OpenStreetMapJpOSMBrightVector } from './components/BaseMaps/OpenStreetMap/OpenStreetMapJpOSMBrightVector'
+import { OpenStreetMapOrgRaster } from './components/BaseMaps/OpenStreetMap/OpenStreetMapOrgRaster'
 import { UNClearMapRaster } from './components/UNClearMapRaster'
 
 function App() {

src/components/BaseMaps/SatelliteImagery/GSISeamlessPhoto/index.stories.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { GSISeamlessPhoto } from ".";
+
+const meta = {
+  component: GSISeamlessPhoto,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof GSISeamlessPhoto>;
+
+export default meta;
+type Story = StoryObj<typeof GSISeamlessPhoto>;
+
+export const Preview: Story = {};

src/components/BaseMaps/SatelliteImagery/GSISeamlessPhoto/index.tsx

@@ -0,0 +1,19 @@
+import { Map } from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+export const GSISeamlessPhoto = () => {
+  return (
+    <Map
+      initialViewState={{
+        longitude: 0,
+        latitude: 0,
+        zoom: 4,
+      }}
+      dragPan={false}
+      scrollZoom={false}
+      hash={false}
+      style={{ width: "100%", height: "100%" }}
+      mapStyle="stylejson/cyberjapandata.gsi.go.jp/xyz/seamlessphoto/style.json"
+    />
+  );
+};