Add OpenStreetMapJpOSMBrightVector to GitHub Pages

UNopenGIS · Jun 16, 2024 · be7f53c · be7f53c
1 parent 6b7bbf8
commit be7f53c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import './App.css'
 import { ArcGISWorldImagery } from './components/ArcGISWorldImagery'
 import { OpenStreetMapFrHotRaster } from './components/OpenStreetMapFrHotRaster'
+import { OpenStreetMapJpOSMBrightVector } from './components/OpenStreetMapJpOSMBrightVector'
 import { OpenStreetMapOrgRaster } from './components/OpenStreetMapOrgRaster'
 import { UNClearMapRaster } from './components/UNClearMapRaster'
 
@@ -17,6 +18,7 @@ function App() {
         <UNClearMapRaster />
         <OpenStreetMapOrgRaster />
         <OpenStreetMapFrHotRaster />
+        <OpenStreetMapJpOSMBrightVector />
         <ArcGISWorldImagery />
       </div>
     </div>

diff --git a/src/components/OpenStreetMapJpOSMBrightVector/index.tsx b/src/components/OpenStreetMapJpOSMBrightVector/index.tsx
@@ -0,0 +1,24 @@
+import { Map } from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+export const OpenStreetMapJpOSMBrightVector = () => {
+  return (
+    <div>
+      <h2>
+        https://tile.openstreetmap.jp/styles/osm-bright/style.json
+      </h2>
+      <Map
+        initialViewState={{
+          longitude: 0,
+          latitude: 0,
+          zoom: 4,
+        }}
+        dragPan={false}
+        scrollZoom={false}
+        hash={false}
+        style={{ width: "100%", height: "400px" }}
+        mapStyle="https://tile.openstreetmap.jp/styles/osm-bright/style.json"
+      />
+    </div>
+  );
+};