From d80e6842a3b6edf921cc7ecd15079843966984cf Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Wed, 20 Oct 2021 08:31:28 +0900 Subject: [PATCH 01/49] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20(#74)=20(#77)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 52 ++++++++++++++++++++++++++++++------- package.json | 2 ++ src/App.tsx | 4 +-- src/components/Map/Map.tsx | 2 +- src/pages/Index/Index.tsx | 2 ++ src/styles/full-screen.scss | 3 +++ 6 files changed, 53 insertions(+), 12 deletions(-) create mode 100644 src/styles/full-screen.scss diff --git a/package-lock.json b/package-lock.json index 88c2df6..6cd6a1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-leaflet": "^3.1.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "sass": "^1.43.2", "typescript": "^4.2.3", "web-vitals": "^1.1.0" }, @@ -28,6 +29,7 @@ "@types/react": "^17.0.2", "@types/react-dom": "^17.0.1", "@types/react-router-dom": "^5.1.7", + "@types/sass": "^1.16.1", "eslint-config-prettier": "^8.1.0", "eslint-plugin-prettier": "^3.3.1", "prettier": "^2.2.1" @@ -3099,6 +3101,15 @@ "@types/node": "*" } }, + "node_modules/@types/sass": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.16.1.tgz", + "integrity": "sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -4705,7 +4716,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "optional": true, "engines": { "node": ">=8" } @@ -5207,7 +5217,6 @@ "version": "3.5.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", - "optional": true, "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", @@ -9893,7 +9902,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "optional": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -16387,7 +16395,6 @@ "version": "3.5.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", - "optional": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -17233,6 +17240,20 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz", "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==" }, + "node_modules/sass": { + "version": "1.43.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.2.tgz", + "integrity": "sha512-DncYhjl3wBaPMMJR0kIUaH3sF536rVrOcqqVGmTZHQRRzj7LQlyGV7Mb8aCKFyILMr5VsPHwRYtyKpnKYlmQSQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/sass-loader": { "version": "10.1.1", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz", @@ -23706,6 +23727,15 @@ "@types/node": "*" } }, + "@types/sass": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.16.1.tgz", + "integrity": "sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -24973,8 +25003,7 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "optional": true + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, "bindings": { "version": "1.5.0", @@ -25391,7 +25420,6 @@ "version": "3.5.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", - "optional": true, "requires": { "anymatch": "~3.1.1", "braces": "~3.0.2", @@ -29097,7 +29125,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "optional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -34114,7 +34141,6 @@ "version": "3.5.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", - "optional": true, "requires": { "picomatch": "^2.2.1" } @@ -34781,6 +34807,14 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz", "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==" }, + "sass": { + "version": "1.43.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.2.tgz", + "integrity": "sha512-DncYhjl3wBaPMMJR0kIUaH3sF536rVrOcqqVGmTZHQRRzj7LQlyGV7Mb8aCKFyILMr5VsPHwRYtyKpnKYlmQSQ==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0" + } + }, "sass-loader": { "version": "10.1.1", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz", diff --git a/package.json b/package.json index 4d855cc..f678b89 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react-leaflet": "^3.1.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "sass": "^1.43.2", "typescript": "^4.2.3", "web-vitals": "^1.1.0" }, @@ -54,6 +55,7 @@ "@types/react": "^17.0.2", "@types/react-dom": "^17.0.1", "@types/react-router-dom": "^5.1.7", + "@types/sass": "^1.16.1", "eslint-config-prettier": "^8.1.0", "eslint-plugin-prettier": "^3.3.1", "prettier": "^2.2.1" diff --git a/src/App.tsx b/src/App.tsx index 2685b9b..478b8af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,11 +5,11 @@ import Index from "pages/Index/Index"; const App: FC = () => { return ( -
+ <> -
+ ); }; export default App; diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index dfd5195..e425fa0 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -20,7 +20,7 @@ const Map = (props: { pointCatalog: PointMeta[] }) => { zoom={13} tap={false} // to support safari https://github.com/Leaflet/Leaflet/issues/7266 scrollWheelZoom={true} - style={{ height: "100vh" }} + style={{ height: "100%" }} > Date: Thu, 21 Oct 2021 07:36:16 +0900 Subject: [PATCH 02/49] =?UTF-8?q?=E3=83=90=E3=82=B0=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/full-screen.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/full-screen.scss b/src/styles/full-screen.scss index 394d923..aee007c 100644 --- a/src/styles/full-screen.scss +++ b/src/styles/full-screen.scss @@ -1,3 +1,5 @@ html, body, #root { height: 100%; -} \ No newline at end of file + overflow: hidden; +} + From 9d10b991c12b9405fae39e78fac3d974687cd017 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Fri, 22 Oct 2021 00:58:13 +0900 Subject: [PATCH 03/49] =?UTF-8?q?Layer=E3=82=92=E4=BD=BF=E3=81=86=E3=81=A8?= =?UTF-8?q?=E3=80=81leaflet=E3=81=AE=E3=83=87=E3=83=95=E3=82=A9=E3=83=AB?= =?UTF-8?q?=E3=83=88=E3=81=AE=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=8C?= =?UTF-8?q?=E5=87=BA=E3=81=A6=E3=81=8D=E3=81=A6=E3=81=97=E3=81=BE=E3=81=86?= =?UTF-8?q?=E3=81=AE=E3=81=A7=E7=8B=AC=E8=87=AA=E5=AE=9F=E8=A3=85=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Navigation.tsx | 78 +++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/components/Map/Navigation.tsx diff --git a/src/components/Map/Navigation.tsx b/src/components/Map/Navigation.tsx new file mode 100644 index 0000000..684c2e9 --- /dev/null +++ b/src/components/Map/Navigation.tsx @@ -0,0 +1,78 @@ +import React, { FC, useState, useEffect } from "react"; +import { useMap } from "react-leaflet"; +import L, { Marker, LayerGroup } from "leaflet"; +import { PointInfo, PointMeta } from "../../types/Point"; +import { blueIcon, greenIcon } from "./Icons"; +import axios from "axios"; + +const Navigation: FC = () => { + const map = useMap(); + const [layerGroups, setLayerGroups] = useState<{ [key: string]: LayerGroup }>( + {} + ); + + useEffect(() => { + Object.keys(layerGroups).forEach((key) => { + const layerGroup = layerGroups[key]; + layerGroup.addTo(map); + }); + }, [layerGroups, map]); + + useEffect(() => { + pointsCatalog.forEach((point: PointMeta) => { + axios.get<[PointInfo]>(point.url).then((res) => { + const markers: Marker[] = []; + res.data.forEach((marker: PointInfo) => { + const type = point.type; + const name = marker.name; + const address = marker.details.address; + const phone = marker.details.phone_number; + const HTML = `種別: ${type}
名前: ${name}
住所: ${address}
電話番号: ${phone}`; + + markers.push( + L.marker([marker.lat, marker.lng], { icon: blueIcon }).bindPopup( + HTML + ) + ); + }); + setLayerGroups((prevState) => { + return { + ...prevState, + [point.type]: L.layerGroup(markers), + }; + }); + }); + }); + }, []); + + return
; +}; +export default Navigation; + +const pointsCatalog: PointMeta[] = [ + { + url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/syokibohoikuichiran.json", + type: "小規模保育園", + icon: greenIcon, + }, + { + url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/korituhoikusyoitiran.json", + type: "公立保育園", + icon: greenIcon, + }, + { + url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/sirituhoikusyoitiran.json", + type: "私立保育園", + icon: greenIcon, + }, + { + url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/ninteikodomoenitiran.json", + type: "認定こども園", + icon: greenIcon, + }, + { + url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/kouminkan.json", + type: "公民館", + icon: blueIcon, + }, +]; From c1a47d1a0ecb1f80fbe049fc7a259f338d0d1030 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Fri, 22 Oct 2021 01:02:57 +0900 Subject: [PATCH 04/49] =?UTF-8?q?=E9=96=8B=E7=99=BA=E7=92=B0=E5=A2=83?= =?UTF-8?q?=E3=81=A7=E6=AD=A3=E5=B8=B8=E3=81=AB=E5=8B=95=E4=BD=9C=E3=81=97?= =?UTF-8?q?=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 5c0a2de..5dc6d09 100644 --- a/package.json +++ b/package.json @@ -36,18 +36,11 @@ "prettier/prettier": "error" } }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, + "browserslist": [ + ">0.2%", + "not dead", + "not op_mini all" + ], "devDependencies": { "@types/jest": "^26.0.20", "@types/leaflet": "^1.7.5", From 98ccb6406adfd1e3ca131195cc54d27f5e07ccca Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Fri, 22 Oct 2021 09:17:34 +0900 Subject: [PATCH 05/49] Update Map.tsx --- src/components/Map/Map.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index e425fa0..64f4f02 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -9,6 +9,7 @@ import "leaflet/dist/leaflet.css"; import { PointMeta } from "types/Point"; import { PointLayer } from "./PointLayer"; +import Navigation from "./Navigation"; //船橋市役所のlat lon const position: [number, number] = [35.694722, 139.9825]; @@ -26,15 +27,7 @@ const Map = (props: { pointCatalog: PointMeta[] }) => { attribution='© OpenStreetMap contributors | CodeForFunabashi' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> - - {props.pointCatalog.map((item, index) => { - return ( - - {PointLayer(item)} - - ); - })} - + ); }; From 8d68d63c3e3a0a3b24e44b28831ae95941a78072 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Fri, 22 Oct 2021 09:18:36 +0900 Subject: [PATCH 06/49] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E8=A8=98?= =?UTF-8?q?=E8=BF=B0=E3=81=AE=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Map.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 64f4f02..dc43aa9 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -1,14 +1,11 @@ import { MapContainer, TileLayer, - LayersControl, - LayerGroup, } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import { PointMeta } from "types/Point"; -import { PointLayer } from "./PointLayer"; import Navigation from "./Navigation"; //船橋市役所のlat lon From 0428bfc7644c03d1e1311c91512aa4001fd7be2b Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Fri, 22 Oct 2021 09:20:17 +0900 Subject: [PATCH 07/49] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E8=A7=A3=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Map.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index dc43aa9..8c3f4fd 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -1,7 +1,4 @@ -import { - MapContainer, - TileLayer, -} from "react-leaflet"; +import { MapContainer, TileLayer } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import { PointMeta } from "types/Point"; From b4108370aae46b9ed09d1f8b28285b2bab792a78 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Fri, 22 Oct 2021 09:23:01 +0900 Subject: [PATCH 08/49] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3?= =?UTF-8?q?=E3=82=92=E6=97=A2=E5=AD=98=E3=81=AE=E3=82=82=E3=81=AE=E3=81=A8?= =?UTF-8?q?=E6=95=B4=E5=90=88=E6=80=A7=E3=82=92=E3=81=A8=E3=82=8B=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Map/Navigation.tsx b/src/components/Map/Navigation.tsx index 684c2e9..8727758 100644 --- a/src/components/Map/Navigation.tsx +++ b/src/components/Map/Navigation.tsx @@ -30,7 +30,7 @@ const Navigation: FC = () => { const HTML = `種別: ${type}
名前: ${name}
住所: ${address}
電話番号: ${phone}`; markers.push( - L.marker([marker.lat, marker.lng], { icon: blueIcon }).bindPopup( + L.marker([marker.lat, marker.lng], { icon: point.icon }).bindPopup( HTML ) ); From f78075e0f6bdc4410256173c3e737ec07e9b2ab9 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sat, 23 Oct 2021 07:40:29 +0900 Subject: [PATCH 09/49] =?UTF-8?q?=E4=BB=95=E6=A7=98=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Navigation.module.scss | 6 ++ src/components/Map/Navigation.tsx | 116 +++++++++++++--------- src/data/points/points.json | 27 +++++ src/data/points/points.ts | 14 +++ 4 files changed, 117 insertions(+), 46 deletions(-) create mode 100644 src/components/Map/Navigation.module.scss create mode 100644 src/data/points/points.json create mode 100644 src/data/points/points.ts diff --git a/src/components/Map/Navigation.module.scss b/src/components/Map/Navigation.module.scss new file mode 100644 index 0000000..f1c72ef --- /dev/null +++ b/src/components/Map/Navigation.module.scss @@ -0,0 +1,6 @@ +.navigation { + position: fixed; + top: 0; + right: 0; + z-index: 1000; +} \ No newline at end of file diff --git a/src/components/Map/Navigation.tsx b/src/components/Map/Navigation.tsx index 8727758..3252edd 100644 --- a/src/components/Map/Navigation.tsx +++ b/src/components/Map/Navigation.tsx @@ -1,78 +1,102 @@ -import React, { FC, useState, useEffect } from "react"; +import React, { + FC, + useState, + useEffect, + ChangeEvent, + MouseEventHandler, + Dispatch, + SetStateAction, +} from "react"; import { useMap } from "react-leaflet"; import L, { Marker, LayerGroup } from "leaflet"; -import { PointInfo, PointMeta } from "../../types/Point"; -import { blueIcon, greenIcon } from "./Icons"; import axios from "axios"; +import { PointInfo, PointMeta } from "types/Point"; + +import scss from "./Navigation.module.scss"; + +import { points } from "data/points/points"; + const Navigation: FC = () => { const map = useMap(); const [layerGroups, setLayerGroups] = useState<{ [key: string]: LayerGroup }>( {} ); + const [layerGroupKeys, setLayerGroupKeys] = useState<{ + [key: string]: boolean; + }>({}); useEffect(() => { - Object.keys(layerGroups).forEach((key) => { - const layerGroup = layerGroups[key]; - layerGroup.addTo(map); - }); - }, [layerGroups, map]); + Promise.all( + points().map((point: PointMeta) => { + return axios.get<[PointInfo]>(point.url); + }) + ).then((responses) => { + responses.forEach((response, index) => { + const type = points()[index].type; - useEffect(() => { - pointsCatalog.forEach((point: PointMeta) => { - axios.get<[PointInfo]>(point.url).then((res) => { const markers: Marker[] = []; - res.data.forEach((marker: PointInfo) => { - const type = point.type; + response.data.forEach((marker: PointInfo) => { const name = marker.name; const address = marker.details.address; const phone = marker.details.phone_number; const HTML = `種別: ${type}
名前: ${name}
住所: ${address}
電話番号: ${phone}`; markers.push( - L.marker([marker.lat, marker.lng], { icon: point.icon }).bindPopup( - HTML - ) + L.marker([marker.lat, marker.lng], { + icon: points()[index].icon, + }).bindPopup(HTML) ); }); + setLayerGroups((prevState) => { return { ...prevState, - [point.type]: L.layerGroup(markers), + [type]: L.layerGroup(markers).addTo(map), + }; + }); + + setLayerGroupKeys((prevState) => { + return { + ...prevState, + type: true, }; }); }); }); - }, []); + }, [map]); - return
; + console.log(setLayerGroupKeys); + + return ( +
+ {Object.keys(layerGroups).map((key, index) => { + return ( + + ); + })} +
+ ); }; export default Navigation; -const pointsCatalog: PointMeta[] = [ - { - url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/syokibohoikuichiran.json", - type: "小規模保育園", - icon: greenIcon, - }, - { - url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/korituhoikusyoitiran.json", - type: "公立保育園", - icon: greenIcon, - }, - { - url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/sirituhoikusyoitiran.json", - type: "私立保育園", - icon: greenIcon, - }, - { - url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/ninteikodomoenitiran.json", - type: "認定こども園", - icon: greenIcon, - }, - { - url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/kouminkan.json", - type: "公民館", - icon: blueIcon, - }, -]; +const checkBoxClickHandler = ( + e: ChangeEvent, + setActiveKeys: Dispatch> +) => { + setActiveKeys((prevState) => { + return { + ...prevState, + [e.target.value]: e.target.checked, + }; + }); +}; diff --git a/src/data/points/points.json b/src/data/points/points.json new file mode 100644 index 0000000..a2950e6 --- /dev/null +++ b/src/data/points/points.json @@ -0,0 +1,27 @@ +[ + { + "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/syokibohoikuichiran.json", + "type": "小規模保育園", + "icon": "green" + }, + { + "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/korituhoikusyoitiran.json", + "type": "公立保育園", + "icon": "green" + }, + { + "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/sirituhoikusyoitiran.json", + "type": "私立保育園", + "icon": "green" + }, + { + "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/ninteikodomoenitiran.json", + "type": "認定こども園", + "icon": "green" + }, + { + "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/kouminkan.json", + "type": "公民館", + "icon": "blue" + } +] \ No newline at end of file diff --git a/src/data/points/points.ts b/src/data/points/points.ts new file mode 100644 index 0000000..102a829 --- /dev/null +++ b/src/data/points/points.ts @@ -0,0 +1,14 @@ +import { PointMeta } from "types/Point"; + +import { blueIcon, greenIcon } from "components/Map/Icons"; + +import json from "./points.json"; + +export const points = (): PointMeta[] => { + return json.map((datum) => { + return { + ...datum, + icon: datum.icon === "blue" ? blueIcon : greenIcon, + }; + }); +}; From 52be0b6e9a51852d85cbee5c224d7eec27cc7b99 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sat, 23 Oct 2021 08:27:48 +0900 Subject: [PATCH 10/49] Fix --- src/components/Map/Navigation.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Map/Navigation.tsx b/src/components/Map/Navigation.tsx index 3252edd..26f0287 100644 --- a/src/components/Map/Navigation.tsx +++ b/src/components/Map/Navigation.tsx @@ -3,7 +3,6 @@ import React, { useState, useEffect, ChangeEvent, - MouseEventHandler, Dispatch, SetStateAction, } from "react"; From 8d2e770726dad08e565891f19f36af9d7efc097f Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:00:57 +0900 Subject: [PATCH 11/49] =?UTF-8?q?=E5=87=A6=E7=90=86=E5=AE=9F=E8=A3=85?= =?UTF-8?q?=E3=81=AE=E5=AE=8C=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Navigation.tsx | 32 +++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/Map/Navigation.tsx b/src/components/Map/Navigation.tsx index 26f0287..410cdec 100644 --- a/src/components/Map/Navigation.tsx +++ b/src/components/Map/Navigation.tsx @@ -31,8 +31,11 @@ const Navigation: FC = () => { return axios.get<[PointInfo]>(point.url); }) ).then((responses) => { + const types: { [key: string]: boolean } = {}; + const groups: { [key: string]: LayerGroup } = {}; responses.forEach((response, index) => { const type = points()[index].type; + types[type] = true; const markers: Marker[] = []; response.data.forEach((marker: PointInfo) => { @@ -48,24 +51,22 @@ const Navigation: FC = () => { ); }); - setLayerGroups((prevState) => { - return { - ...prevState, - [type]: L.layerGroup(markers).addTo(map), - }; - }); - - setLayerGroupKeys((prevState) => { - return { - ...prevState, - type: true, - }; - }); + groups[type] = L.layerGroup(markers).addTo(map); }); + + setLayerGroupKeys(types); + setLayerGroups(groups); }); }, [map]); - console.log(setLayerGroupKeys); + useEffect(() => { + Object.keys(layerGroupKeys).forEach((key) => { + if (layerGroups[key] !== undefined) { + map.removeLayer(layerGroups[key]); + if (layerGroupKeys[key]) map.addLayer(layerGroups[key]); + } + }); + }, [map, layerGroupKeys, layerGroups]); return (
@@ -76,9 +77,8 @@ const Navigation: FC = () => { checkBoxClickHandler(e, setLayerGroupKeys)} - checked={layerGroupKeys[key]} - key={Math.random()} /> ); From 28526e68a867192e112b2370779f4d631578753c Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:08:05 +0900 Subject: [PATCH 12/49] =?UTF-8?q?=E3=83=87=E3=82=A3=E3=83=AC=E3=82=AF?= =?UTF-8?q?=E3=83=88=E3=83=AA=E6=A7=8B=E9=80=A0=E3=81=AE=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Map.tsx | 2 +- src/components/Map/Point.tsx | 24 ---------------- src/components/Map/PointLayer.tsx | 28 ------------------- src/components/Map/{ => components}/Icons.ts | 0 .../Navigation}/Navigation.module.scss | 2 +- .../Navigation}/Navigation.tsx | 0 src/data/points/points.ts | 2 +- src/pages/Index/Index.tsx | 8 ++++-- 8 files changed, 9 insertions(+), 57 deletions(-) delete mode 100644 src/components/Map/Point.tsx delete mode 100644 src/components/Map/PointLayer.tsx rename src/components/Map/{ => components}/Icons.ts (100%) rename src/components/Map/{ => components/Navigation}/Navigation.module.scss (76%) rename src/components/Map/{ => components/Navigation}/Navigation.tsx (100%) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 8c3f4fd..ef3b1da 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -3,7 +3,7 @@ import "leaflet/dist/leaflet.css"; import { PointMeta } from "types/Point"; -import Navigation from "./Navigation"; +import Navigation from "./components/Navigation/Navigation"; //船橋市役所のlat lon const position: [number, number] = [35.694722, 139.9825]; diff --git a/src/components/Map/Point.tsx b/src/components/Map/Point.tsx deleted file mode 100644 index 16aefe0..0000000 --- a/src/components/Map/Point.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Icon } from "leaflet"; -import { Marker, Popup } from "react-leaflet"; - -import { PointInfo } from "types/Point"; - -export const Point = (props: { - point: PointInfo; - type: string; - icon: Icon; -}) => { - return ( - - - 種別: {props.type} -
- 名前: {props.point.name} -
- 住所: {props.point.details.address} -
- 電話番号: {props.point.details.phone_number} - - - ); -}; diff --git a/src/components/Map/PointLayer.tsx b/src/components/Map/PointLayer.tsx deleted file mode 100644 index a511bad..0000000 --- a/src/components/Map/PointLayer.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import axios from "axios"; -import { useState, useEffect } from "react"; - -import { PointInfo, PointMeta } from "types/Point"; - -import { Point } from "./Point"; - -const loadFeatures = async (url: string) => { - const res = await axios.get<[PointInfo]>(url); - return res.data; -}; - -export const PointLayer = (pointMeta: PointMeta) => { - const [features, setFeatures] = useState([]); - - useEffect(() => { - loadFeatures(pointMeta.url).then((data) => setFeatures(data)); - }, [pointMeta]); - - return features.map((feature) => ( - - )); -}; diff --git a/src/components/Map/Icons.ts b/src/components/Map/components/Icons.ts similarity index 100% rename from src/components/Map/Icons.ts rename to src/components/Map/components/Icons.ts diff --git a/src/components/Map/Navigation.module.scss b/src/components/Map/components/Navigation/Navigation.module.scss similarity index 76% rename from src/components/Map/Navigation.module.scss rename to src/components/Map/components/Navigation/Navigation.module.scss index f1c72ef..d423c41 100644 --- a/src/components/Map/Navigation.module.scss +++ b/src/components/Map/components/Navigation/Navigation.module.scss @@ -2,5 +2,5 @@ position: fixed; top: 0; right: 0; - z-index: 1000; + z-index: 1500; } \ No newline at end of file diff --git a/src/components/Map/Navigation.tsx b/src/components/Map/components/Navigation/Navigation.tsx similarity index 100% rename from src/components/Map/Navigation.tsx rename to src/components/Map/components/Navigation/Navigation.tsx diff --git a/src/data/points/points.ts b/src/data/points/points.ts index 102a829..ae1f292 100644 --- a/src/data/points/points.ts +++ b/src/data/points/points.ts @@ -1,6 +1,6 @@ import { PointMeta } from "types/Point"; -import { blueIcon, greenIcon } from "components/Map/Icons"; +import { blueIcon, greenIcon } from "components/Map/components/Icons"; import json from "./points.json"; diff --git a/src/pages/Index/Index.tsx b/src/pages/Index/Index.tsx index 0b71028..b2b258a 100644 --- a/src/pages/Index/Index.tsx +++ b/src/pages/Index/Index.tsx @@ -3,7 +3,7 @@ import React, { FC } from "react"; import { PointMeta } from "types/Point"; import Map from "components/Map/Map"; -import { greenIcon, blueIcon } from "components/Map/Icons"; +import { greenIcon, blueIcon } from "components/Map/components/Icons"; import "styles/full-screen.scss"; @@ -36,6 +36,10 @@ const pointCatalog: PointMeta[] = [ ]; const Index: FC = () => { - return ; + return ( + <> + + + ); }; export default Index; From 878f0fb65f991768064afe2701263751ad05f984 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:11:56 +0900 Subject: [PATCH 13/49] =?UTF-8?q?=E3=83=87=E3=82=A3=E3=83=AC=E3=82=AF?= =?UTF-8?q?=E3=83=88=E3=83=AA=E6=A7=8B=E9=80=A0=E3=81=AE=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/{components => }/Icons.ts | 0 src/components/Map/Map.tsx | 2 +- .../Map/{components => }/Navigation/Navigation.module.scss | 0 src/components/Map/{components => }/Navigation/Navigation.tsx | 0 src/data/points/points.ts | 2 +- src/pages/Index/Index.tsx | 2 +- 6 files changed, 3 insertions(+), 3 deletions(-) rename src/components/Map/{components => }/Icons.ts (100%) rename src/components/Map/{components => }/Navigation/Navigation.module.scss (100%) rename src/components/Map/{components => }/Navigation/Navigation.tsx (100%) diff --git a/src/components/Map/components/Icons.ts b/src/components/Map/Icons.ts similarity index 100% rename from src/components/Map/components/Icons.ts rename to src/components/Map/Icons.ts diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index ef3b1da..855ed0d 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -3,7 +3,7 @@ import "leaflet/dist/leaflet.css"; import { PointMeta } from "types/Point"; -import Navigation from "./components/Navigation/Navigation"; +import Navigation from "./Navigation/Navigation"; //船橋市役所のlat lon const position: [number, number] = [35.694722, 139.9825]; diff --git a/src/components/Map/components/Navigation/Navigation.module.scss b/src/components/Map/Navigation/Navigation.module.scss similarity index 100% rename from src/components/Map/components/Navigation/Navigation.module.scss rename to src/components/Map/Navigation/Navigation.module.scss diff --git a/src/components/Map/components/Navigation/Navigation.tsx b/src/components/Map/Navigation/Navigation.tsx similarity index 100% rename from src/components/Map/components/Navigation/Navigation.tsx rename to src/components/Map/Navigation/Navigation.tsx diff --git a/src/data/points/points.ts b/src/data/points/points.ts index ae1f292..102a829 100644 --- a/src/data/points/points.ts +++ b/src/data/points/points.ts @@ -1,6 +1,6 @@ import { PointMeta } from "types/Point"; -import { blueIcon, greenIcon } from "components/Map/components/Icons"; +import { blueIcon, greenIcon } from "components/Map/Icons"; import json from "./points.json"; diff --git a/src/pages/Index/Index.tsx b/src/pages/Index/Index.tsx index b2b258a..974685a 100644 --- a/src/pages/Index/Index.tsx +++ b/src/pages/Index/Index.tsx @@ -3,7 +3,7 @@ import React, { FC } from "react"; import { PointMeta } from "types/Point"; import Map from "components/Map/Map"; -import { greenIcon, blueIcon } from "components/Map/components/Icons"; +import { greenIcon, blueIcon } from "components/Map/Icons"; import "styles/full-screen.scss"; From 5d5c1f1d217a2f9f9f0ebaf97fdb35f04f0b1b55 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:16:36 +0900 Subject: [PATCH 14/49] =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=81=AE=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Layers.tsx | 99 ++++++++++++++++++++ src/components/Map/Navigation/Navigation.tsx | 93 +----------------- 2 files changed, 102 insertions(+), 90 deletions(-) create mode 100644 src/components/Map/Layers.tsx diff --git a/src/components/Map/Layers.tsx b/src/components/Map/Layers.tsx new file mode 100644 index 0000000..4bffe19 --- /dev/null +++ b/src/components/Map/Layers.tsx @@ -0,0 +1,99 @@ +import React, { + FC, + useState, + useEffect, + ChangeEvent, + Dispatch, + SetStateAction, +} from "react"; +import { useMap } from "react-leaflet"; +import L, { Marker, LayerGroup } from "leaflet"; +import axios from "axios"; + +import { PointInfo, PointMeta } from "types/Point"; + +import { points } from "data/points/points"; + +const Layers: FC = () => { + const map = useMap(); + const [layerGroups, setLayerGroups] = useState<{ [key: string]: LayerGroup }>( + {} + ); + const [layerGroupKeys, setLayerGroupKeys] = useState<{ + [key: string]: boolean; + }>({}); + + useEffect(() => { + Promise.all( + points().map((point: PointMeta) => { + return axios.get<[PointInfo]>(point.url); + }) + ).then((responses) => { + const types: { [key: string]: boolean } = {}; + const groups: { [key: string]: LayerGroup } = {}; + responses.forEach((response, index) => { + const type = points()[index].type; + types[type] = true; + + const markers: Marker[] = []; + response.data.forEach((marker: PointInfo) => { + const name = marker.name; + const address = marker.details.address; + const phone = marker.details.phone_number; + const HTML = `種別: ${type}
名前: ${name}
住所: ${address}
電話番号: ${phone}`; + + markers.push( + L.marker([marker.lat, marker.lng], { + icon: points()[index].icon, + }).bindPopup(HTML) + ); + }); + + groups[type] = L.layerGroup(markers).addTo(map); + }); + + setLayerGroupKeys(types); + setLayerGroups(groups); + }); + }, [map]); + + useEffect(() => { + Object.keys(layerGroupKeys).forEach((key) => { + if (layerGroups[key] !== undefined) { + map.removeLayer(layerGroups[key]); + if (layerGroupKeys[key]) map.addLayer(layerGroups[key]); + } + }); + }, [map, layerGroupKeys, layerGroups]); + + return ( + <> + {Object.keys(layerGroups).map((key, index) => { + return ( + + ); + })} + + ); +}; +export default Layers; + +const checkBoxClickHandler = ( + e: ChangeEvent, + setActiveKeys: Dispatch> +) => { + setActiveKeys((prevState) => { + return { + ...prevState, + [e.target.value]: e.target.checked, + }; + }); +}; diff --git a/src/components/Map/Navigation/Navigation.tsx b/src/components/Map/Navigation/Navigation.tsx index 410cdec..088be29 100644 --- a/src/components/Map/Navigation/Navigation.tsx +++ b/src/components/Map/Navigation/Navigation.tsx @@ -1,101 +1,14 @@ -import React, { - FC, - useState, - useEffect, - ChangeEvent, - Dispatch, - SetStateAction, -} from "react"; -import { useMap } from "react-leaflet"; -import L, { Marker, LayerGroup } from "leaflet"; -import axios from "axios"; +import React, { FC } from "react"; -import { PointInfo, PointMeta } from "types/Point"; +import Layers from "components/Map/Layers"; import scss from "./Navigation.module.scss"; -import { points } from "data/points/points"; - const Navigation: FC = () => { - const map = useMap(); - const [layerGroups, setLayerGroups] = useState<{ [key: string]: LayerGroup }>( - {} - ); - const [layerGroupKeys, setLayerGroupKeys] = useState<{ - [key: string]: boolean; - }>({}); - - useEffect(() => { - Promise.all( - points().map((point: PointMeta) => { - return axios.get<[PointInfo]>(point.url); - }) - ).then((responses) => { - const types: { [key: string]: boolean } = {}; - const groups: { [key: string]: LayerGroup } = {}; - responses.forEach((response, index) => { - const type = points()[index].type; - types[type] = true; - - const markers: Marker[] = []; - response.data.forEach((marker: PointInfo) => { - const name = marker.name; - const address = marker.details.address; - const phone = marker.details.phone_number; - const HTML = `種別: ${type}
名前: ${name}
住所: ${address}
電話番号: ${phone}`; - - markers.push( - L.marker([marker.lat, marker.lng], { - icon: points()[index].icon, - }).bindPopup(HTML) - ); - }); - - groups[type] = L.layerGroup(markers).addTo(map); - }); - - setLayerGroupKeys(types); - setLayerGroups(groups); - }); - }, [map]); - - useEffect(() => { - Object.keys(layerGroupKeys).forEach((key) => { - if (layerGroups[key] !== undefined) { - map.removeLayer(layerGroups[key]); - if (layerGroupKeys[key]) map.addLayer(layerGroups[key]); - } - }); - }, [map, layerGroupKeys, layerGroups]); - return (
- {Object.keys(layerGroups).map((key, index) => { - return ( - - ); - })} +
); }; export default Navigation; - -const checkBoxClickHandler = ( - e: ChangeEvent, - setActiveKeys: Dispatch> -) => { - setActiveKeys((prevState) => { - return { - ...prevState, - [e.target.value]: e.target.checked, - }; - }); -}; From c354bf430c7a74b85b2eb35bc206c9e4deaccc4b Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:18:03 +0900 Subject: [PATCH 15/49] =?UTF-8?q?=E4=BD=BF=E3=82=8F=E3=81=AA=E3=81=8F?= =?UTF-8?q?=E3=81=AA=E3=81=A3=E3=81=9F=E8=A8=98=E8=BF=B0=E3=81=AE=E5=89=8A?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Map.tsx | 4 +--- src/pages/Index/Index.tsx | 33 +-------------------------------- 2 files changed, 2 insertions(+), 35 deletions(-) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 855ed0d..97e38f0 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -1,14 +1,12 @@ import { MapContainer, TileLayer } from "react-leaflet"; import "leaflet/dist/leaflet.css"; -import { PointMeta } from "types/Point"; - import Navigation from "./Navigation/Navigation"; //船橋市役所のlat lon const position: [number, number] = [35.694722, 139.9825]; -const Map = (props: { pointCatalog: PointMeta[] }) => { +const Map = () => { return ( { return ( <> - + ); }; From 679596b517c94b4bfbde59160ff5a2207537c714 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:21:15 +0900 Subject: [PATCH 16/49] =?UTF-8?q?=E3=83=87=E3=82=A4=E3=83=AC=E3=82=AF?= =?UTF-8?q?=E3=83=88=E3=83=AA=E6=A7=8B=E9=80=A0=E3=81=AE=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Map.tsx | 27 ------------------- src/data/points/points.ts | 2 +- src/pages/Index/Index.tsx | 21 +++++++++++++-- .../Map => pages/Index/components}/Icons.ts | 0 .../Map => pages/Index/components}/Layers.tsx | 0 .../Navigation/Navigation.module.scss | 0 .../components}/Navigation/Navigation.tsx | 2 +- 7 files changed, 21 insertions(+), 31 deletions(-) delete mode 100644 src/components/Map/Map.tsx rename src/{components/Map => pages/Index/components}/Icons.ts (100%) rename src/{components/Map => pages/Index/components}/Layers.tsx (100%) rename src/{components/Map => pages/Index/components}/Navigation/Navigation.module.scss (100%) rename src/{components/Map => pages/Index/components}/Navigation/Navigation.tsx (81%) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx deleted file mode 100644 index 97e38f0..0000000 --- a/src/components/Map/Map.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { MapContainer, TileLayer } from "react-leaflet"; -import "leaflet/dist/leaflet.css"; - -import Navigation from "./Navigation/Navigation"; - -//船橋市役所のlat lon -const position: [number, number] = [35.694722, 139.9825]; - -const Map = () => { - return ( - - - - - ); -}; - -export default Map; diff --git a/src/data/points/points.ts b/src/data/points/points.ts index 102a829..8fdff93 100644 --- a/src/data/points/points.ts +++ b/src/data/points/points.ts @@ -1,6 +1,6 @@ import { PointMeta } from "types/Point"; -import { blueIcon, greenIcon } from "components/Map/Icons"; +import { blueIcon, greenIcon } from "pages/Index/components/Icons"; import json from "./points.json"; diff --git a/src/pages/Index/Index.tsx b/src/pages/Index/Index.tsx index bc1b775..5dd1cda 100644 --- a/src/pages/Index/Index.tsx +++ b/src/pages/Index/Index.tsx @@ -1,13 +1,30 @@ import React, { FC } from "react"; +import { MapContainer, TileLayer } from "react-leaflet"; -import Map from "components/Map/Map"; +import Navigation from "pages/Index/components/Navigation/Navigation"; +import "leaflet/dist/leaflet.css"; import "styles/full-screen.scss"; +//船橋市役所のlat lon +const position: [number, number] = [35.694722, 139.9825]; + const Index: FC = () => { return ( <> - + + + + ); }; diff --git a/src/components/Map/Icons.ts b/src/pages/Index/components/Icons.ts similarity index 100% rename from src/components/Map/Icons.ts rename to src/pages/Index/components/Icons.ts diff --git a/src/components/Map/Layers.tsx b/src/pages/Index/components/Layers.tsx similarity index 100% rename from src/components/Map/Layers.tsx rename to src/pages/Index/components/Layers.tsx diff --git a/src/components/Map/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss similarity index 100% rename from src/components/Map/Navigation/Navigation.module.scss rename to src/pages/Index/components/Navigation/Navigation.module.scss diff --git a/src/components/Map/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx similarity index 81% rename from src/components/Map/Navigation/Navigation.tsx rename to src/pages/Index/components/Navigation/Navigation.tsx index 088be29..0bcb192 100644 --- a/src/components/Map/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; -import Layers from "components/Map/Layers"; +import Layers from "pages/Index/components/Layers"; import scss from "./Navigation.module.scss"; From 17e9dad8f1c694f3d9c7a0433c14a099292940f7 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 14:22:08 +0900 Subject: [PATCH 17/49] =?UTF-8?q?=E3=83=AA=E3=82=BB=E3=83=83=E3=83=88CSS?= =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.scss | 1 + src/App.tsx | 2 ++ src/index.css | 13 ------------- src/index.tsx | 1 - src/styles/reset.scss | 9 +++++++++ 5 files changed, 12 insertions(+), 14 deletions(-) create mode 100644 src/App.scss delete mode 100644 src/index.css create mode 100644 src/styles/reset.scss diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..cec823e --- /dev/null +++ b/src/App.scss @@ -0,0 +1 @@ +@import "styles/reset.scss"; \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 478b8af..e17a618 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,8 @@ import { BrowserRouter as Router, Route } from "react-router-dom"; import Index from "pages/Index/Index"; +import "./App.scss"; + const App: FC = () => { return ( <> diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index ad9cbbb..a85797d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom"; -import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 0000000..943738b --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,9 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; +} \ No newline at end of file From 14205903b9748abe206ebab205b7e617d6e3f858 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 15:02:09 +0900 Subject: [PATCH 18/49] =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E3=81=AE=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index 4bffe19..1611bd1 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -71,13 +71,13 @@ const Layers: FC = () => { {Object.keys(layerGroups).map((key, index) => { return ( ); })} From 5f8d89b0a69dd454331ab5882c75b3b79240967f Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 15:02:28 +0900 Subject: [PATCH 19/49] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Index/components/Navigation/Navigation.module.scss | 9 +++++++++ src/pages/Index/components/Navigation/Navigation.tsx | 3 +++ 2 files changed, 12 insertions(+) diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index d423c41..1a9381e 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -3,4 +3,13 @@ top: 0; right: 0; z-index: 1500; + padding: .5rem; + background: #FFF; + font-size: .75rem; + pointer-events: auto; + + .layers { + display: flex; + flex-flow: column; + } } \ No newline at end of file diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 0bcb192..277174e 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -8,6 +8,9 @@ const Navigation: FC = () => { return (
+
+ +
); }; From cff479700d6997fdb25752fa53fe050534c0c684 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 15:02:43 +0900 Subject: [PATCH 20/49] =?UTF-8?q?=E7=9F=AD=E6=9C=9F=E9=96=93=E3=81=A7?= =?UTF-8?q?=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=99=E3=82=8B=E3=81=A8?= =?UTF-8?q?=E3=83=9E=E3=83=83=E3=83=97=E3=81=8C=E6=8B=A1=E5=A4=A7=E3=81=97?= =?UTF-8?q?=E3=81=A6=E3=81=97=E3=81=BE=E3=81=86=E5=95=8F=E9=A1=8C=E3=81=AE?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Navigation/Navigation.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 277174e..7251371 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -1,13 +1,19 @@ -import React, { FC } from "react"; +import React, { FC, useEffect } from "react"; +import L from "leaflet"; import Layers from "pages/Index/components/Layers"; import scss from "./Navigation.module.scss"; const Navigation: FC = () => { + useEffect(() => { + L.DomEvent.disableClickPropagation( + document.getElementsByClassName(scss.navigation)[0] as HTMLElement + ); + }, []); + return (
-
From 6c6109dcf031d34f38f405234a6058cc8315b029 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 15:05:42 +0900 Subject: [PATCH 21/49] =?UTF-8?q?label=E5=86=85=E3=81=AE=E3=83=86=E3=82=AD?= =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=8C=E9=81=B8=E6=8A=9E=E5=8F=AF=E8=83=BD?= =?UTF-8?q?=E3=81=AA=E5=95=8F=E9=A1=8C=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Navigation/Navigation.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index 1a9381e..376f8c3 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -11,5 +11,9 @@ .layers { display: flex; flex-flow: column; + + label { + user-select: none; + } } } \ No newline at end of file From 20a91f8377cbc842b34f29e3e9679ad2928572e4 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 15:21:22 +0900 Subject: [PATCH 22/49] =?UTF-8?q?=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=83=9C=E3=83=83=E3=82=AF=E3=82=B9=E3=82=92=E8=87=AA=E4=BD=9C?= =?UTF-8?q?=E3=81=AE=E3=82=82=E3=81=AE=E3=81=AB=E7=BD=AE=E6=8F=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 1 + .../Navigation/Navigation.module.scss | 37 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index 1611bd1..7ca45bb 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -77,6 +77,7 @@ const Layers: FC = () => { checked={layerGroupKeys[key] ?? true} onChange={(e) => checkBoxClickHandler(e, setLayerGroupKeys)} /> + {key} ); diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index 376f8c3..9caad50 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -13,7 +13,44 @@ flex-flow: column; label { + display: flex; + align-items: center; user-select: none; + padding: .125rem 0; + cursor: pointer; + + span { + display: block; + width: .9rem; + height: .9rem; + background: #FFF; + border: solid 1px #999; + border-radius: .125rem; + margin-right: .25rem; + } + + input { + display: none; + + &:checked ~ span { + position: relative; + border: none; + background: #1AF; + + &::before { + content: ""; + position: absolute; + top: .1rem; + left: .25rem; + display: block; + width: .25rem; + height: .5rem; + border-right: solid 2px #FFF; + border-bottom: solid 2px #FFF; + transform: rotate(45deg); + } + } + } } } } \ No newline at end of file From 44e4ea8fc149814aef52baa0ac5ef05006d36587 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 18:31:29 +0900 Subject: [PATCH 23/49] =?UTF-8?q?SP=E6=99=82=E3=81=AB=E4=BA=8C=E6=AE=B5?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AB=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Navigation/Navigation.module.scss | 22 +++++++++++++++++-- .../components/Navigation/Navigation.tsx | 5 +++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index 9caad50..b961b9a 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -3,22 +3,40 @@ top: 0; right: 0; z-index: 1500; - padding: .5rem; background: #FFF; font-size: .75rem; pointer-events: auto; + .app_name { + text-align: center; + font-size: .85rem; + margin: .5rem; + + span { + display: inline-block; + + @media screen and (max-width: 750px) { + display: block; + } + } + } + .layers { display: flex; flex-flow: column; + margin: .5rem; label { display: flex; align-items: center; user-select: none; - padding: .125rem 0; + padding-bottom: .25rem; cursor: pointer; + &:last-of-type { + padding-bottom: 0; + } + span { display: block; width: .9rem; diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 7251371..3972ec7 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -14,6 +14,11 @@ const Navigation: FC = () => { return (
+
+ 船橋市子育て + 地域マップ +
+
From 032e1fcc56243ef6e1fef79d028a9478093bf2ea Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 18:31:37 +0900 Subject: [PATCH 24/49] =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E3=81=AE?= =?UTF-8?q?=E5=87=BA=E5=85=B8=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Navigation/Navigation.module.scss | 5 +++++ .../Index/components/Navigation/Navigation.tsx | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index b961b9a..083a6c4 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -71,4 +71,9 @@ } } } + + .copyright { + margin: .5rem; + font-size: .5rem; + } } \ No newline at end of file diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 3972ec7..89d1ddf 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -22,6 +22,19 @@ const Navigation: FC = () => {
+ +
); }; From 63ff8252f9d2320dda038c7e413dae052b59b46c Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:05:18 +0900 Subject: [PATCH 25/49] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?= =?UTF-8?q?=E3=83=AA=E3=82=BB=E3=83=83=E3=83=88CSS=E3=81=AE=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/reset.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 943738b..f32d081 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -6,4 +6,13 @@ body { font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; -} \ No newline at end of file +} + +button{ + background-color: transparent; + border: none; + cursor: pointer; + outline: none; + appearance: none; + font-size: 1em; +} From 49302eccf9109ae03d50b43cef263d9d6d923e3c Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:05:39 +0900 Subject: [PATCH 26/49] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E8=A8=98?= =?UTF-8?q?=E8=BF=B0=E3=81=A8=E3=80=81cursor=E3=81=AE=E8=A8=AD=E5=AE=9A?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Navigation/Navigation.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index 083a6c4..89fe133 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -5,7 +5,7 @@ z-index: 1500; background: #FFF; font-size: .75rem; - pointer-events: auto; + cursor: auto; .app_name { text-align: center; From 39b11833eed335d4a8b7a387067033e822fd9d2a Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:05:56 +0900 Subject: [PATCH 27/49] =?UTF-8?q?=E7=8F=BE=E5=9C=A8=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E3=81=B8=E3=81=AE=E7=A7=BB=E5=8B=95=E6=A9=9F=E8=83=BD=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Location/Location.module.scss | 32 ++++++++++++++ .../Index/components/Location/Location.tsx | 43 +++++++++++++++++++ .../Navigation/Navigation.module.scss | 4 ++ .../components/Navigation/Navigation.tsx | 5 +++ 4 files changed, 84 insertions(+) create mode 100644 src/pages/Index/components/Location/Location.module.scss create mode 100644 src/pages/Index/components/Location/Location.tsx diff --git a/src/pages/Index/components/Location/Location.module.scss b/src/pages/Index/components/Location/Location.module.scss new file mode 100644 index 0000000..b4f51aa --- /dev/null +++ b/src/pages/Index/components/Location/Location.module.scss @@ -0,0 +1,32 @@ +.button { + display: inline-block; + padding: .25rem .5rem; + border: solid 1px #999; + border-radius: .25rem; + cursor: pointer; + transition: background-color 0.3s; + + &:hover { + background: #EEE; + } + + &:active { + background: #DDD; + } +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + display: none; + max-width: 95%; + width: 20rem; + background: #FFF; + padding: 1rem; + transform: translate(-50%, -50%); + + &.view { + display: block; + } +} \ No newline at end of file diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx new file mode 100644 index 0000000..9a22e34 --- /dev/null +++ b/src/pages/Index/components/Location/Location.tsx @@ -0,0 +1,43 @@ +import React, { FC, useState, useEffect } from "react"; +import { useMap } from "react-leaflet"; +import { LatLngExpression } from "leaflet"; + +import scss from "./Location.module.scss"; + +const Location: FC = () => { + const [position, setPosition] = useState([ + 35.694722, 139.9825, + ]); + const [className, setClassName] = useState(scss.modal); + const map = useMap(); + + const onClickHandler = () => { + setClassName(scss.modal + " " + scss.view); + navigator.geolocation.getCurrentPosition((position) => { + let lat = position.coords.latitude; + let lng = position.coords.longitude; + setPosition([lat, lng]); + setClassName(scss.modal); + }); + }; + + useEffect(() => { + map.setView(position); + }, [map, position]); + + return ( + <> + +
+ 位置情報取得の許可を押していただくと現在地まで自動的に移動します。 +
+ しばらく処理に時間がかかります。 +
+ 位置情報はサーバーには送信されません。 +
+ + ); +}; +export default Location; diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index 89fe133..ff4e954 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -72,6 +72,10 @@ } } + .location { + margin: .5rem; + } + .copyright { margin: .5rem; font-size: .5rem; diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 89d1ddf..2864e59 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -2,6 +2,7 @@ import React, { FC, useEffect } from "react"; import L from "leaflet"; import Layers from "pages/Index/components/Layers"; +import Location from "pages/Index/components/Location/Location"; import scss from "./Navigation.module.scss"; @@ -23,6 +24,10 @@ const Navigation: FC = () => {
+
+ +
+
データ出典元

From 68ef0bf85d4daa22a7646e9340be33abe1e993cb Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:10:01 +0900 Subject: [PATCH 28/49] =?UTF-8?q?=E3=82=BA=E3=83=BC=E3=83=A0=E6=A9=9F?= =?UTF-8?q?=E8=83=BD=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Location/Location.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index 9a22e34..d67f9d8 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -5,8 +5,9 @@ import { LatLngExpression } from "leaflet"; import scss from "./Location.module.scss"; const Location: FC = () => { - const [position, setPosition] = useState([ - 35.694722, 139.9825, + const [position, setPosition] = useState<[LatLngExpression, number]>([ + [35.694722, 139.9825], + 13, ]); const [className, setClassName] = useState(scss.modal); const map = useMap(); @@ -16,13 +17,13 @@ const Location: FC = () => { navigator.geolocation.getCurrentPosition((position) => { let lat = position.coords.latitude; let lng = position.coords.longitude; - setPosition([lat, lng]); + setPosition([[lat, lng], 16]); setClassName(scss.modal); }); }; useEffect(() => { - map.setView(position); + map.setView(position[0], position[1]); }, [map, position]); return ( From 7c6b55497657875240098dca94861bac19c932a4 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:24:08 +0900 Subject: [PATCH 29/49] =?UTF-8?q?=E5=A4=B1=E6=95=97=E6=99=82=E3=81=AB?= =?UTF-8?q?=E6=98=8E=E7=A2=BA=E3=81=AB=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?= =?UTF-8?q?=E3=81=AB=E6=8F=90=E7=A4=BA=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Index/components/Location/Location.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index d67f9d8..c2c2490 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -14,12 +14,18 @@ const Location: FC = () => { const onClickHandler = () => { setClassName(scss.modal + " " + scss.view); - navigator.geolocation.getCurrentPosition((position) => { - let lat = position.coords.latitude; - let lng = position.coords.longitude; - setPosition([[lat, lng], 16]); - setClassName(scss.modal); - }); + navigator.geolocation.getCurrentPosition( + (position) => { + let lat = position.coords.latitude; + let lng = position.coords.longitude; + setPosition([[lat, lng], 16]); + setClassName(scss.modal); + }, + () => { + alert("位置情報の取得に失敗しました。"); + setClassName(scss.modal); + } + ); }; useEffect(() => { From 5c82966e7e2ca10f9160c18b4e0eb005c4c57272 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:39:20 +0900 Subject: [PATCH 30/49] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Location/Location.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index c2c2490..4d14841 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -22,7 +22,16 @@ const Location: FC = () => { setClassName(scss.modal); }, () => { - alert("位置情報の取得に失敗しました。"); + const ua = navigator.userAgent; + + if (/iPad|iPhone|iPod/.test(ua)) { + alert( + "位置情報の取得に失敗しました。\n\n意図せず失敗する場合は、設定 > プライバシー > 位置情報サービス > SafariのWebサイトで、「次回、または共有時に確認」に変更してください。" + ); + } else { + alert("位置情報の取得に失敗しました。\n設定をご確認ください。"); + } + setClassName(scss.modal); } ); From 1fa2e94e094f1dacef6f1071201746414adda68d Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:41:42 +0900 Subject: [PATCH 31/49] =?UTF-8?q?=E6=96=87=E8=A8=80=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Location/Location.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index 4d14841..c925184 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -49,7 +49,7 @@ const Location: FC = () => {

位置情報取得の許可を押していただくと現在地まで自動的に移動します。
- しばらく処理に時間がかかります。 + 処理に時間がかかる場合があります。
位置情報はサーバーには送信されません。
From ad5302a1576282835f7ade9b6e2e8c26c1956a40 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:42:30 +0900 Subject: [PATCH 32/49] =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88?= =?UTF-8?q?=E3=82=AB=E3=83=A9=E3=83=BC=E3=81=8CiOS=E3=81=A7=E5=A4=89?= =?UTF-8?q?=E3=82=8F=E3=82=8B=E5=95=8F=E9=A1=8C=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/reset.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/reset.scss b/src/styles/reset.scss index f32d081..f2b698c 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -15,4 +15,5 @@ button{ outline: none; appearance: none; font-size: 1em; + color: inherit; } From cfaba926ccb425c3bd242545e19d2cb65bea5a7a Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:53:14 +0900 Subject: [PATCH 33/49] =?UTF-8?q?=E6=A9=9F=E8=83=BD=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index 7ca45bb..f1dbec0 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -37,10 +37,15 @@ const Layers: FC = () => { const markers: Marker[] = []; response.data.forEach((marker: PointInfo) => { - const name = marker.name; - const address = marker.details.address; - const phone = marker.details.phone_number; - const HTML = `種別: ${type}
名前: ${name}
住所: ${address}
電話番号: ${phone}`; + const base_url = + "https://www.google.com/maps/@?api=1&map_action=pano¶meters&viewpoint="; + + let HTML = ""; + HTML += `種別: ${type}
`; + HTML += `施設名: ${marker.name}
`; + HTML += `住所: ${marker.details.address}
`; + HTML += `電話番号: ${marker.details.phone_number}
`; + HTML += `Google Map`; markers.push( L.marker([marker.lat, marker.lng], { From cb868f52a472018804c4369b233c44af0a41893a Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 19:58:41 +0900 Subject: [PATCH 34/49] =?UTF-8?q?URL=E3=81=AE=E7=9B=B4=E6=9B=B8=E3=81=8D?= =?UTF-8?q?=E3=82=92=E3=82=84=E3=82=81=E3=80=81URL=20Class=E3=82=92?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index f1dbec0..7868cbc 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -37,15 +37,21 @@ const Layers: FC = () => { const markers: Marker[] = []; response.data.forEach((marker: PointInfo) => { - const base_url = - "https://www.google.com/maps/@?api=1&map_action=pano¶meters&viewpoint="; + const GoogleMapURL = new URL("https://www.google.com/maps/@"); + GoogleMapURL.searchParams.append("api", "1"); + GoogleMapURL.searchParams.append("map_action", "pano"); + GoogleMapURL.searchParams.append("parameters", ""); + GoogleMapURL.searchParams.append( + "viewpoint", + `${marker.lat},${marker.lng}` + ); let HTML = ""; HTML += `種別: ${type}
`; HTML += `施設名: ${marker.name}
`; HTML += `住所: ${marker.details.address}
`; HTML += `電話番号: ${marker.details.phone_number}
`; - HTML += `Google Map`; + HTML += `Google Map`; markers.push( L.marker([marker.lat, marker.lng], { From d73cc861d1fdbbc83f5e1278bdfcccfe9d51c9e0 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 21:18:50 +0900 Subject: [PATCH 35/49] =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=A7?= =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Navigation/Navigation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 2864e59..4201d7e 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -32,7 +32,9 @@ const Navigation: FC = () => { データ出典元

- 船橋データカタログ（船橋市作成） + 船橋データカタログ +
+ 船橋市作成
From 65334339f55b9a77b80bd1c738a8383a7748ee7e Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 21:19:13 +0900 Subject: [PATCH 36/49] =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=A7?= =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Location/Location.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index c925184..f3e8cbe 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -44,7 +44,7 @@ const Location: FC = () => { return ( <>

位置情報取得の許可を押していただくと現在地まで自動的に移動します。 From f7a4cc61a8657d5dc93d5b7aa1eccc6639bc2340 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 21:31:58 +0900 Subject: [PATCH 37/49] =?UTF-8?q?Component=E3=81=AB=E5=88=86=E5=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 32 +++++++++---------- src/pages/Index/components/Popup.tsx | 46 +++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 17 deletions(-) create mode 100644 src/pages/Index/components/Popup.tsx diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index 7868cbc..e495a00 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -6,12 +6,15 @@ import React, { Dispatch, SetStateAction, } from "react"; +import ReactDOMServer from "react-dom/server"; import { useMap } from "react-leaflet"; import L, { Marker, LayerGroup } from "leaflet"; import axios from "axios"; import { PointInfo, PointMeta } from "types/Point"; +import Popup from "./Popup"; + import { points } from "data/points/points"; const Layers: FC = () => { @@ -37,26 +40,21 @@ const Layers: FC = () => { const markers: Marker[] = []; response.data.forEach((marker: PointInfo) => { - const GoogleMapURL = new URL("https://www.google.com/maps/@"); - GoogleMapURL.searchParams.append("api", "1"); - GoogleMapURL.searchParams.append("map_action", "pano"); - GoogleMapURL.searchParams.append("parameters", ""); - GoogleMapURL.searchParams.append( - "viewpoint", - `${marker.lat},${marker.lng}` - ); - - let HTML = ""; - HTML += `種別: ${type}
`; - HTML += `施設名: ${marker.name}
`; - HTML += `住所: ${marker.details.address}
`; - HTML += `電話番号: ${marker.details.phone_number}
`; - HTML += `Google Map`; - markers.push( L.marker([marker.lat, marker.lng], { icon: points()[index].icon, - }).bindPopup(HTML) + }).bindPopup( + ReactDOMServer.renderToString( + + ) + ) ); }); diff --git a/src/pages/Index/components/Popup.tsx b/src/pages/Index/components/Popup.tsx new file mode 100644 index 0000000..208a5ce --- /dev/null +++ b/src/pages/Index/components/Popup.tsx @@ -0,0 +1,46 @@ +import React, { FC } from "react"; + +interface PopupInterface { + lat: number; + lng: number; + type: string; + name: string; + address?: string; + phone_number?: string; +} + +const Popup: FC = ({ + lat, + lng, + type, + name, + address, + phone_number, +}) => { + const GoogleMapURL = new URL("https://www.google.com/maps/@"); + GoogleMapURL.searchParams.append("api", "1"); + GoogleMapURL.searchParams.append("map_action", "pano"); + GoogleMapURL.searchParams.append("parameters", ""); + GoogleMapURL.searchParams.append("viewpoint", `${lat},${lng}`); + + return ( +
+ 種別: {type} +
+ 施設名: {name} +
+ 住所: {address} +
+ 電話番号: {phone_number} +
+ + Google Map + +
+ ); +}; +export default Popup; From 650f179f33a09a2cc5e6489c51eb9f2797e367a4 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 21:34:52 +0900 Subject: [PATCH 38/49] =?UTF-8?q?=E5=BF=85=E8=A6=81=E9=A0=85=E7=9B=AE?= =?UTF-8?q?=E3=81=AE=E5=89=8A=E6=B8=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 9 +-------- src/pages/Index/components/Popup.tsx | 25 ++++++++----------------- 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index e495a00..b037121 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -45,14 +45,7 @@ const Layers: FC = () => { icon: points()[index].icon, }).bindPopup( ReactDOMServer.renderToString( - + ) ) ); diff --git a/src/pages/Index/components/Popup.tsx b/src/pages/Index/components/Popup.tsx index 208a5ce..52db9bf 100644 --- a/src/pages/Index/components/Popup.tsx +++ b/src/pages/Index/components/Popup.tsx @@ -1,37 +1,28 @@ import React, { FC } from "react"; +import { PointInfo } from "types/Point"; + interface PopupInterface { - lat: number; - lng: number; + marker: PointInfo; type: string; - name: string; - address?: string; - phone_number?: string; } -const Popup: FC = ({ - lat, - lng, - type, - name, - address, - phone_number, -}) => { +const Popup: FC = ({ marker, type }) => { const GoogleMapURL = new URL("https://www.google.com/maps/@"); GoogleMapURL.searchParams.append("api", "1"); GoogleMapURL.searchParams.append("map_action", "pano"); GoogleMapURL.searchParams.append("parameters", ""); - GoogleMapURL.searchParams.append("viewpoint", `${lat},${lng}`); + GoogleMapURL.searchParams.append("viewpoint", `${marker.lat},${marker.lng}`); return (
種別: {type}
- 施設名: {name} + 施設名: {marker.name}
- 住所: {address} + 住所: {marker.details.address}
- 電話番号: {phone_number} + 電話番号: {marker.details.phone_number}
Date: Sun, 24 Oct 2021 21:37:20 +0900 Subject: [PATCH 39/49] =?UTF-8?q?=E9=87=8D=E8=A4=87=E3=81=97=E3=81=9F?= =?UTF-8?q?=E5=87=A6=E7=90=86=E3=81=AE=E7=B5=B1=E5=90=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Layers.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Index/components/Layers.tsx b/src/pages/Index/components/Layers.tsx index b037121..e74ae72 100644 --- a/src/pages/Index/components/Layers.tsx +++ b/src/pages/Index/components/Layers.tsx @@ -35,14 +35,16 @@ const Layers: FC = () => { const types: { [key: string]: boolean } = {}; const groups: { [key: string]: LayerGroup } = {}; responses.forEach((response, index) => { - const type = points()[index].type; + const point = points()[index]; + + const type = point.type; types[type] = true; const markers: Marker[] = []; response.data.forEach((marker: PointInfo) => { markers.push( L.marker([marker.lat, marker.lng], { - icon: points()[index].icon, + icon: point.icon, }).bindPopup( ReactDOMServer.renderToString( From 088a26af0acc3db66945c2be484d5a942d970940 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 21:40:23 +0900 Subject: [PATCH 40/49] =?UTF-8?q?=E6=96=87=E5=AD=97=E5=88=97=E3=81=AE?= =?UTF-8?q?=E7=9F=AD=E7=B8=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Location/Location.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index f3e8cbe..abb6f65 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -44,7 +44,7 @@ const Location: FC = () => { return ( <>
位置情報取得の許可を押していただくと現在地まで自動的に移動します。 From 3c289c067750b70c12c7b79100cf4411083aa098 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 21:52:57 +0900 Subject: [PATCH 41/49] =?UTF-8?q?=E3=83=89=E3=83=A9=E3=83=83=E3=82=B0?= =?UTF-8?q?=E6=99=82=E3=81=AF=E9=80=8F=E9=81=8E=E3=81=99=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E5=87=A6=E7=90=86=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Navigation/Navigation.module.scss | 5 +++++ .../components/Navigation/Navigation.tsx | 19 ++++++++++++++++--- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index ff4e954..d93c2d0 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -6,6 +6,11 @@ background: #FFF; font-size: .75rem; cursor: auto; + transition: opacity .3s; + + &.transparent { + opacity: .5; + } .app_name { text-align: center; diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 4201d7e..e940a87 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -1,5 +1,6 @@ -import React, { FC, useEffect } from "react"; +import React, { FC, useEffect, useState } from "react"; import L from "leaflet"; +import { useMap } from "react-leaflet"; import Layers from "pages/Index/components/Layers"; import Location from "pages/Index/components/Location/Location"; @@ -7,14 +8,26 @@ import Location from "pages/Index/components/Location/Location"; import scss from "./Navigation.module.scss"; const Navigation: FC = () => { + const map = useMap(); + + const [className, setClassName] = useState(""); + useEffect(() => { L.DomEvent.disableClickPropagation( document.getElementsByClassName(scss.navigation)[0] as HTMLElement ); - }, []); + + map.on("dragstart", () => { + setClassName(scss.transparent); + }); + + map.on("dragend", () => { + setClassName(""); + }); + }, [map]); return ( -
+
船橋市子育て 地域マップ From e48c73a8124768bc7820eba9e938637d1e7d630a Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 22:00:43 +0900 Subject: [PATCH 42/49] =?UTF-8?q?=E6=96=87=E8=A8=80=E3=81=AE=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Location/Location.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index abb6f65..412ba4c 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -47,7 +47,7 @@ const Location: FC = () => { 現在地へ
- 位置情報取得の許可を押していただくと現在地まで自動的に移動します。 + 位置情報の取得を許可していただくと、現在地まで自動的に移動します。
処理に時間がかかる場合があります。
From 3b5a074e543e37380a7988ad575fa4367514f027 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 22:40:34 +0900 Subject: [PATCH 43/49] =?UTF-8?q?Google=E3=82=A2=E3=83=8A=E3=83=AA?= =?UTF-8?q?=E3=83=86=E3=82=A3=E3=82=AF=E3=82=B9=E3=81=AB=E9=96=A2=E3=81=99?= =?UTF-8?q?=E3=82=8B=E8=A1=A8=E8=A8=98=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Index/components/About/About.module.scss | 43 +++++++++++++ src/pages/Index/components/About/About.tsx | 62 +++++++++++++++++++ 2 files changed, 105 insertions(+) create mode 100644 src/pages/Index/components/About/About.module.scss create mode 100644 src/pages/Index/components/About/About.tsx diff --git a/src/pages/Index/components/About/About.module.scss b/src/pages/Index/components/About/About.module.scss new file mode 100644 index 0000000..4ef2b6f --- /dev/null +++ b/src/pages/Index/components/About/About.module.scss @@ -0,0 +1,43 @@ +.check { + display: none; +} + +.button { + user-select: none; + font-size: .5rem; + color: #0078a8; + text-decoration: underline ; +} + +.about { + position: fixed; + top: 50%; + left: 50%; + z-index: 2000; + display: none; + max-width: 90%; + max-height: 90%; + width: 20rem; + height: 30rem; + padding: 1rem; + font-size: .75rem; + overflow-y: scroll; + background: #FFF; + color: #000; + transform: translate(-50%, -50%); +} + +.black { + position: fixed; + top: 0; + left: 0; + z-index: 1750; + display: none; + width: 100%; + height: 100%; + background: #0006; +} + +.view { + display: block; +} \ No newline at end of file diff --git a/src/pages/Index/components/About/About.tsx b/src/pages/Index/components/About/About.tsx new file mode 100644 index 0000000..4c0f9ce --- /dev/null +++ b/src/pages/Index/components/About/About.tsx @@ -0,0 +1,62 @@ +import React, { FC, useState } from "react"; + +import scss from "./About.module.scss"; + +const About: FC = () => { + const [check, setCheck] = useState(false); + + console.log(check); + + return ( + <> + setCheck(e.target.checked)} + /> + + +
+ +
+ +
); }; From fb0762fd890176b9dc6195374189d5407d76bd88 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 24 Oct 2021 22:41:14 +0900 Subject: [PATCH 45/49] =?UTF-8?q?=E8=A1=8C=E9=96=93=E3=81=AE=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/reset.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/reset.scss b/src/styles/reset.scss index f2b698c..8fd2be6 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -6,6 +6,7 @@ body { font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; + line-height: 1.75; } button{ From 51f65d12507692bb3d533f65ccca0932464c8e93 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 12 Jun 2022 13:53:56 +0900 Subject: [PATCH 46/49] =?UTF-8?q?=E5=AE=9A=E6=95=B0=E3=81=AE=E4=BD=BF?= =?UTF-8?q?=E3=81=84=E5=9B=9E=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/Index.tsx | 2 +- src/pages/Index/components/Location/Location.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Index/Index.tsx b/src/pages/Index/Index.tsx index 5dd1cda..3c32eb4 100644 --- a/src/pages/Index/Index.tsx +++ b/src/pages/Index/Index.tsx @@ -7,7 +7,7 @@ import "leaflet/dist/leaflet.css"; import "styles/full-screen.scss"; //船橋市役所のlat lon -const position: [number, number] = [35.694722, 139.9825]; +export const position: [number, number] = [35.694722, 139.9825]; const Index: FC = () => { return ( diff --git a/src/pages/Index/components/Location/Location.tsx b/src/pages/Index/components/Location/Location.tsx index 412ba4c..f022a08 100644 --- a/src/pages/Index/components/Location/Location.tsx +++ b/src/pages/Index/components/Location/Location.tsx @@ -2,11 +2,13 @@ import React, { FC, useState, useEffect } from "react"; import { useMap } from "react-leaflet"; import { LatLngExpression } from "leaflet"; +import { position as cityOfficePosition } from "pages/Index/Index"; + import scss from "./Location.module.scss"; const Location: FC = () => { const [position, setPosition] = useState<[LatLngExpression, number]>([ - [35.694722, 139.9825], + cityOfficePosition, 13, ]); const [className, setClassName] = useState(scss.modal); From a8557a5b5e890f806c61abf90ccd7dc2b8fcb3be Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 12 Jun 2022 13:54:04 +0900 Subject: [PATCH 47/49] =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A2=BA=E3=81=AA?= =?UTF-8?q?=E6=A9=9F=E8=83=BD=E3=81=AE=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/Popup.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/pages/Index/components/Popup.tsx b/src/pages/Index/components/Popup.tsx index 52db9bf..920004d 100644 --- a/src/pages/Index/components/Popup.tsx +++ b/src/pages/Index/components/Popup.tsx @@ -8,12 +8,6 @@ interface PopupInterface { } const Popup: FC = ({ marker, type }) => { - const GoogleMapURL = new URL("https://www.google.com/maps/@"); - GoogleMapURL.searchParams.append("api", "1"); - GoogleMapURL.searchParams.append("map_action", "pano"); - GoogleMapURL.searchParams.append("parameters", ""); - GoogleMapURL.searchParams.append("viewpoint", `${marker.lat},${marker.lng}`); - return (
種別: {type} @@ -23,14 +17,6 @@ const Popup: FC = ({ marker, type }) => { 住所: {marker.details.address}
電話番号: {marker.details.phone_number} -
- - Google Map -
); }; From 5b6c2e5533ece8f2efdc7f9a8e9720673abe2ee3 Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 12 Jun 2022 14:12:41 +0900 Subject: [PATCH 48/49] =?UTF-8?q?Attribution=E5=91=A8=E3=82=8A=E3=81=AE?= =?UTF-8?q?=E6=94=B9=E4=BF=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/Index.tsx | 5 +++-- src/pages/Index/components/A.tsx | 12 ++++++++++ src/pages/Index/components/Attribution.tsx | 26 ++++++++++++++++++++++ 3 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 src/pages/Index/components/A.tsx create mode 100644 src/pages/Index/components/Attribution.tsx diff --git a/src/pages/Index/Index.tsx b/src/pages/Index/Index.tsx index 3c32eb4..d42ed9e 100644 --- a/src/pages/Index/Index.tsx +++ b/src/pages/Index/Index.tsx @@ -1,7 +1,8 @@ import React, { FC } from "react"; import { MapContainer, TileLayer } from "react-leaflet"; -import Navigation from "pages/Index/components/Navigation/Navigation"; +import Navigation from "./components/Navigation/Navigation"; +import Attribution from "./components/Attribution"; import "leaflet/dist/leaflet.css"; import "styles/full-screen.scss"; @@ -20,7 +21,7 @@ const Index: FC = () => { style={{ height: "100%" }} > diff --git a/src/pages/Index/components/A.tsx b/src/pages/Index/components/A.tsx new file mode 100644 index 0000000..3575339 --- /dev/null +++ b/src/pages/Index/components/A.tsx @@ -0,0 +1,12 @@ +import React, { FC, DetailedHTMLProps, AnchorHTMLAttributes } from "react"; + +const A: FC< + DetailedHTMLProps, HTMLAnchorElement> +> = (props) => { + return ( + + {props.children} + + ); +}; +export default A; diff --git a/src/pages/Index/components/Attribution.tsx b/src/pages/Index/components/Attribution.tsx new file mode 100644 index 0000000..17d46ab --- /dev/null +++ b/src/pages/Index/components/Attribution.tsx @@ -0,0 +1,26 @@ +import React, { ReactElement } from "react"; +import { renderToStaticMarkup } from "react-dom/server"; + +import A from "pages/Index/components/A"; + +const Attribution = (): string => { + const Attributions: ReactElement[] = [ + <> + © OpenStreetMap contributors + , + <> + + 船橋データカタログ（船橋市作成）使用 + + （ + + CC BY 4.0 + + ） + , + Code for Funabashi, + ]; + + return Attributions.map((El) => renderToStaticMarkup(El)).join(" | "); +}; +export default Attribution; From bff2185ced200f5fa2ec132d14bf6630b0e022ed Mon Sep 17 00:00:00 2001 From: kyoya0819 Date: Sun, 12 Jun 2022 15:08:31 +0900 Subject: [PATCH 49/49] =?UTF-8?q?Menu=E9=96=8B=E9=96=89=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/components/About/About.tsx | 2 - src/pages/Index/components/Layers.tsx | 7 +- .../Navigation/Navigation.module.scss | 39 ++++++++-- .../components/Navigation/Navigation.tsx | 76 ++++++++++++------- 4 files changed, 84 insertions(+), 40 deletions(-) diff --git a/src/pages/Index/components/About/About.tsx b/src/pages/Index/components/About/About.tsx index 4c0f9ce..08b69ee 100644 --- a/src/pages/Index/components/About/About.tsx +++ b/src/pages/Index/components/About/About.tsx @@ -5,8 +5,6 @@ import scss from "./About.module.scss"; const About: FC = () => { const [check, setCheck] = useState(false); - console.log(check); - return ( <> { +const Layers: FC<{ + onChange: () => void; +}> = ({ onChange }) => { const map = useMap(); const [layerGroups, setLayerGroups] = useState<{ [key: string]: LayerGroup }>( {} @@ -68,7 +70,8 @@ const Layers: FC = () => { if (layerGroupKeys[key]) map.addLayer(layerGroups[key]); } }); - }, [map, layerGroupKeys, layerGroups]); + onChange(); + }, [map, layerGroupKeys, layerGroups, onChange]); return ( <> diff --git a/src/pages/Index/components/Navigation/Navigation.module.scss b/src/pages/Index/components/Navigation/Navigation.module.scss index 03a03c7..e15f1d4 100644 --- a/src/pages/Index/components/Navigation/Navigation.module.scss +++ b/src/pages/Index/components/Navigation/Navigation.module.scss @@ -1,12 +1,23 @@ +#checkbox { + display: none; + + &:checked ~ .navigation { + top: 0!important; + } +} + .navigation { position: fixed; - top: 0; + top: -300px; right: 0; z-index: 1500; background: #FFF; font-size: .75rem; cursor: auto; - transition: opacity .3s; + transition: opacity .3s, top .3s; + background-clip: padding-box; + border-left: 2px solid rgba(0, 0, 0, 0.2); + border-bottom: 2px solid rgba(0, 0, 0, 0.2); &.transparent { opacity: .5; @@ -81,12 +92,26 @@ margin: .5rem; } - .copyright { + .about { margin: .5rem; - font-size: .5rem; } - .about { - margin: .5rem; + .label { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -25px; + width: 70px; + height: 25px; + background: #FFF; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + border-top: 1px solid #ccc; + border-left: 2px solid rgba(0, 0, 0, 0.2); + border-right: 2px solid rgba(0, 0, 0, 0.2); + border-bottom: 2px solid rgba(0, 0, 0, 0.2); + background-clip: padding-box; } -} \ No newline at end of file +} diff --git a/src/pages/Index/components/Navigation/Navigation.tsx b/src/pages/Index/components/Navigation/Navigation.tsx index 347326f..93e1e2f 100644 --- a/src/pages/Index/components/Navigation/Navigation.tsx +++ b/src/pages/Index/components/Navigation/Navigation.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect, useState } from "react"; +import React, { FC, useEffect, useState, useRef } from "react"; import L from "leaflet"; import { useMap } from "react-leaflet"; @@ -12,6 +12,23 @@ const Navigation: FC = () => { const map = useMap(); const [className, setClassName] = useState(""); + const [openMenu, setOpenMenu] = useState(true); + const [navHeight, setNavHeight] = useState(300); + const Nav = useRef(null); + + const getNavHeight = () => { + if (!Nav.current) return 200; + console.log(Nav.current.getBoundingClientRect()); + return Nav.current.getBoundingClientRect().height; + }; + + useEffect(() => { + setNavHeight(getNavHeight()); + + window.addEventListener("resize", () => setNavHeight(getNavHeight())); + return () => + window.removeEventListener("resize", () => setNavHeight(getNavHeight())); + }, []); useEffect(() => { L.DomEvent.disableClickPropagation( @@ -28,39 +45,40 @@ const Navigation: FC = () => { }, [map]); return ( -
-
- 船橋市子育て - 地域マップ -
+ <> + setOpenMenu(e.target.checked)} + /> +
+
+ 船橋市子育て + 地域マップ +
-
- -
+
+ setNavHeight(getNavHeight())} /> +
-
- -
+
+ +
- +
+ +
-
- +
-
+ ); }; export default Navigation;