Weitzman-MUSA-JavaScript · yjmark · Oct 25, 2024 · Oct 27, 2024 · Oct 28, 2024 · Oct 28, 2024
diff --git a/Jun_Youngsang/css/style.css b/Jun_Youngsang/css/style.css
@@ -0,0 +1,193 @@
+
+.map-overlay {
+    position: absolute;
+    width: 30%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    font:
+        12px/20px 'Open Sans',
+        Arial,
+        Helvetica,
+        sans-serif;
+    background-color: #efefef;
+    max-height: 100%;
+
+    overflow: hidden;
+}
+
+#map {
+    position: absolute;
+    left: 30%;
+    top: 0;
+    bottom: 0;
+    min-width: 70%;
+}
+
+
+
+.mapboxgl-popup {
+    max-width: 400px;
+    font:
+        12px/20px 'Open Sans',
+        Arial,
+        Helvetica,
+        sans-serif;
+}
+
+.map-overlay fieldset {
+    display: none;
+    background: #ddd;
+    border: none;
+    padding: 10px;
+    margin: 0;
+}
+
+.map-overlay .geocoder {
+    display: block;
+    background: #ddd;
+    border: none;
+    padding: 10px;
+    margin: 0;
+    width: 100%;
+    left: 0;
+    top: 0;
+}
+
+.map-overlay .mapboxgl-ctrl-geocoder {
+    max-width: 100%;
+}
+
+.map-overlay input {
+    display: block;
+    border: none;
+    width: 100%;
+    border-radius: 3px;
+    padding: 10px;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.map-overlay .listing {
+    overflow: auto;
+
+    max-height: 30%;
+}
+
+.map-overlay .listing > * {
+    display: block;
+    padding: 5px 10px;
+    margin: 0;
+}
+
+.map-overlay .listing a {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    color: #003764;
+    text-decoration: none;
+}
+
+.map-overlay .listing a:last-child {
+    border: none;
+}
+
+.map-overlay .listing a:hover {
+    background: #f0f0f0;
+}
+
+.map-overlay .budget {
+    position: absolute;
+    overflow: visible;
+    padding: 10px;
+    top: 50%;
+    width: 100%;
+    height: 10%;
+}
+
+.group-toggle { 
+    margin-top: 30px; 
+    position: absolute; 
+    top: 0; 
+    left: 0; 
+    background: #f0f0f0; 
+    padding: 0; 
+
+    height: 100%;
+    z-index: 1; 
+}
+
+.toggle-button {
+    margin: 5px;
+    background-color: #ddd; /* 배경색 */
+    color: #003764; /* 텍스트 색상 */
+    padding: 5px 10px; /* 내부 여백 */
+    font-size: 12px; /* 폰트 크기 */
+    border: none; /* 테두리 제거 */
+    border-radius: 5px; /* 모서리 둥글게 */
+    cursor: pointer; /* 마우스 커서 변경 */
+    transition: background-color 0.3s; /* 배경색 전환 애니메이션 */
+    font-family: 'Open Sans', sans-serif;
+}
+
+/* 버튼 호버 효과 */
+.toggle-button:hover {
+    background-color: #ccc; /* 호버 시 배경색 변경 */
+}
+
+.map-overlay .backgroundmap {
+    position: absolute;
+    overflow: hidden;
+    padding: 10px;
+    top: 75%;
+    width: 100%;
+    max-height: 30%;
+    background: #f0f0f0; 
+    font-family: 'Open Sans', sans-serif;  
+    display: flex;
+    flex-direction: column;
+}
+
+/* 라벨 스타일 */
+.mapmoderadio {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 12px;
+    margin-bottom: 10px;
+}
+
+/* 기본 라디오 버튼 숨김 */
+.mapmoderadio input[type="radio"] {
+    display: none;
+}
+
+/* 커스텀 라디오 마크 스타일 */
+.mapmoderamark {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    background-color: #ccc;
+    border-radius: 50%;
+    margin-right: 10px;
+    transition: background-color 0.3s;
+}
+
+/* 체크된 상태에서 내부 마크 표시 */
+.mapmoderamark::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 12px;
+    width: 12px;
+    background-color: #003764;
+    border-radius: 50%;
+    display: none; /* 초기 상태에서 숨김 */
+}
+
+/* 체크된 상태에서 커스텀 라디오 마크 스타일 변경 */
+.mapmoderadio input[type="radio"]:checked + .mapmoderamark::after {
+    display: block; /* 체크된 상태에서 내부 마크 표시 */
+}
+
+
diff --git a/Jun_Youngsang/data/layers/NTAD_Military_Bases_updated_v2.geojson b/Jun_Youngsang/data/layers/NTAD_Military_Bases_updated_v2.geojson
diff --git a/Jun_Youngsang/data/layers/updated_geojson_file.geojson b/Jun_Youngsang/data/layers/updated_geojson_file.geojson
diff --git a/Jun_Youngsang/eslint.config.js b/Jun_Youngsang/eslint.config.js
@@ -0,0 +1,14 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+export default [
+  {languageOptions: { 
+    globals: {
+    ...globals.browser,
+    mapboxgl: 'readonly',
+    MapboxGeocoder: 'readonly',
+  },
+  },},
+  pluginJs.configs.recommended,
+];
diff --git a/Jun_Youngsang/index.html b/Jun_Youngsang/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no" />
+    <title>Defense Board By Youngsang Jun</title>
+    <link rel="stylesheet" href="css/style.css">
+
+    <!-- Add the Open Sans font from Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Open%20Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
+
+    <!-- Add the Mapbox GL JS CSS and JS files -->
+    <link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
+</head>
+
+<body>
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/mapbox-gl-geocoder.min.js"></script>
+    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/mapbox-gl-geocoder.css" type="text/css" />
+    <main>
+
+        <section class="map-section">
+            <div class="map" id="map">Map</div>    
+        </section> 
+        <div class="map-overlay">
+            <div id="geocoder" class="geocoder">Find Locations</div>
+
+            <fieldset>
+                Military Installations
+                <input id="feature-filter" type="text" placeholder="Filter results by base name">
+            </fieldset>
+            <div id="feature-listing" class="listing"></div>
+            <div id="budget-info" class="budget">Budget Information
+                <div class="group-toggle" id="groupToggleContainer"></div> 
+            </div>
+
+            <div id="backgroundmap" class="backgroundmap">Map Mode
+                <label class="mapmoderadio">
+                    <input id="satellite-streets-v12" type="radio" name="rtoggle" value="satellite" checked>
+                    <span class="mapmoderamark"></span>
+                    Satellite streets
+                </label>
+
+                <label class="mapmoderadio">
+                    <input id="light-v11" type="radio" name="rtoggle" value="light">
+                    <span class="mapmoderamark"></span>
+                    Light
+                </label>
+
+                <label class="mapmoderadio">
+                    <input id="dark-v11" type="radio" name="rtoggle" value="dark">
+                    <span class="mapmoderamark"></span>
+                    Dark
+                </label>
+
+                <label class="mapmoderadio">
+                    <input id="streets-v12" type="radio" name="rtoggle" value="streets">
+                    <span class="mapmoderamark"></span>
+                    Streets
+                </label>
+
+                <label class="mapmoderadio">
+                    <input id="outdoors-v12" type="radio" name="rtoggle" value="outdoors">
+                    <span class="mapmoderamark"></span>
+                    Outdoors
+                </label>
+            </div>
+        </div>
+    </main>
+
+        <script type="module" src="js/main.js"></script>
+    </body>
+</html>
diff --git a/Jun_Youngsang/js/geocoder.js b/Jun_Youngsang/js/geocoder.js
@@ -0,0 +1,13 @@
+function setupGeocoder(map) {
+  // Add the control to the map.
+  const geocoder = new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    language: 'en-US',
+    countries: 'us',
+    mapboxgl: mapboxgl,
+  });
+
+  document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
+}
+
+export { setupGeocoder };