Skip to content

Commit 893c247

Browse files
author
Marek Dorda
committed
Split javascript and html apart
1 parent 0459099 commit 893c247

File tree

18 files changed

+408
-521
lines changed

18 files changed

+408
-521
lines changed

‎.eslintrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"globals": {
3+
"windyInit": true
4+
}
5+
}

‎.gitigonore

-1
This file was deleted.

‎README.md

+13-76
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,24 @@
11
![](assets/intro4.gif)
22

3-
# Windy API v4
4-
Windy API v4, also known as as Windy Leaflet Plugin, is simple to use javascript API based on [Leaflet](https://leafletjs.com/) and technology, that powers [Windy.com](https://www.windy.com).
3+
# Windy JavaScript API
54

6-
Windy API uses Leaflet version `1.4.x`.
5+
Windy JavaScript API is a simple-to-use library based on [Leaflet](https://leafletjs.com/) **1.4.x**. It allows you to use everything Leaflet or JavaScript offers along with the Windy map visualizations we are using at [Windy.com](https://www.windy.com/).
76

8-
## Upgrade from previous version of an API
9-
Windy API v4.5 was based on `Leaflet 0.7.7`. We hope that transition to the new version of Leaflet will be smooth. Both APIs are basically the same.
7+
This repository contains only Windy JavaScript API examples, check [https://api.windy.com/](https://api.windy.com/) for more info.
108

11-
Just replace `<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>` with `<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>`
12-
in your HTML code and you should be done.
13-
14-
## Getting started
15-
Obtain your [Windy API key here](https://api4.windy.com/api-key/) and check out our tutorials. You will handle our API in less than 20 minutes!
9+
Do you think any particular example or tutorial is lacking? PR is more than welcome!
1610

1711
## Examples
18-
- [Hello World](https://api4.windy.com/examples/hello-world/)
19-
- [Change Windy parameters](https://api4.windy.com/examples/parameters/)
20-
- [Observe what is happening inside](https://api4.windy.com/examples/bcast/)
21-
- [Mess with User Interface](https://api4.windy.com/examples/navigation/)
22-
- [Change units](https://api4.windy.com/examples/metrics/)
23-
- [Use weather picker](https://api4.windy.com/examples/picker/)
24-
- [Boat tracker](https://api4.windy.com/examples/boat-tracker/)
12+
- [Hello World](examples/hello-world/)
13+
- [Change Windy parameters](examples/parameters/)
14+
- [Observe what is happening inside](examples/bcast/)
15+
- [Mess with User Interface](examples/navigation/)
16+
- [Change units](examples/metrics/)
17+
- [Use weather picker](examples/picker/)
18+
- [Boat tracker](examples/boat-tracker/)
2519

2620
## Other resources
27-
- [Manage your API key](https://api4.windy.com/api-key/)
21+
- [Windy API homepage](https://api.windy.com/)
22+
- [Windy API community discussion](https://community.windy.com/category/12/windy-api)
2823
- [Leaflet documentation](https://leafletjs.com/)
2924
- [Leaflet Plugins](https://leafletjs.com/plugins.html)
30-
- [Windy API community discussion](https://community.windy.com/category/12/windy-api)
31-
32-
## Things to remember
33-
- While providing coordinates to Leaflet can be done via object `{ lat, lng }` with **lng** property, Windy supports `{ lat, lon }` with **lon** property.
34-
- There can be only one instance of Windy Map on a page, but you can use multiple instances of Leaflet map on the same page.
35-
- All classes of `leaflet.css` are nested inside `#windy` selector (not to interfere with your own CSS), so if you want to use another instance of Leaflet map on the same page load `leaflet.css` yourself once more.
36-
- Windy uses a lot of global defined CSS classes and id selectors, with nice names like `#bottom, #logo` etc. Windy also puts a lot of CSS classes to `body` tag dynamically. If design of Windy Map is broken, check your CSS and rename your id and selectors please.
37-
- Windy API v4 does not use cookies
38-
- Windy API v4 heavily uses `localStorage`. Unintentional or intentional modifications of our items can lead to instability of Windy API.
39-
- Using undocumented functions of Windy engine can break your app, when we decide to upgrade our codes. If you miss something, rather [let us know here](https://community.windy.com/category/12/windy-api) and ask us to document and expose other features.
40-
41-
## Conditions of use
42-
### Free version
43-
Windy API is free and with unrestricted traffic usage, but offers only the `gfs` forecast model and only `wind`,`rain`,`clouds`, `temperature`, `pressure`,`currents` and `waves` layer. The Windy logo MUST remain as it is, i.e. clickable and without modification. However, you can move the Windy logo wherever you want within the Windy map. For the free version of the API, we reserve the right to 1) display advertisement inside the Windy map, 2) place "Download Windy App" message from time to time on mobile devices, or 3) discontinue free version of Windy API v4 at any time without prior notice
44-
45-
### Paid version
46-
For serious work, we recommend to use the paid version that contains `iconEu`, `nam` and `gfs` models and the most of all `layers` and also `isolines`. For less than 5000 daily requests there is no advertising in paid version - if you exceed 5000 requests in a day, advertising will be displayed. It costs only 720USD per year (ordered via [this form](https://pipedrivewebforms.com/form/29db1a578673fdebbafc5c5c5816e1eb5803983) and paid annually via invoice). Developers of paid version can decrease opacity of Windy logo to 0.8 (however logo must remain clickable) and usage limit is average of 5.000 Unique Visitors a day (measured by Google Analytics). For permission to a higher quota, please contact us.
47-
48-
We are not allowed to provide ECMWF data to third parties, and therefore we cannot provide layers based on this data model (`thunder`, `deg0`, `cloudtop`, `cbase`, `visibility`, `swell3`, `snowcover`, `ozone`, `sst` and `cape`). Please note that some layers are based on multiple forecast models. Such layers are available, however, without ECMWF forecasts (for example: `waves`, `wind waves` or `swell` where the **Wavewatch 3** model does not cover the Mediterranean Sea and other areas). We also cannot provide you with the `radar` layer. Everything else is included in the paid version. Please check the map for yourself at [Windy.com](https://www.windy.com/) and see if it meets your expectations.
49-
50-
Please bear in mind, that Windy does not provide any individual support even for the paid version. If you have any concerns, please report it to the relevant subsection on [Windy Community](https://community.windy.com/category/12/windy-api-v4). Topics there are regularly checked by our developers.
51-
52-
### Non-commercial projects
53-
Interesting and non-commercial sites using Windy API can ask for free upgrade to the paid version. The condition is that your project will be open sourced on GitHub. If this is your case, use the same form for paid version and describe your request.
54-
55-
## Technical support
56-
Drop a line in our [Windy API section](https://community.windy.com/category/12/windy-api) of our Windy Community forum.
57-
58-
## Changelog
59-
###### [4.7] - 2019-04-29
60-
- Finally version with `Leaflet 1.4.`
61-
62-
###### [4.5] - 2018-11-20
63-
- New lib codes based on Windy client `v16.17.0`
64-
- Updated menu on the right side to contain all the available layers.
65-
- Map selector was renamed to `#map-container` so make sure it will be compatible with your code.
66-
67-
###### [4.4] - 2018-10-05
68-
- New API conditions
69-
70-
###### [4.0] - 2018-07-30
71-
- Leaflet and Windy library based on Leaflet `v0.7.7` and based on Windy Client `v15.15.1`
72-
73-
###### [3.0] - 2017-2018
74-
- Windy API as easy to use console, using `iframe` and requires all apps to run on `mywindy.com` domain.
75-
76-
###### [2.3] - 2016-11-18
77-
- Fixed bug after changing URL from `windyty.com` to `windytv.com`
78-
79-
###### [2.2] - 2016-06-01
80-
- boot.js now run on https
81-
82-
###### [2.1] - 2016-06-01
83-
- Increased size of typed arrays storage to handle retina displays
84-
85-
###### [2.0] - 2016-04-15
86-
- Completely new version of API based on new Windyty 6.X.X codes
87-

‎assets/touhcFile

Whitespace-only changes.

‎bcast/index.html

+18-60
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,20 @@
11
<html>
2-
<head>
3-
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
4-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
5-
<script src="https://api4.windy.com/assets/libBoot.js"></script>
6-
<style>
7-
#windy {
8-
width: 100%;
9-
height: 300px;
10-
}
11-
</style>
12-
</head>
13-
<body>
14-
<div id="windy"></div>
15-
16-
<!-- Make sure you will generate YOUR OWN API KEY -->
17-
<!-- at https://api4.windy.com -->
18-
19-
<script>
20-
21-
const options = {
22-
key: 'PsLAtXpsPTZexBwUkO7Mx5I'
23-
24-
// Tip: Use verbose true for nice console output
25-
// verbose: true
26-
27-
}
28-
29-
windyInit( options, windyAPI => {
30-
31-
const { store, broadcast } = windyAPI
32-
// broadcast is main Windy's event emmiter that
33-
// let you know what is happening inside
34-
35-
// Change overlays programatically
36-
var overlays = ['rain','wind','temp','clouds']
37-
, i = 0
38-
39-
setInterval( ()=> {
40-
i = ( i === 3 ? 0 : i + 1 )
41-
store.set('overlay', overlays[ i ] )
42-
}, 800)
43-
44-
// Observe the most important broadcasts
45-
broadcast.on('paramsChanged', params => {
46-
47-
console.log('Params changed:', params )
48-
49-
})
50-
51-
broadcast.on('redrawFinished', params => {
52-
53-
console.log('Map was rendered:', params )
54-
55-
})
56-
})
57-
58-
</script>
59-
60-
</body>
2+
<head>
3+
<meta
4+
name="viewport"
5+
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
6+
/>
7+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
8+
<script src="https://api4.windy.com/assets/libBoot.js"></script>
9+
<style>
10+
#windy {
11+
width: 100%;
12+
height: 300px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="windy"></div>
18+
<script src="script.js"></script>
19+
</body>
6120
</html>
62-

‎bcast/script.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const options = {
2+
key: 'PsLAtXpsPTZexBwUkO7Mx5I', // REPLACE WITH YOUR KEY !!!
3+
4+
// Tip: Use verbose true for nice console output
5+
// verbose: true
6+
};
7+
8+
windyInit(options, windyAPI => {
9+
const { store, broadcast } = windyAPI;
10+
// broadcast is main Windy's event emmiter that
11+
// let you know what is happening inside
12+
13+
// Change overlays programatically
14+
const overlays = ['rain', 'wind', 'temp', 'clouds'];
15+
let i = 0;
16+
17+
setInterval(() => {
18+
i = i === 3 ? 0 : i + 1;
19+
store.set('overlay', overlays[i]);
20+
}, 800);
21+
22+
// Observe the most important broadcasts
23+
broadcast.on('paramsChanged', params => {
24+
console.log('Params changed:', params);
25+
});
26+
27+
broadcast.on('redrawFinished', params => {
28+
console.log('Map was rendered:', params);
29+
});
30+
});

‎boat-tracker/index.html

+17-115
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,20 @@
11
<html>
2-
<head>
3-
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
4-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
5-
<script src="https://api4.windy.com/assets/libBoot.js"></script>
6-
<style>
7-
#windy {
8-
width: 100%;
9-
height: 300px;
10-
}
11-
</style>
12-
</head>
13-
<body>
14-
<div id="windy"></div>
15-
16-
<!-- Make sure you will generate YOUR OWN API KEY -->
17-
<!-- at https://api4.windy.com -->
18-
19-
<script>
20-
const options = {
21-
key: 'PsLAtXpsPTZexBwUkO7Mx5I',
22-
lat: 14,
23-
lon: -29,
24-
zoom: 4
25-
}
26-
27-
windyInit( options, windyAPI => {
28-
29-
const { map } = windyAPI
30-
31-
const MARKER = encodeURI(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
32-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
33-
<svg width="100%" height="100%" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
34-
<path d="M4.784,13.635c0,0 -0.106,-2.924 0.006,-4.379c0.115,-1.502 0.318,-3.151 0.686,-4.632c0.163,-0.654 0.45,-1.623 0.755,-2.44c0.202,-0.54 0.407,-1.021 0.554,-1.352c0.038,-0.085 0.122,-0.139 0.215,-0.139c0.092,0 0.176,0.054 0.214,0.139c0.151,0.342 0.361,0.835 0.555,1.352c0.305,0.817 0.592,1.786 0.755,2.44c0.368,1.481 0.571,3.13 0.686,4.632c0.112,1.455 0.006,4.379 0.006,4.379l-4.432,0Z" style="fill:rgb(0,46,252);"/><path d="M5.481,12.731c0,0 -0.073,-3.048 0.003,-4.22c0.06,-0.909 0.886,-3.522 1.293,-4.764c0.03,-0.098 0.121,-0.165 0.223,-0.165c0.103,0 0.193,0.067 0.224,0.164c0.406,1.243 1.232,3.856 1.292,4.765c0.076,1.172 0.003,4.22 0.003,4.22l-3.038,0Z" style="fill:rgb(255,255,255);fill-opacity:0.846008;"/>
35-
</svg>`);
36-
37-
const MARKER_ICON_URL = `data:image/svg+xml;utf8,${MARKER}`;
38-
39-
const BoatIcon = L.icon({
40-
iconUrl: MARKER_ICON_URL,
41-
iconSize: [24, 24],
42-
iconAnchor: [12, 12],
43-
popupAnchor: [0, 0],
44-
});
45-
46-
const markers = [];
47-
48-
const updateIconStyle = () => {
49-
for (const marker of markers) {
50-
if (marker._icon) {
51-
const heading = marker._icon.getAttribute('data-heading');
52-
if (marker._icon.style.transform.indexOf('rotateZ') === -1) {
53-
marker._icon.style.transform = `${marker._icon.style.transform} rotateZ(${(heading || 0)}deg)`;
54-
marker._icon.style.transformOrigin = 'center';
2+
<head>
3+
<meta
4+
name="viewport"
5+
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
6+
/>
7+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
8+
<script src="https://api4.windy.com/assets/libBoot.js"></script>
9+
<style>
10+
#windy {
11+
width: 100%;
12+
height: 300px;
5513
}
56-
}
57-
}
58-
};
59-
60-
fetch('../../assets/boats.json')
61-
.then(response => response.json())
62-
.then(result => result.result)
63-
.then(result => {
64-
try {
65-
let hue = 0;
66-
for (const boatName of Object.keys(result)) {
67-
hue = (hue + 60) % 360;
68-
69-
const boat = result[boatName];
70-
71-
const layer = L.polyline(boat.track, {
72-
color: `hsl(${hue}, 100%, 45%)`,
73-
weight: 2,
74-
}).addTo(map);
75-
76-
layer.on('mouseover', function (e) {
77-
layer.setStyle({
78-
weight: 4,
79-
});
80-
});
81-
82-
layer.on('mouseout', function (e) {
83-
layer.setStyle({
84-
weight: 2,
85-
});
86-
});
87-
88-
const marker = L.marker(boat.track[boat.track.length - 1], {
89-
icon: BoatIcon,
90-
}).addTo(map);
91-
92-
markers.push(marker);
93-
marker._icon.setAttribute('data-heading', boat.heading);
94-
marker.bindPopup(boatName);
95-
96-
updateIconStyle();
97-
}
98-
} catch (error) {
99-
console.error(`Error querying boats: ${error.message}`);
100-
}
101-
})
102-
.catch(error => {
103-
console.error(`Error querying boats: ${error.message}`);
104-
});
105-
106-
// Handle some events. We need to update the rotation of icons ideally each time
107-
// leaflet re-renders. them.
108-
map.on('zoom', updateIconStyle);
109-
map.on('zoomend', updateIconStyle);
110-
map.on('viewreset', updateIconStyle);
111-
112-
})
113-
</script>
114-
115-
116-
</body>
14+
</style>
15+
</head>
16+
<body>
17+
<div id="windy"></div>
18+
<script src="script.js"></script>
19+
</body>
11720
</html>
118-

0 commit comments

Comments
 (0)