QtPyWeatherApp/wind_map.html at main · SomnathDas/QtPyWeatherApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
    <head>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
        />
        <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>
        <style>
            #windy {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="windy"></div>

        <script type="text/javascript" src="data.json"></script>
        <script>
        	let myData = JSON.parse(data)
		    console.log(data)

		        const options = {
		        // Required: API key
		        key: myData[0].apikey, // REPLACE WITH YOUR KEY !!!

		        // Put additional console output
		        verbose: true,

		        // Optional: Initial state of the map
			    lat: 35.6895,
			    lon: 139.6917,
			    zoom: 12,
		};

		// 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
		    reqLatitude = myData[0].latitude
		    reqLongitude = myData[0].longitude
		    arr = [reqLatitude, reqLongitude]
		    L.popup()
		        .setLatLng(arr)
		        .setContent('Current Location')
		        .openOn(map);
		    console.log([myData[0].latitude, myData[0].longitude])
		});
        </script>
    </body>
</html>