1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/** @jsxImportSource https://esm.sh/react */
import * as React from "npm:react";
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
import { Map } from "https://esm.sh/react-map-gl@7.1.7/maplibre";
const MyMap: React.FC = () => {
return (
<Map
initialViewState={{
longitude: 139.76,
latitude: 35.68,
zoom: 10,
}}
style={{ width: "100vw", height: "100vh" }}
mapStyle="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json"
/>
);
};
export default async function(req: Request) {
return new Response(
renderToString(
<MyMap />,
),
{
headers: {
"Content-Type": "text/html; charset=utf-8",
},
},
);
}