40 lines
974 B
TypeScript
40 lines
974 B
TypeScript
import { useState } from "react";
|
|
import "./App.css";
|
|
import {
|
|
MapLibreMap,
|
|
Sidebar,
|
|
TopToolbar,
|
|
} from "@mapcomponents/react-maplibre";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
|
|
function App() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
|
|
return (
|
|
<>
|
|
<MapLibreMap
|
|
options={{
|
|
style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
|
|
zoom: 19,
|
|
center: [9.9347680519611, 51.531935000614226],
|
|
}}
|
|
style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}
|
|
/>
|
|
<TopToolbar
|
|
buttons={
|
|
<IconButton
|
|
onClick={() => setSidebarOpen((prev) => !prev)}
|
|
aria-label="toggle sidebar"
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
}
|
|
/>
|
|
<Sidebar open={sidebarOpen} setOpen={setSidebarOpen}></Sidebar>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|