날씨 정보API 추가

.env.development

@@ -5,6 +5,9 @@ REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
 # Naver Search API HOST
 NAVER_SEARCH_API_HOST = https://openapi.naver.com/v1/search/local.json
 
+#windy API KEY
+REACT_WINDY_KEY = wf6Lkn1MAtqcgyW78xbceFHBz6ccsUo8
+
 # API KEY
 NAVER_APP_CLIENT_KEY = WGEct3bJhQC0pyMsP_GK
 NAVER_APP_SECRET_KEY = Q4K4OtUYol

.env.production

@@ -5,6 +5,10 @@ REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
 # Naver Search API HOST
 NAVER_SEARCH_API_HOST = https://openapi.naver.com/v1/search/local.json
 
+#windy API KEY
+REACT_WINDY_KEY = 8ynJ7tneZjmRxLmHQPGaDPGsGabgQhkC
+
 # API KEY
 NAVER_APP_CLIENT_KEY = WGEct3bJhQC0pyMsP_GK
-NAVER_APP_SECRET_KEY = Q4K4OtUYol
+NAVER_APP_SECRET_KEY = Q4K4OtUYol
+

public/index.html

@@ -12,6 +12,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <script
       type="text/javascript"
@@ -22,6 +23,8 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/jsts/2.0.3/jsts.min.js"
     ></script>
 
+    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
+    <script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
     <!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDKCsI8cbzgi4es3xCUIhElUm6NRM73QuI" ></script> -->
 
     <!-- <script
@@ -34,7 +37,7 @@
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKCsI8cbzgi4es3xCUIhElUm6NRM73QuI&callback=initMap"
     ></script> -->
 
-<!--   
+    <!--   
     <script
       type="text/javascript"
       src="http://maps.googleapis.com/maps/api/js"

src/@core/layouts/components/navbar/NavbarUser.js

@@ -92,6 +92,17 @@ const NavbarUser = props => {
             드론 관제 시스템
           </NavLink>
         </NavItem>
+        <NavItem>
+          <NavLink
+            onClick={() => window.open('/weather/info/index', '_blank')}
+            // active={active === '2'}
+            // onClick={() => {
+            //   toggle('2')
+            // }}
+          >
+            날씨정보
+          </NavLink>
+        </NavItem>
         {/* <NavItem>
           <NavLink
             onClick={() => window.open('/testDraw', '_blank')}
@@ -103,6 +114,7 @@ const NavbarUser = props => {
             버퍼 테스트
           </NavLink>
         </NavItem> */}
+        
       </Nav>
       {/* <div className='bookmark-wrapper d-flex align-items-center'>
         <NavItem className='d-none d-lg-block'>

src/configs/constants.js

@@ -9,6 +9,8 @@ export const IMG_PATH = process.env.REACT_APP_IMAGE_HOST;
 export const NAVER_APP_CLIENT_KEY = process.env.NAVER_APP_CLIENT_KEY;
 export const NAVER_APP_SECRET_KEY = process.env.NAVER_APP_SECRET_KEY;
 
+// WINDY API KEY
+export const WINDY_KEY = process.env.REACT_WINDY_KEY;
 // 통신 코드
 export const HTTP_STATUS_CODE = {
   OK: '00000'

src/router/routes/RouteWeather.js

@@ -0,0 +1,18 @@
+import { lazy } from 'react';
+
+const RouteWeather = [
+ 
+  {
+    path: '/weather/info/index',
+    component: lazy(() =>
+      import('../../views/weather/WeatherView')
+    ),
+    layout: 'BlankLayout'
+    // meta: {
+    //   open: '/analysis/history/list'
+    //   // naveLink: '/analysis/history/detail'
+    // }
+  }
+];
+
+export default RouteWeather;

src/router/routes/index.js

@@ -4,6 +4,7 @@ import RouteAnalysis from './RouteAnalysis';
 import RouteBasis from './RouteBasis';
 import RouteDashboard from './RouteDashboard';
 import RouteSystem from './RouteSystem';
+import RouteWeather from './RouteWeather';
 
 // ** Document title
 const TemplateTitle = '%s - Dron Control System';
@@ -18,6 +19,7 @@ const Routes = [
   ...RouteAnalysis,
   ...RouteBasis,
   ...RouteSystem,
+  ...RouteWeather,
   {
     path: '/home',
     component: lazy(() => import('../../views/Home'))

src/views/weather/WeatherView.js

@@ -0,0 +1,36 @@
+import {WINDY_KEY} from '../../configs/constants'
+export const WeatherView = () => {
+    const options = {
+        // Required: API key
+        key:WINDY_KEY, // REPLACE WITH YOUR KEY !!!
+
+        // Put additional console output
+
+        // Optional: Initial state of the map
+        lat: 37.12,
+        lon: 130.11,
+        zoom: 7,
+    };
+
+    //Initialize Windy API
+    windyInit(options, windyAPI => {
+        // windyAPI is ready, and contain 'map', 'store',
+        // 'picker' and other usefull stuff
+        // const { map } = windyAPI;
+        // .map is instance of Leaflet map
+
+        // L.popup()
+        //     .setLatLng([37.12, 130.11])
+        //     .setContent('Hello World')
+        //     .openOn(map);
+
+    });
+
+
+    return (
+        <>
+            <iframe style={{ width: '100%', height: '99vh' }} src="https://embed.windy.com/embed2.html?lat=37.549&lon=126.658&detailLat=37.549&detailLon=126.658&zoom=5&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
+        </>
+    )
+}
+export default WeatherView;