├── .eslintrc.json
├── public
    ├── favicon.ico
    ├── vercel.svg
    ├── thirteen.svg
    └── next.svg
├── postcss.config.js
├── src
    ├── types
    │   ├── ViewportProps.ts
    │   ├── InfoModalProps.ts
    │   ├── ZoomModalProps.ts
    │   ├── ParkingAnalysis.ts
    │   ├── ParkingSearchProps.ts
    │   └── MapProps.ts
    ├── utils
    │   ├── Space.tsx
    │   ├── validateViewport.ts
    │   ├── latLngBoundsToPolygon.ts
    │   └── analyzeParking.ts
    ├── config
    │   └── defaults.ts
    ├── pages
    │   ├── _document.tsx
    │   ├── index.tsx
    │   ├── _app.tsx
    │   └── [latitude]
    │   │   └── [longitude]
    │   │       └── [zoom]
    │   │           └── index.tsx
    ├── components
    │   ├── LoadingOverlay.tsx
    │   ├── CheckBox.tsx
    │   ├── ZoomModal.tsx
    │   ├── MainMap.tsx
    │   ├── Window.tsx
    │   └── InfoModal.tsx
    ├── styles
    │   ├── Map.css
    │   └── globals.css
    └── overpass
    │   └── overpass.ts
├── next.config.js
├── tailwind.config.js
├── .gitignore
├── tsconfig.json
├── package.json
├── LICENSE.md
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brandonfcohen1/openparkingmap/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/types/ViewportProps.ts:
--------------------------------------------------------------------------------
1 | export interface ViewportProps {
2 |   longitude: number;
3 |   latitude: number;
4 |   zoom: number;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/utils/Space.tsx:
--------------------------------------------------------------------------------
1 | export const Space = () => {
2 |   return (
3 |     <>
4 |       <br />
5 |       <br />
6 |     </>
7 |   );
8 | };
9 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/src/types/InfoModalProps.ts:
--------------------------------------------------------------------------------
1 | export interface InfoModalProps {
2 |   showInfoModal: boolean;
3 |   setShowInfoModal: (showZoomModal: boolean) => void;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/types/ZoomModalProps.ts:
--------------------------------------------------------------------------------
1 | export interface ZoomModalProps {
2 |   showZoomModal: boolean;
3 |   setShowZoomModal: (showZoomModal: boolean) => void;
4 | }
5 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/config/defaults.ts:
--------------------------------------------------------------------------------
1 | import { ViewportProps } from "@/types/ViewportProps";
2 | 
3 | export const defaultViewport: ViewportProps = {
4 |   longitude: -118.482505,
5 |   latitude: 34.0248477,
6 |   zoom: 14,
7 | };
8 | 


--------------------------------------------------------------------------------
/src/types/ParkingAnalysis.ts:
--------------------------------------------------------------------------------
1 | import { FeatureCollection } from "geojson";
2 | import { LngLatBounds } from "mapbox-gl";
3 | 
4 | export interface ParkingAnalysis {
5 |   parking: FeatureCollection;
6 |   bounds: LngLatBounds;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Html, Main, Head, NextScript } from "next/document";
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/src/types/ParkingSearchProps.ts:
--------------------------------------------------------------------------------
 1 | export interface ParkingSearchProps {
 2 |   handleParkingSearch: (restrictTags: { key: string; tag: string }[]) => void;
 3 |   loading: boolean;
 4 |   parkingArea: number;
 5 |   windowBoundArea: number;
 6 |   setShowInfoModal: (show: boolean) => void;
 7 |   error: boolean;
 8 |   downloadData: () => void;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/LoadingOverlay.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const LoadingOverlay = () => {
 4 |   return (
 5 |     <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50">
 6 |       <div className="w-36 h-36 border-t-8 border-blue-500 border-solid rounded-full animate-spin"></div>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default LoadingOverlay;
12 | 


--------------------------------------------------------------------------------
/src/styles/Map.css:
--------------------------------------------------------------------------------
 1 | .map-container {
 2 |   position: relative;
 3 |   top: 0;
 4 |   left: 0;
 5 |   height: 100%;
 6 |   width: 100%;
 7 | }
 8 | 
 9 | 
10 | .sidebarStyle {
11 |   display: inline-block;
12 |   position: absolute;
13 |   top: 0;
14 |   left: 0;
15 |   margin: 12px;
16 |   background-color: #404040;
17 |   color: #ffffff;
18 |   z-index: 1 !important;
19 |   padding: 6px;
20 |   font-weight: bold;
21 | }
22 | 
23 | 
24 | .map-page {
25 |   position: fixed;
26 |   height: 100%;
27 |   top: 0;
28 |   left: 0;
29 |   bottom: 0;
30 |   right: 0;
31 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/utils/validateViewport.ts:
--------------------------------------------------------------------------------
 1 | export const validateViewport = (latitude: any, longitude: any, zoom: any) => {
 2 |   const numLatitude = Number(latitude);
 3 |   const numLongitude = Number(longitude);
 4 |   const numZoom = Number(zoom);
 5 | 
 6 |   if (isNaN(numLatitude) || numLatitude < -90 || numLatitude > 90) {
 7 |     return false;
 8 |   }
 9 | 
10 |   if (isNaN(numLongitude) || numLongitude < -180 || numLongitude > 180) {
11 |     return false;
12 |   }
13 | 
14 |   if (isNaN(numZoom) || numZoom < 0 || numZoom > 22) {
15 |     return false;
16 |   }
17 | 
18 |   return true;
19 | };
20 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/utils/latLngBoundsToPolygon.ts:
--------------------------------------------------------------------------------
 1 | import { LngLatBounds } from "mapbox-gl";
 2 | import { Polygon } from "geojson";
 3 | 
 4 | export function lngLatBoundsToPolygon(lngLatBounds: LngLatBounds): Polygon {
 5 |   const sw = lngLatBounds.getSouthWest();
 6 |   const ne = lngLatBounds.getNorthEast();
 7 | 
 8 |   const coordinates: number[][] = [
 9 |     [sw.lng, sw.lat],
10 |     [sw.lng, ne.lat],
11 |     [ne.lng, ne.lat],
12 |     [ne.lng, sw.lat],
13 |     [sw.lng, sw.lat],
14 |   ];
15 | 
16 |   const polygon: Polygon = {
17 |     type: "Polygon",
18 |     coordinates: [coordinates],
19 |   };
20 | 
21 |   return polygon;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/types/MapProps.ts:
--------------------------------------------------------------------------------
 1 | import { ViewportProps } from "@/types/ViewportProps";
 2 | import { LngLatBounds } from "mapbox-gl";
 3 | import { FeatureCollection } from "geojson";
 4 | import { MapRef } from "react-map-gl";
 5 | 
 6 | export interface MapProps {
 7 |   parkingLots: FeatureCollection;
 8 |   loading: boolean;
 9 |   savedBounds: LngLatBounds | undefined;
10 |   showZoomModal: boolean;
11 |   showInfoModal: boolean;
12 |   setShowZoomModal: (showZoomModal: boolean) => void;
13 |   setShowInfoModal: (showInfoModal: boolean) => void;
14 |   setBounds: (bounds: LngLatBounds) => void;
15 |   viewport: ViewportProps;
16 |   setViewport: (viewport: ViewportProps) => void;
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "@/*": ["./src/*"]
20 |     }
21 |   },
22 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
23 |   "exclude": ["node_modules"]
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/CheckBox.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Dispatch, ReactNode, SetStateAction } from "react";
 2 | 
 3 | export const CheckBox = ({
 4 |   children,
 5 |   isChecked,
 6 |   setIsChecked,
 7 | }: {
 8 |   children: ReactNode;
 9 |   isChecked: boolean;
10 |   setIsChecked: Dispatch<SetStateAction<boolean>>;
11 | }) => (
12 |   <div
13 |     className="cursor-pointer"
14 |     onClick={() => setIsChecked((isChecked) => !isChecked)}
15 |   >
16 |     <input
17 |       type="checkbox"
18 |       className="mb-3 cursor-pointer"
19 |       checked={isChecked}
20 |       readOnly
21 |     />
22 |     <label className="text-blue-500 m-3 select-none cursor-pointer">
23 |       {children}
24 |     </label>
25 |   </div>
26 | );
27 | 


--------------------------------------------------------------------------------
/src/utils/analyzeParking.ts:
--------------------------------------------------------------------------------
 1 | import { area } from "@turf/turf";
 2 | import { lngLatBoundsToPolygon } from "./latLngBoundsToPolygon";
 3 | import { ParkingAnalysis } from "@/types/ParkingAnalysis";
 4 | 
 5 | const m2ToAcres = (m2: number) => {
 6 |   return m2 * 0.000247105;
 7 | };
 8 | 
 9 | export const analyzeParking = ({ parking, bounds }: ParkingAnalysis) => {
10 |   // Get total area of parking
11 |   let totalParkingArea = 0;
12 |   parking.features.forEach((feature) => {
13 |     totalParkingArea += area(feature);
14 |   });
15 |   totalParkingArea = m2ToAcres(totalParkingArea);
16 | 
17 |   const boundPolygon = lngLatBoundsToPolygon(bounds);
18 |   const boundArea = m2ToAcres(area(boundPolygon));
19 | 
20 |   return { totalParkingArea, boundArea };
21 | };
22 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useRouter } from "next/router";
 3 | import { defaultViewport } from "@/config/defaults";
 4 | 
 5 | const Home = () => {
 6 |   const router = useRouter();
 7 | 
 8 |   // Redirect to default or saved location
 9 |   useEffect(() => {
10 |     const { longitude, latitude, zoom } = defaultViewport;
11 | 
12 |     const localLatitude = localStorage.getItem("latitude") as string;
13 |     const localLongitude = localStorage.getItem("longitude") as string;
14 |     const localZoom = localStorage.getItem("zoom") as string;
15 | 
16 |     if (localLatitude && localLongitude && localZoom)
17 |       router.replace(`/${localLatitude}/${localLongitude}/${localZoom}`);
18 |     else router.replace(`/${latitude}/${longitude}/${zoom}`);
19 |   }, [router]);
20 | 
21 |   return <div>Redirecting...</div>;
22 | };
23 | 
24 | export default Home;
25 | 


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "@/styles/globals.css";
 2 | import "@/styles/Map.css";
 3 | import "mapbox-gl/dist/mapbox-gl.css";
 4 | import type { AppProps } from "next/app";
 5 | import Script from "next/script";
 6 | import Head from "next/head";
 7 | 
 8 | const GoogleAnalytics = () => {
 9 |   return (
10 |     <>
11 |       <Script
12 |         src="https://www.googletagmanager.com/gtag/js?id=G-KXX93ZWG0M"
13 |         strategy="afterInteractive"
14 |       />
15 |       <Script id="google-analytics" strategy="afterInteractive">
16 |         {`
17 |           window.dataLayer = window.dataLayer || [];
18 |           function gtag(){window.dataLayer.push(arguments);}
19 |           gtag('js', new Date());
20 | 
21 |           gtag('config', 'GA_MEASUREMENT_ID');
22 |         `}
23 |       </Script>
24 |     </>
25 |   );
26 | };
27 | 
28 | export default function App({ Component, pageProps }: AppProps) {
29 |   return (
30 |     <>
31 |       <Head>
32 |         <title>OpenParkingMap</title>
33 |       </Head>
34 |       <GoogleAnalytics />
35 |       <Component {...pageProps} />
36 |     </>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/public/thirteen.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parking-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^1.7.13",
13 |     "@heroicons/react": "^2.0.16",
14 |     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
15 |     "@next/font": "13.1.6",
16 |     "@turf/turf": "^6.5.0",
17 |     "@types/node": "18.14.0",
18 |     "@types/react": "18.0.28",
19 |     "@types/react-dom": "18.0.11",
20 |     "eslint": "8.34.0",
21 |     "eslint-config-next": "13.1.6",
22 |     "mapbox-gl": "^2.12.1",
23 |     "next": "13.1.6",
24 |     "react": "18.2.0",
25 |     "react-dom": "18.2.0",
26 |     "react-map-gl": "^7.0.21",
27 |     "typescript": "4.9.5"
28 |   },
29 |   "devDependencies": {
30 |     "@types/mapbox__mapbox-gl-geocoder": "^4.7.3",
31 |     "@types/mapbox-gl": "^2.7.10",
32 |     "autoprefixer": "^10.4.13",
33 |     "postcss": "^8.4.21",
34 |     "tailwindcss": "^3.2.7"
35 |   },
36 |   "browser": {
37 |     "fs": false,
38 |     "child_process": false
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Brandon Cohen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # OpenParkingMap
 2 | 
 3 | [OpenParkingMap](https://www.openparkingmap.com/)
 4 | 
 5 | This project was inspired by reading [The High Cost of Free Parking](https://www.amazon.com/High-Cost-Free-Parking-Updated/dp/193236496X), by Donald Shoup. From the description:
 6 | 
 7 | > Planners mandate free parking to alleviate congestion but end up distorting transportation choices, debasing urban design, damaging the economy, and degrading the environment. Ubiquitous free parking helps explain why our cities sprawl on a scale fit more for cars than for people, and why American motor vehicles now consume one-eighth of the world's total oil production. But it doesn't have to be this way.
 8 | 
 9 | [Here's](https://www.nytimes.com/2023/03/07/business/fewer-parking-spots.html) a good recent NYT article on the subject.
10 | Also, check out the [Parking Reform Network](https://parkingreform.org/)!
11 | 
12 | This is a simple Nextjs app hosted on Vercel. I query the [OSM Overpass API](https://overpass-turbo.eu/) to get parking lot geometries.
13 | 
14 | Feel free to contribute to the project.
15 | 
16 | Get in touch with me below.
17 | 
18 | [Github](https://github.com/brandonfcohen1)\
19 | [LinkedIn](https://www.linkedin.com/in/brandonfcohen/)\
20 | [CivilGrid](https://www.civilgrid.com/)
21 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/components/ZoomModal.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react";
 2 | import { Dialog } from "@headlessui/react";
 3 | import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 4 | import { ZoomModalProps } from "@/types/ZoomModalProps";
 5 | 
 6 | export default function Modal({
 7 |   showZoomModal,
 8 |   setShowZoomModal,
 9 | }: ZoomModalProps) {
10 |   const cancelButtonRef = useRef(null);
11 | 
12 |   return (
13 |     <Dialog
14 |       as="div"
15 |       className="relative z-100"
16 |       initialFocus={cancelButtonRef}
17 |       onClose={() => setShowZoomModal(false)}
18 |       open={showZoomModal}
19 |     >
20 |       <div className="fixed inset-0 z-10 overflow-y-auto">
21 |         <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
22 |           <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all">
23 |             <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
24 |               <div className="sm:flex sm:items-start">
25 |                 <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
26 |                   <ExclamationTriangleIcon
27 |                     className="h-6 w-6 text-red-600"
28 |                     aria-hidden="true"
29 |                   />
30 |                 </div>
31 |                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
32 |                   <Dialog.Title
33 |                     as="h3"
34 |                     className="text-base font-semibold leading-6 text-gray-900"
35 |                   >
36 |                     Zoom In
37 |                   </Dialog.Title>
38 |                   <div className="mt-2">
39 |                     <p className="text-sm text-gray-500">
40 |                       Zoom in to view parking data.
41 |                     </p>
42 |                   </div>
43 |                 </div>
44 |               </div>
45 |             </div>
46 |           </Dialog.Panel>
47 |         </div>
48 |       </div>
49 |     </Dialog>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --max-width: 1100px;
  3 |   --border-radius: 12px;
  4 |   --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
  5 |     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
  6 |     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
  7 | 
  8 |   --foreground-rgb: 0, 0, 0;
  9 |   --background-start-rgb: 214, 219, 220;
 10 |   --background-end-rgb: 255, 255, 255;
 11 | 
 12 |   --primary-glow: conic-gradient(
 13 |     from 180deg at 50% 50%,
 14 |     #16abff33 0deg,
 15 |     #0885ff33 55deg,
 16 |     #54d6ff33 120deg,
 17 |     #0071ff33 160deg,
 18 |     transparent 360deg
 19 |   );
 20 |   --secondary-glow: radial-gradient(
 21 |     rgba(255, 255, 255, 1),
 22 |     rgba(255, 255, 255, 0)
 23 |   );
 24 | 
 25 |   --tile-start-rgb: 239, 245, 249;
 26 |   --tile-end-rgb: 228, 232, 233;
 27 |   --tile-border: conic-gradient(
 28 |     #00000080,
 29 |     #00000040,
 30 |     #00000030,
 31 |     #00000020,
 32 |     #00000010,
 33 |     #00000010,
 34 |     #00000080
 35 |   );
 36 | 
 37 |   --callout-rgb: 238, 240, 241;
 38 |   --callout-border-rgb: 172, 175, 176;
 39 |   --card-rgb: 180, 185, 188;
 40 |   --card-border-rgb: 131, 134, 135;
 41 | }
 42 | 
 43 | @media (prefers-color-scheme: dark) {
 44 |   :root {
 45 |     --foreground-rgb: 255, 255, 255;
 46 |     --background-start-rgb: 0, 0, 0;
 47 |     --background-end-rgb: 0, 0, 0;
 48 | 
 49 |     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
 50 |     --secondary-glow: linear-gradient(
 51 |       to bottom right,
 52 |       rgba(1, 65, 255, 0),
 53 |       rgba(1, 65, 255, 0),
 54 |       rgba(1, 65, 255, 0.3)
 55 |     );
 56 | 
 57 |     --tile-start-rgb: 2, 13, 46;
 58 |     --tile-end-rgb: 2, 5, 19;
 59 |     --tile-border: conic-gradient(
 60 |       #ffffff80,
 61 |       #ffffff40,
 62 |       #ffffff30,
 63 |       #ffffff20,
 64 |       #ffffff10,
 65 |       #ffffff10,
 66 |       #ffffff80
 67 |     );
 68 | 
 69 |     --callout-rgb: 20, 20, 20;
 70 |     --callout-border-rgb: 108, 108, 108;
 71 |     --card-rgb: 100, 100, 100;
 72 |     --card-border-rgb: 200, 200, 200;
 73 |   }
 74 | }
 75 | 
 76 | * {
 77 |   box-sizing: border-box;
 78 |   padding: 0;
 79 |   margin: 0;
 80 | }
 81 | 
 82 | html,
 83 | body {
 84 |   max-width: 100vw;
 85 |   overflow-x: hidden;
 86 | }
 87 | 
 88 | body {
 89 |   color: rgb(var(--foreground-rgb));
 90 |   background: linear-gradient(
 91 |       to bottom,
 92 |       transparent,
 93 |       rgb(var(--background-end-rgb))
 94 |     )
 95 |     rgb(var(--background-start-rgb));
 96 | }
 97 | 
 98 | a {
 99 |   color: inherit;
100 |   text-decoration: none;
101 | }
102 | 
103 | @media (prefers-color-scheme: dark) {
104 |   html {
105 |     color-scheme: dark;
106 |   }
107 | }
108 | 
109 | 
110 | @tailwind base;
111 | @tailwind components;
112 | @tailwind utilities;


--------------------------------------------------------------------------------
/src/overpass/overpass.ts:
--------------------------------------------------------------------------------
 1 | import { LngLatBounds } from "mapbox-gl";
 2 | import { FeatureCollection, Position, Feature, Geometry } from "geojson";
 3 | 
 4 | export const overpassQuery = async (
 5 |   bounds: LngLatBounds,
 6 |   restrictParkingTags: { key: string; tag: string }[]
 7 | ) => {
 8 |   const bbox = `${bounds.getSouth()},${bounds.getWest()},${bounds.getNorth()},${bounds.getEast()}`;
 9 | 
10 |   const body = `
11 |   [out:json][bbox:${bbox}];
12 |   (
13 |     way[amenity=parking]${restrictParkingTags
14 |       .map(({ key, tag }) => `[${key}!~"${tag}"]`)
15 |       .join("")};
16 |     relation[amenity=parking]${restrictParkingTags
17 |       .map(({ key, tag }) => `[${key}!~"${tag}"]`)
18 |       .join("")};      
19 |   )->.x1;
20 |   nwr.x1->.result;
21 |   (.result; - .done;)->.result;
22 |   .result out meta geom qt;
23 | `;
24 | 
25 |   const convertToGeoJSON = async (body: string): Promise<FeatureCollection> => {
26 |     const response = await fetch("https://overpass-api.de/api/interpreter", {
27 |       body,
28 |       method: "POST",
29 |     });
30 |     const data = await response.json();
31 | 
32 |     const geojson: FeatureCollection = {
33 |       type: "FeatureCollection",
34 |       features: data.elements.map((element: any): Feature => {
35 |         let geometry: Geometry;
36 | 
37 |         if (element.type === "way") {
38 |           // Single polygon
39 |           geometry = {
40 |             type: "Polygon",
41 |             coordinates: [
42 |               element.geometry.map(
43 |                 (latLngObj: any) => [latLngObj.lon, latLngObj.lat] as Position
44 |               ),
45 |             ],
46 |           };
47 |         } else if (
48 |           element.type === "relation" &&
49 |           element.tags.type === "multipolygon"
50 |         ) {
51 |           // Multipolygon
52 |           const coordinates: Position[][][] = [];
53 |           const outerRings: Position[][] = [];
54 |           const innerRings: Position[][] = [];
55 | 
56 |           element.members.forEach((member: any) => {
57 |             const ring = member.geometry.map(
58 |               (latLngObj: any) => [latLngObj.lon, latLngObj.lat] as Position
59 |             );
60 |             if (member.role === "outer") {
61 |               outerRings.push(ring);
62 |             } else if (member.role === "inner") {
63 |               innerRings.push(ring);
64 |             }
65 |           });
66 | 
67 |           // Assuming each multipolygon only has one outer ring for simplicity
68 |           // More complex handling may be needed for multiple outer rings
69 |           if (outerRings.length > 0) {
70 |             coordinates.push([outerRings[0], ...innerRings]);
71 |           }
72 | 
73 |           geometry = {
74 |             type: "MultiPolygon",
75 |             coordinates: coordinates,
76 |           };
77 |         } else {
78 |           // Default or other geometry types
79 |           geometry = {
80 |             type: "GeometryCollection",
81 |             geometries: [],
82 |           };
83 |         }
84 | 
85 |         return {
86 |           type: "Feature",
87 |           geometry: geometry,
88 |           properties: element.tags,
89 |         };
90 |       }),
91 |     };
92 | 
93 |     return geojson;
94 |   };
95 | 
96 |   const geojson = await convertToGeoJSON(body);
97 |   return geojson;
98 | };
99 | 


--------------------------------------------------------------------------------
/src/pages/[latitude]/[longitude]/[zoom]/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState, useRef } from "react";
  2 | import { useRouter } from "next/router";
  3 | import { LngLatBounds } from "mapbox-gl";
  4 | import { overpassQuery } from "@/overpass/overpass";
  5 | import { FeatureCollection } from "geojson";
  6 | import { Window } from "@/components/Window";
  7 | import { analyzeParking } from "@/utils/analyzeParking";
  8 | import { validateViewport } from "@/utils/validateViewport";
  9 | import { defaultViewport } from "@/config/defaults";
 10 | import { MainMap } from "@/components/MainMap";
 11 | 
 12 | export const MainPage = () => {
 13 |   const [bounds, setBounds] = useState<LngLatBounds>();
 14 |   const [savedBounds, setSavedBounds] = useState<LngLatBounds>();
 15 |   const [loading, setLoading] = useState(false);
 16 |   const [parkingLots, setParkingLots] = useState({
 17 |     type: "FeatureCollection",
 18 |     features: [],
 19 |   } as FeatureCollection);
 20 |   const [parkingArea, setParkingArea] = useState(0);
 21 |   const [windowBoundArea, setWindowBoundArea] = useState(0);
 22 |   const [showZoomModal, setShowZoomModal] = useState(false);
 23 |   const [showInfoModal, setShowInfoModal] = useState(false);
 24 |   const [viewport, setViewport] = useState(defaultViewport);
 25 |   const [error, setError] = useState(false);
 26 |   const [initialized, setInitialized] = useState(false);
 27 | 
 28 |   const router = useRouter();
 29 |   const { latitude, longitude, zoom } = router.query;
 30 | 
 31 |   // Init map location from URL
 32 |   useEffect(() => {
 33 |     if (initialized) return;
 34 | 
 35 |     const isValidViewport = validateViewport(latitude, longitude, zoom);
 36 |     if (!isValidViewport) return;
 37 | 
 38 |     setViewport({
 39 |       latitude: Number(latitude),
 40 |       longitude: Number(longitude),
 41 |       zoom: Number(zoom),
 42 |     });
 43 |     setInitialized(true);
 44 |   }, [initialized, latitude, longitude, setViewport, zoom]);
 45 | 
 46 |   const handleParkingSearch = async (
 47 |     restrictTags: { key: string; tag: string }[]
 48 |   ) => {
 49 |     if (viewport.zoom < 13) {
 50 |       setShowZoomModal(true);
 51 |       return;
 52 |     }
 53 | 
 54 |     if (!bounds) {
 55 |       return;
 56 |     }
 57 | 
 58 |     setLoading(true);
 59 |     setSavedBounds(bounds);
 60 | 
 61 |     try {
 62 |       const parking = await overpassQuery(bounds, restrictTags);
 63 |       setParkingLots(parking);
 64 |       setLoading(false);
 65 | 
 66 |       const { totalParkingArea, boundArea } = analyzeParking({
 67 |         parking,
 68 |         bounds,
 69 |       });
 70 |       setParkingArea(totalParkingArea);
 71 |       setWindowBoundArea(boundArea);
 72 |       setError(false);
 73 |     } catch (e) {
 74 |       setLoading(false);
 75 |       setError(true);
 76 |     }
 77 |   };
 78 | 
 79 |   const downloadData = () => {
 80 |     const parkingData = JSON.stringify(parkingLots);
 81 |     const parkingDataBlob = new Blob([parkingData], {
 82 |       type: "application/json",
 83 |     });
 84 |     const parkingDataUrl = URL.createObjectURL(parkingDataBlob);
 85 |     const link = document.createElement("a");
 86 |     link.href = parkingDataUrl;
 87 |     link.download = "parkingData.json";
 88 |     document.body.appendChild(link);
 89 |     link.click();
 90 |     document.body.removeChild(link);
 91 |   };
 92 | 
 93 |   return (
 94 |     <>
 95 |       <div className="map-page">
 96 |         <Window
 97 |           handleParkingSearch={handleParkingSearch}
 98 |           loading={loading}
 99 |           parkingArea={parkingArea}
100 |           windowBoundArea={windowBoundArea}
101 |           setShowInfoModal={setShowInfoModal}
102 |           error={error}
103 |           downloadData={downloadData}
104 |         />
105 |         {initialized && (
106 |           <MainMap
107 |             showZoomModal={showZoomModal}
108 |             setShowZoomModal={setShowZoomModal}
109 |             showInfoModal={showInfoModal}
110 |             setShowInfoModal={setShowInfoModal}
111 |             loading={loading}
112 |             parkingLots={parkingLots}
113 |             savedBounds={savedBounds}
114 |             setBounds={setBounds}
115 |             viewport={viewport}
116 |             setViewport={setViewport}
117 |           />
118 |         )}
119 |       </div>
120 |     </>
121 |   );
122 | };
123 | 
124 | export default MainPage;
125 | 


--------------------------------------------------------------------------------
/src/components/MainMap.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import { useRouter } from "next/router";
  3 | import mapboxgl from "mapbox-gl";
  4 | import Map, { Source, Layer, GeolocateControl } from "react-map-gl";
  5 | import InfoModal from "./InfoModal";
  6 | import LoadingOverlay from "./LoadingOverlay";
  7 | import ZoomModal from "./ZoomModal";
  8 | import { lngLatBoundsToPolygon } from "@/utils/latLngBoundsToPolygon";
  9 | import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
 10 | import { MapProps } from "@/types/MapProps";
 11 | import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
 12 | 
 13 | mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN || "";
 14 | 
 15 | export const MainMap = ({
 16 |   parkingLots,
 17 |   loading,
 18 |   savedBounds,
 19 |   showZoomModal,
 20 |   showInfoModal,
 21 |   setShowZoomModal,
 22 |   setShowInfoModal,
 23 |   setBounds,
 24 |   viewport,
 25 |   setViewport,
 26 | }: MapProps) => {
 27 |   const geocoderContainerRef = useRef<any>(null);
 28 |   const geolocateControlRef = useRef<any>(null);
 29 |   const [mapInstance, setMapInstance] = useState<any>();
 30 | 
 31 |   const router = useRouter();
 32 | 
 33 |   useEffect(() => {
 34 |     if (mapInstance) {
 35 |       const center = mapInstance.getCenter();
 36 |       const geocoder = new MapboxGeocoder({
 37 |         accessToken: mapboxgl.accessToken,
 38 |         mapboxgl: mapboxgl,
 39 |         marker: false,
 40 |         proximity: {
 41 |           longitude: center.lng,
 42 |           latitude: center.lat,
 43 |         },
 44 |       });
 45 |       geocoder.addTo(geocoderContainerRef.current);
 46 | 
 47 |       geocoder.on("result", (e) => {
 48 |         mapInstance.flyTo({
 49 |           center: e.result.center,
 50 |           zoom: 14,
 51 |         });
 52 |       });
 53 |     }
 54 |   }, [mapInstance]);
 55 | 
 56 |   const updateURL = (latitude: number, longitude: number, zoom: number) => {
 57 |     router.replace(
 58 |       `/${latitude.toFixed(7)}/${longitude.toFixed(7)}/${zoom.toFixed(2)}`
 59 |     );
 60 |   };
 61 | 
 62 |   const saveLocation = (latitude: number, longitude: number, zoom: number) => {
 63 |     localStorage.setItem("latitude", latitude.toFixed(7));
 64 |     localStorage.setItem("longitude", longitude.toFixed(7));
 65 |     localStorage.setItem("zoom", zoom.toFixed(2));
 66 |   };
 67 | 
 68 |   return (
 69 |     <div className="map-container">
 70 |       {loading && <LoadingOverlay />}
 71 |       {showZoomModal && (
 72 |         <ZoomModal
 73 |           showZoomModal={showZoomModal}
 74 |           setShowZoomModal={setShowZoomModal}
 75 |         />
 76 |       )}
 77 |       {showInfoModal && (
 78 |         <InfoModal
 79 |           showInfoModal={showInfoModal}
 80 |           setShowInfoModal={setShowInfoModal}
 81 |         />
 82 |       )}
 83 | 
 84 |       <Map
 85 |         initialViewState={viewport}
 86 |         mapStyle="mapbox://styles/mapbox/streets-v11"
 87 |         onMoveEnd={async (e) => {
 88 |           setBounds(e.target.getBounds());
 89 |           const latitude = e.target.getCenter().lat;
 90 |           const longitude = e.target.getCenter().lng;
 91 |           const zoom = e.target.getZoom();
 92 |           setViewport({ latitude, longitude, zoom });
 93 |           updateURL(latitude, longitude, zoom);
 94 |           saveLocation(latitude, longitude, zoom);
 95 |         }}
 96 |         onRender={(e) => setBounds(e.target.getBounds())}
 97 |         onLoad={(e) => setMapInstance(e.target)}
 98 |       >
 99 |         <div className="z-1 absolute bottom-4 left-4">
100 |           <GeolocateControl
101 |             ref={geolocateControlRef}
102 |             positionOptions={{ enableHighAccuracy: true }}
103 |             trackUserLocation={true}
104 |             onGeolocate={(pos) => {
105 |               setViewport({
106 |                 ...viewport,
107 |                 latitude: pos.coords.latitude,
108 |                 longitude: pos.coords.longitude,
109 |               });
110 |             }}
111 |           />
112 |         </div>
113 |         <div ref={geocoderContainerRef} className="z-1 fixed top-2 right-12" />
114 |         <Source type="geojson" data={parkingLots}>
115 |           <Layer
116 |             id="parkingData"
117 |             type="fill"
118 |             paint={{
119 |               "fill-color": "red",
120 |               "fill-opacity": 0.8,
121 |               "fill-outline-color": "black",
122 |             }}
123 |           />
124 |         </Source>
125 |         {savedBounds && (
126 |           <Source
127 |             id="bounds-polygon"
128 |             type="geojson"
129 |             data={lngLatBoundsToPolygon(savedBounds)}
130 |           >
131 |             <Layer
132 |               id="bounds-polygon-layer"
133 |               type="line"
134 |               paint={{
135 |                 "line-color": "blue",
136 |                 "line-width": 2,
137 |               }}
138 |             />
139 |           </Source>
140 |         )}
141 |       </Map>
142 |     </div>
143 |   );
144 | };
145 | 


--------------------------------------------------------------------------------
/src/components/Window.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Disclosure } from "@headlessui/react";
  3 | import { ChevronDownIcon } from "@heroicons/react/20/solid";
  4 | import { InformationCircleIcon } from "@heroicons/react/24/outline";
  5 | import { ParkingSearchProps } from "@/types/ParkingSearchProps";
  6 | import { CheckBox } from "@/components/CheckBox";
  7 | 
  8 | export const Window = ({
  9 |   handleParkingSearch,
 10 |   loading,
 11 |   parkingArea,
 12 |   windowBoundArea,
 13 |   setShowInfoModal,
 14 |   error,
 15 |   downloadData,
 16 | }: ParkingSearchProps) => {
 17 |   const [excludeStreetSide, setExcludeStreetSide] = useState(false);
 18 |   const [excludePrivate, setExcludePrivate] = useState(false);
 19 |   const getRestrictedTags = () => {
 20 |     const restrictedTags = [{ key: "parking", tag: "underground" }];
 21 |     if (excludeStreetSide)
 22 |       restrictedTags.push({ key: "parking", tag: "street_side" });
 23 |     if (excludePrivate) restrictedTags.push({ key: "access", tag: "private" });
 24 |     return restrictedTags;
 25 |   };
 26 | 
 27 |   return (
 28 |     <div className="fixed left-0 py-1 px-1 z-10 bottom-0 md:top-0">
 29 |       <div className="bg-white p-4 rounded-lg shadow-md w-full max-w-md w-80">
 30 |         <h2 className="text-2xl font-semibold mb-4 text-blue-500">
 31 |           <div style={{ display: "flex", alignItems: "center" }}>
 32 |             <span style={{ marginRight: "0.5rem" }}>OpenParkingMap</span>
 33 |             <div
 34 |               onClick={() => setShowInfoModal(true)}
 35 |               className="cursor-pointer"
 36 |             >
 37 |               <InformationCircleIcon className="h-6 w-6 text-blue-500" />
 38 |             </div>
 39 |           </div>
 40 |         </h2>
 41 | 
 42 |         {loading ? (
 43 |           <div className="bg-blue-500 text-white px-4 py-2 rounded-md mb-4">
 44 |             loading...
 45 |           </div>
 46 |         ) : (
 47 |           <>
 48 |             <div
 49 |               className="bg-blue-500 text-white px-4 py-2 rounded-md mb-4 cursor-pointer"
 50 |               onClick={() => handleParkingSearch(getRestrictedTags())}
 51 |             >
 52 |               Show At-Grade Parking
 53 |             </div>
 54 | 
 55 |             <CheckBox
 56 |               isChecked={excludeStreetSide}
 57 |               setIsChecked={setExcludeStreetSide}
 58 |             >
 59 |               Exclude street-side parking
 60 |             </CheckBox>
 61 | 
 62 |             <CheckBox
 63 |               isChecked={excludePrivate}
 64 |               setIsChecked={setExcludePrivate}
 65 |             >
 66 |               Exclude private parking
 67 |             </CheckBox>
 68 |           </>
 69 |         )}
 70 | 
 71 |         {parkingArea > 0 && (
 72 |           <Disclosure>
 73 |             {({ open }) => (
 74 |               <>
 75 |                 <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-blue-500 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75">
 76 |                   <span>Details</span>
 77 |                   <ChevronDownIcon
 78 |                     className={`${
 79 |                       open ? "transform rotate-180" : ""
 80 |                     } w-5 h-5 text-blue-500`}
 81 |                   />
 82 |                 </Disclosure.Button>
 83 |                 <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">
 84 |                   <b>At-Grade Parking:</b> {parkingArea.toFixed(1)} ac
 85 |                   <br />
 86 |                   <b>Area in Window:</b> {windowBoundArea.toFixed(1)} ac
 87 |                   <br />
 88 |                   <b>% of window: </b>
 89 |                   {((parkingArea / windowBoundArea) * 100).toFixed(1)} %
 90 |                   <br />
 91 |                   <br />
 92 |                   <Disclosure.Button
 93 |                     className="flex justify-between px-4 py-2 text-sm font-medium text-left text-blue-500 bg-gray-100 rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75"
 94 |                     onClick={downloadData}
 95 |                   >
 96 |                     Download GeoJSON
 97 |                   </Disclosure.Button>
 98 |                   <br />
 99 |                   <div className="max-w-sm w-44 text-xs italic">
100 |                     {`Data is pulled from OpenStreetMap. `}
101 |                     <a
102 |                       onClick={() => setShowInfoModal(true)}
103 |                       className="text-blue-600 hover:text-blue-800 cursor-pointer"
104 |                     >
105 |                       Details here.
106 |                     </a>
107 |                   </div>
108 |                 </Disclosure.Panel>
109 |               </>
110 |             )}
111 |           </Disclosure>
112 |         )}
113 |         {error && (
114 |           <div className="text-red-500">
115 |             Error loading data. Please try again.
116 |           </div>
117 |         )}
118 |       </div>
119 |     </div>
120 |   );
121 | };
122 | 


--------------------------------------------------------------------------------
/src/components/InfoModal.tsx:
--------------------------------------------------------------------------------
  1 | import { useRef } from "react";
  2 | import { Dialog } from "@headlessui/react";
  3 | import { EnvelopeIcon } from "@heroicons/react/24/outline";
  4 | import { InfoModalProps } from "@/types/InfoModalProps";
  5 | import { Space } from "@/utils/Space";
  6 | 
  7 | import React from "react";
  8 | 
  9 | const GithubIcon = (props: any) => (
 10 |   <svg
 11 |     xmlns="http://www.w3.org/2000/svg"
 12 |     viewBox="0 0 24 24"
 13 |     fill="currentColor"
 14 |     width="24"
 15 |     height="24"
 16 |     {...props}
 17 |   >
 18 |     <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.604-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23A11.636 11.636 0 0 1 12 5.067c1.02.004 2.04.137 3-.407 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.77.84 1.235 1.91 1.235 3.22 0 4.61-2.805 5.625-5.475 5.925.42.36.81 1.096.81 2.22 0 1.604-.015 2.896-.015 3.286 0 .32.21.694.825.577C20.565 22.097 24 17.6 24 12.297c0-6.627-5.373-12-12-12" />
 19 |   </svg>
 20 | );
 21 | 
 22 | const LinkedinIcon = (props: any) => (
 23 |   <svg
 24 |     xmlns="http://www.w3.org/2000/svg"
 25 |     viewBox="0 0 24 24"
 26 |     width="24"
 27 |     height="24"
 28 |     fill="currentColor"
 29 |   >
 30 |     <path d="M4.98 3.5C3.79 3.5 3 4.29 3 5.5s.79 2 1.98 2C6.21 7.5 7 6.71 7 5.5S6.21 3.5 4.98 3.5zM4 12.9h3V21H4v-8.1zM9 12.9h3v1.548c.502-.828 1.838-2.029 3.96-2.029 4.22 0 5 2.936 5 6.758V21H18v-7.274c0-1.845-.396-3.267-2.63-3.267-1.398 0-2.37.994-2.768 1.845-.143.35-.18.84-.18 1.331V21H9V12.9z" />
 31 |   </svg>
 32 | );
 33 | 
 34 | const Link = ({ href, children }: { href: string; children: any }) => (
 35 |   <a
 36 |     className="text-blue-600 hover:text-blue-800"
 37 |     href={href}
 38 |     target="_blank"
 39 |     rel="noreferrer"
 40 |   >
 41 |     {children}
 42 |   </a>
 43 | );
 44 | 
 45 | export default function InfoModal({
 46 |   showInfoModal,
 47 |   setShowInfoModal,
 48 | }: InfoModalProps) {
 49 |   const cancelButtonRef = useRef(null);
 50 | 
 51 |   return (
 52 |     <Dialog
 53 |       as="div"
 54 |       className="relative z-100"
 55 |       initialFocus={cancelButtonRef}
 56 |       onClose={() => setShowInfoModal(false)}
 57 |       open={showInfoModal}
 58 |     >
 59 |       <div className="fixed inset-0 z-100 overflow-y-auto">
 60 |         <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
 61 |           <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
 62 |             <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 63 |               <div className="sm:flex sm:items-start">
 64 |                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
 65 |                   <Dialog.Title
 66 |                     as="h3"
 67 |                     className="text-base font-semibold leading-6 text-gray-900"
 68 |                   >
 69 |                     OpenParkingMap
 70 |                   </Dialog.Title>
 71 |                   <div className="mt-2">
 72 |                     <div className="text-sm text-gray-500">
 73 |                       {`OpenParkingMap is a tool for visualizing parking lots in your area using data from OpenStreetMap.`}
 74 |                       <Space />
 75 |                       {` This project was inspired by reading `}
 76 |                       <Link href="https://www.amazon.com/High-Cost-Free-Parking-Updated/dp/193236496X">
 77 |                         {` The High Cost of Free Parking`}
 78 |                       </Link>
 79 |                       {`, by Donald Shoup. From the description:`}
 80 |                       <Space />
 81 |                       <blockquote className="pl-4 border-l-2 border-gray-400">
 82 |                         {`Planners mandate free parking to alleviate
 83 |                             congestion but end up distorting transportation
 84 |                             choices, debasing urban design, damaging the
 85 |                             economy, and degrading the environment. Ubiquitous
 86 |                             free parking helps explain why our cities sprawl on
 87 |                             a scale fit more for cars than for people, and why
 88 |                             American motor vehicles now consume one-eighth of
 89 |                             the world's total oil production. But it doesn't
 90 |                             have to be this way.`}
 91 |                       </blockquote>
 92 |                       <br />
 93 |                       <Link href="https://www.nytimes.com/2023/03/07/business/fewer-parking-spots.html">
 94 |                         {`Here's`}
 95 |                       </Link>{" "}
 96 |                       {`a good recent NYT article on the subject. Also, check out `}
 97 |                       <a
 98 |                         className="text-blue-600 hover:text-blue-800"
 99 |                         href="https://parkingreform.org/"
100 |                         target="_blank"
101 |                         rel="noreferrer noopener"
102 |                       ></a>
103 |                       <Link href="https://parkingreform.org/">
104 |                         {`The Parking Reform Network`}
105 |                       </Link>
106 |                       {"."}
107 |                       <Space />
108 |                       <Link href="https://docs.google.com/document/d/1zkdJOf0GWJPLXuNRX8FdMbTHkyBArEOQh3CIuAtTeGM">{`Here`}</Link>
109 |                       {` is a resource from Parking Report Network that gives instructions on how to add parking lots to OpenStreetMap.`}
110 |                       <Space />
111 |                       {`Get in touch with me below.`}
112 |                     </div>
113 |                   </div>
114 |                 </div>
115 |               </div>
116 |             </div>
117 |             <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
118 |               <Link href="mailto:brandon@openparkingmap.com">
119 |                 <div className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
120 |                   <EnvelopeIcon className="w-5 h-5" />
121 |                 </div>
122 |               </Link>
123 |               <Link href="https://github.com/brandonfcohen1/openparkingmap/">
124 |                 <div className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 mr-2">
125 |                   <GithubIcon className="w-5 h-5" />
126 |                 </div>
127 |               </Link>
128 |             </div>
129 |           </Dialog.Panel>
130 |         </div>
131 |       </div>
132 |     </Dialog>
133 |   );
134 | }
135 | 


--------------------------------------------------------------------------------