diff --git a/package.json b/package.json index e9dfbd7..3e05eaa 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": "^27.0.2", "@types/leaflet": "^1.7.5", 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/components/Map/Map.tsx b/src/components/Map/Map.tsx deleted file mode 100644 index e425fa0..0000000 --- a/src/components/Map/Map.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { - MapContainer, - TileLayer, - LayersControl, - LayerGroup, -} from "react-leaflet"; -import "leaflet/dist/leaflet.css"; - -import { PointMeta } from "types/Point"; - -import { PointLayer } from "./PointLayer"; - -//船橋市役所のlat lon -const position: [number, number] = [35.694722, 139.9825]; - -const Map = (props: { pointCatalog: PointMeta[] }) => { - return ( - - - - {props.pointCatalog.map((item, index) => { - return ( - - {PointLayer(item)} - - ); - })} - - - ); -}; - -export default Map; 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/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..8fdff93 --- /dev/null +++ b/src/data/points/points.ts @@ -0,0 +1,14 @@ +import { PointMeta } from "types/Point"; + +import { blueIcon, greenIcon } from "pages/Index/components/Icons"; + +import json from "./points.json"; + +export const points = (): PointMeta[] => { + return json.map((datum) => { + return { + ...datum, + icon: datum.icon === "blue" ? blueIcon : greenIcon, + }; + }); +}; 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/pages/Index/Index.tsx b/src/pages/Index/Index.tsx index 0b71028..d42ed9e 100644 --- a/src/pages/Index/Index.tsx +++ b/src/pages/Index/Index.tsx @@ -1,41 +1,32 @@ import React, { FC } from "react"; +import { MapContainer, TileLayer } from "react-leaflet"; -import { PointMeta } from "types/Point"; - -import Map from "components/Map/Map"; -import { greenIcon, blueIcon } from "components/Map/Icons"; +import Navigation from "./components/Navigation/Navigation"; +import Attribution from "./components/Attribution"; +import "leaflet/dist/leaflet.css"; import "styles/full-screen.scss"; -const pointCatalog: 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, - }, -]; +//船橋市役所のlat lon +export const position: [number, number] = [35.694722, 139.9825]; const Index: FC = () => { - return ; + return ( + <> + + + + + + ); }; export default Index; 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/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..08b69ee --- /dev/null +++ b/src/pages/Index/components/About/About.tsx @@ -0,0 +1,60 @@ +import React, { FC, useState } from "react"; + +import scss from "./About.module.scss"; + +const About: FC = () => { + const [check, setCheck] = useState(false); + + return ( + <> + setCheck(e.target.checked)} + /> + +
+
+

Googleアナリティクスの利用について

+

+ 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を使用しています。 +
+ このGoogleアナリティクスはデータの収集のためにCookieを使用しています。 +
+ このデータは匿名で収集されており、個人を特定するものではありません。 +

+

+ この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。 +
+ この規約に関しての詳細は + + Googleアナリティクスサービス利用規約 + + や + + ポリシーと規約ページ + + をご覧ください。 +

+
+
+