Skip to content

Commit

Permalink
add MapStyleSelector
Browse files Browse the repository at this point in the history
  • Loading branch information
yuiseki committed Jan 6, 2024
1 parent 37f9db2 commit 6614783
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 51 deletions.
16 changes: 1 addition & 15 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -235,20 +235,6 @@ main.tridentMain {
z-index: 1000;
}

.tridentMapSelectWrap select {
font-size: 1rem;
line-height: 1.4;
appearance: none;
border-radius: 12px;
min-height: 20px;
margin: 0px;
padding: 2px 8px;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
background-color: white;
font-family: sans-serif, emoji;
}

.tridentAgentArticle,
.tridentAgentReportListWrap {
height: 100vh;
Expand Down Expand Up @@ -605,7 +591,7 @@ main.tridentMain {
width: 100%;
top: 0;
left: 0;
height: 50dvh;
height: 100dvh;
}
.dialogueElementItem {
gap: 0px;
Expand Down
38 changes: 6 additions & 32 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import * as turf from "@turf/turf";
import { TridentMapsStyle } from "@/types/TridentMaps";
import { useLocalStorage } from "@/hooks/localStorage";
import { FloatingChatButton } from "@/components/FloatingActionButton";
import { MapStyleSelector } from "@/components/MapStyleSelector";

const greetings = `Hello! I'm TRIDENT, interactive Smart Maps assistant. Could you indicate me the areas and themes you want to see as the map?`;

Expand Down Expand Up @@ -340,37 +341,10 @@ export default function Home() {
<title>{pageTitle}</title>
<main className="tridentMain">
<div className="tridentMapWrap">
<div className="tridentMapSelectWrap">
<select
style={{
position: "absolute",
top: 10,
left: 10,
zIndex: 10000,
maxWidth: "250px",
textOverflow: "ellipsis",
}}
value={mapStyleJsonUrl}
onChange={onSelectMapStyleJsonUrl}
>
<option value={"/map_styles/fiord-color-gl-style/style.json"}>
🗺 OSM Fiord color (vector)
</option>
<option
value={
"https://tile.openstreetmap.jp/styles/osm-bright/style.json"
}
>
🗺 OSM JP bright (vector)
</option>
<option value={"/map_styles/osm-hot/style.json"}>
🗺 OSM HOT (raster)
</option>
<option value={"/map_styles/arcgis-world-imagery/style.json"}>
🛰 ArcGIS World Imagery (raster)
</option>
</select>
</div>
<MapStyleSelector
mapStyleJsonUrl={mapStyleJsonUrl}
onSelectMapStyleJsonUrl={onSelectMapStyleJsonUrl}
/>
<MapProvider>
<BaseMap
id="mainMap"
Expand All @@ -395,7 +369,7 @@ export default function Home() {
<FloatingChatButton>
<div className="logsOuterWrap" ref={dialogueRef}>
<div className="tridentMapTitle">
{mapTitle ? mapTitle : "Untitled"}
{mapTitle ? mapTitle : "Untitled Map"}
</div>
{dialogueList.map((dialogueElement, dialogueIndex) => {
return (
Expand Down
9 changes: 5 additions & 4 deletions src/components/FloatingActionButton/styles.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-items: flex-end;
}

.buttonInnerWrap {
Expand All @@ -19,7 +19,7 @@
align-items: center;
backdrop-filter: blur(10px);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
margin: 10px 0;
margin: 10px;
z-index: 100000;
}

Expand All @@ -41,7 +41,8 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-items: flex-end;
padding: 10px;
}

.closeButton {
Expand All @@ -51,5 +52,5 @@
background: transparent;
background: rgba(5, 5, 5, 0.5);
border-radius: 50%;
margin: 10px 0;
margin: 10px;
}
29 changes: 29 additions & 0 deletions src/components/MapStyleSelector/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import styles from "./styles.module.scss";

export const MapStyleSelector: React.FC<{
mapStyleJsonUrl: string;
onSelectMapStyleJsonUrl: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}> = ({ mapStyleJsonUrl, onSelectMapStyleJsonUrl }) => {
return (
<select
className={styles.select}
value={mapStyleJsonUrl}
onChange={onSelectMapStyleJsonUrl}
>
<option value={"/map_styles/fiord-color-gl-style/style.json"}>
🗺 OSM Fiord color (vector)
</option>
<option
value={"https://tile.openstreetmap.jp/styles/osm-bright/style.json"}
>
🗺 OSM JP bright (vector)
</option>
<option value={"/map_styles/osm-hot/style.json"}>
🗺 OSM HOT (raster)
</option>
<option value={"/map_styles/arcgis-world-imagery/style.json"}>
🛰 ArcGIS World Imagery (raster)
</option>
</select>
);
};
19 changes: 19 additions & 0 deletions src/components/MapStyleSelector/styles.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.select {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10000;
max-width: 250px;
text-overflow: ellipsis;
font-size: 1rem;
line-height: 1.4;
appearance: none;
border-radius: 12px;
min-height: 20px;
margin: 0px;
padding: 2px 8px;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
background-color: white;
font-family: sans-serif, emoji;
}

0 comments on commit 6614783

Please sign in to comment.