New docs

nrkno · Feb 14, 2025 · c533e95 · c533e95
1 parent cf263c7
commit c533e95
Show file tree

Hide file tree

Showing 10 changed files with 6 additions and 4 deletions.
diff --git a/docs/assets/temperature.Bn1Gf5bC_1JWLn9.webp b/docs/assets/temperature.Bn1Gf5bC_1JWLn9.webp
diff --git a/docs/assets/temperature.CGkxF1P3_1xCne3.webp b/docs/assets/temperature.CGkxF1P3_1xCne3.webp
diff --git a/docs/assets/wind.BtvcsfcK_1Vxa26.webp b/docs/assets/wind.BtvcsfcK_1Vxa26.webp
diff --git a/docs/assets/wind.CUwOQSqI_WYJKK.webp b/docs/assets/wind.CUwOQSqI_WYJKK.webp
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,7 @@
 <!DOCTYPE html><style>body{font-size:16px;color:#00050e;font-family:sans-serif;font-weight:400;blockquote{font-size:13px;padding:10px;border-radius:10px;background-color:#f9f9f9;border:1px solid #00050e}span{font-size:12px}}.main[data-astro-cid-hsp6otuf]{margin:0 15%}
 body{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:Arial,sans-serif;margin:0}.intro-section{margin-bottom:40px}.examples-section{display:flex;gap:40px;justify-content:center;align-items:center}.example{display:flex;flex-direction:column;align-items:center}.example-content{display:flex;flex-direction:column;align-items:center;border:2px solid lightgrey;outline:1px solid transparent;border-radius:12px;overflow:hidden;width:300px;position:relative;&:hover{border-width:2px;border-color:#a9a9a9;outline-color:#a9a9a9}}.example-content img{height:150px;width:100%;object-fit:cover}.example h2{margin:16px 0}.example a{text-decoration:none;color:inherit}.example a:hover h2{color:#00f;text-decoration:underline}
 </style><body data-astro-cid-hsp6otuf> <div class="main" data-astro-cid-hsp6otuf>  <section class="intro-section"> <h1>Documentation on Using Tile Data from MET</h1> <p>
-This documentation provides examples of how to use WebGL shaders to visualize temperature and wind data fetched from a tile server. Each example demonstrates the process of rendering the data using static images and WebGL shaders.
-</p> </section> <section class="examples-section"> <div class="example"> <a href="wind"> <div class="example-content"> <img src="/yr-map-docs/assets/wind.CUwOQSqI_WYJKK.webp" alt="Wind Example" loading="eager" width="512" height="512" decoding="async"> <h2>Wind</h2> </div> </a> </div> <div class="example"> <a href="temperature"> <div class="example-content"> <img src="/yr-map-docs/assets/temperature.Bn1Gf5bC_1JWLn9.webp" alt="Temperature Example" loading="eager" width="512" height="512" decoding="async"> <h2>Temperature</h2> </div> </a> </div> </section>   </div> </body>
+This documentation provides examples of how to use WebGL shaders to visualize temperature and wind data fetched
+      from a tile server. Each example demonstrates the process of rendering the data using static images and WebGL
+      shaders.
+</p> </section> <section class="examples-section"> <div class="example"> <a href="/yr-map-docs/wind"> <div class="example-content"> <img src="/yr-map-docs/assets/wind.BtvcsfcK_1Vxa26.webp" alt="Wind Example" loading="eager" width="512" height="512" decoding="async"> <h2>Wind</h2> </div> </a> </div> <div class="example"> <a href="/yr-map-docs/temperature"> <div class="example-content"> <img src="/yr-map-docs/assets/temperature.CGkxF1P3_1xCne3.webp" alt="Temperature Example" loading="eager" width="512" height="512" decoding="async"> <h2>Temperature</h2> </div> </a> </div> </section>   </div> </body>
diff --git a/docs/radar.webp b/docs/radar.webp
diff --git a/docs/temperature.webp b/docs/temperature.webp
diff --git a/docs/temperature/index.html b/docs/temperature/index.html
@@ -5,7 +5,7 @@
 This section demonstrates how we use shaders to visualize temperature data. The data is fetched from a tile server and rendered using WebGL shaders.
 </p> <div class="divider divider--default" data-astro-cid-g2vovh5f></div>  <h2 data-astro-cid-s2p3odjf>Temperature data</h2> <div class="temperature-example" data-astro-cid-s2p3odjf> <p data-astro-cid-s2p3odjf>
 The temperature data is fetched from a tile server that provides XYZ tiles with temperature data. To simplify the example, we use a static image of the temperature data and a static image of the map background. The image below consists of multiple tiles stitched together to create a larger image. In the next example, we will use WebGL to render this data together with our background map.
-</p> <img src="/yr-map-docs/assets/temperature.Bn1Gf5bC_1JWLn9.webp" id="temperature-data-image" alt="Temperature" loading="eager" data-astro-cid-s2p3odjf="true" width="512" height="512" decoding="async"> <div class="divider divider--default" data-astro-cid-g2vovh5f></div>  <h2 data-astro-cid-s2p3odjf>Render raw temperature data with WebGL</h2> <p data-astro-cid-s2p3odjf>
+</p> <img src="/yr-map-docs/assets/temperature.CGkxF1P3_1xCne3.webp" id="temperature-data-image" alt="Temperature" loading="eager" data-astro-cid-s2p3odjf="true" width="512" height="512" decoding="async"> <div class="divider divider--default" data-astro-cid-g2vovh5f></div>  <h2 data-astro-cid-s2p3odjf>Render raw temperature data with WebGL</h2> <p data-astro-cid-s2p3odjf>
 Setting up WebGL requires some boilerplate code, which we will not provide in these simplified examples. If you are unfamiliar with WebGL, we recommend visiting <a href="https://webglfundamentals.org/" data-astro-cid-s2p3odjf>WebGL Fundamentals</a> to get a grasp of the basics. After creating a canvas element and setting up the WebGL context, we can start creating our shaders.
 </p> <h3 data-astro-cid-s2p3odjf>Vertex shader</h3> <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-astro-cid-s2p3odjf data-language="glsl"><code><span class="line"><span style="color:#F97583">attribute</span><span style="color:#F97583"> vec2</span><span style="color:#E1E4E8"> aPosition;</span></span>
 <span class="line"><span style="color:#F97583">attribute</span><span style="color:#F97583"> vec2</span><span style="color:#E1E4E8"> aTexCoords;</span></span>

diff --git a/docs/wind.webp b/docs/wind.webp
diff --git a/docs/wind/index.html b/docs/wind/index.html
@@ -5,7 +5,7 @@
 These examples are simplified, using only static images created from tiles for some given bounds. We are not implementing it in a map context; we are simply showing examples of how to read and use the data using WebGL shaders.
 </p> <div class="divider divider--default" data-astro-cid-g2vovh5f></div>  <h2 data-astro-cid-wizpvydl>Wind data</h2> <div class="wind-example" data-astro-cid-wizpvydl> <p data-astro-cid-wizpvydl>
 Wind data is fetched from a tile server that contains XYZ tiles with wind data. The data is then used to create a wind map using WebGL. To simplify the example, we are using a static image of the wind data and a static image of the map background. The image below consists of four tiles of wind data, stitched together to create a larger image. In the next example, we will use WebGL to render this data together with our background map.
-</p> <img src="/yr-map-docs/assets/wind.CUwOQSqI_WYJKK.webp" id="wind-data-image" alt="Raw wind data from tile server" loading="eager" data-astro-cid-wizpvydl="true" width="512" height="512" decoding="async"> <div class="divider divider--default" data-astro-cid-g2vovh5f></div>  <h2 data-astro-cid-wizpvydl>Render raw wind data with WebGL</h2> <p data-astro-cid-wizpvydl>
+</p> <img src="/yr-map-docs/assets/wind.BtvcsfcK_1Vxa26.webp" id="wind-data-image" alt="Raw wind data from tile server" loading="eager" data-astro-cid-wizpvydl="true" width="512" height="512" decoding="async"> <div class="divider divider--default" data-astro-cid-g2vovh5f></div>  <h2 data-astro-cid-wizpvydl>Render raw wind data with WebGL</h2> <p data-astro-cid-wizpvydl>
 Setting up WebGL demands some boilerplate code, which we will not provide in these simplified examples. If you are unfamiliar with WebGL, we recommend visiting <a href="https://webglfundamentals.org/" data-astro-cid-wizpvydl>WebGL Fundamentals</a> to get a grasp of the basics. After creating a canvas element and setting up the WebGL context, we can start creating our shaders.
 </p> <h3 data-astro-cid-wizpvydl>Vertex shader</h3> <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-astro-cid-wizpvydl data-language="glsl"><code><span class="line"><span style="color:#F97583">attribute</span><span style="color:#F97583"> vec2</span><span style="color:#E1E4E8"> aPosition;</span></span>
 <span class="line"><span style="color:#F97583">attribute</span><span style="color:#F97583"> vec2</span><span style="color:#E1E4E8"> aTexCoords;</span></span>