more cors info + js example; more maps info

Author: geira

doc/WebClients.md

@@ -15,7 +15,25 @@ summary: >
 Here are some tips on writing browser-based clients for the Weather API. This includes
 frameworks like React and Vue, but also plain Javascript and older technologies like
 AJAX/XmlHpptRequest. Even inline images ("hotlinking") is to some degree supported.
+Note that you can get still throttled if you site sends > 20 reqs/sec (total from
+all current users' browsers).
 
+## Example
+
+This is about as plain an example as you can get with pure Javascript with no
+jQuery, TypeScript, React or other dependencies.
+
+<script src="./assets/getForecast.js"></script>
+<form name="coords" action="javascript:getForecast()">
+    <label for="lat">Latitude</label>
+    <input type="text" id="lat" size="6" name="lat">&nbsp;&nbsp;
+    <label for="lon">Longitude:</label>
+    <input type="text" id="lon" size="6" name="lon"><br><br>
+    <input type="submit" value="Submit"> <br><br>
+    <textarea id="output" cols="60" rows="25" style="font-family: monospace, monospace"></textarea>
+</form>
+
+See [the script](./assets/getForecast.js) for source code.
 
 ## Identification
 
@@ -69,6 +87,13 @@ which are:
     - `Viewport-Width`
     - `Width`
 
+*([Some sources](https://javascript.info/fetch-crossorigin) claim the list is even shorter.)
+
+{: .note }
+Apparently some browsers now have added `User-Agent` to the list of "safe" headers. However,
+according to our research, this does not include Firefox (as of v.136.0) which triggers a CORS fault.
+Also, while Chrome appears to accept setting the header, it is not actually sent to the server.
+
 3. The only allowed values for the `Content-Type` header are:
 
     - `application/x-www-form-urlencoded`

doc/assets/getForecast.js

@@ -0,0 +1,35 @@
+function getForecast() {
+    let lat = document.coords.lat.value;
+    let lon = document.coords.lon.value;
+    fetch_json('https://api.met.no/weatherapi/locationforecast/2.0/compact.json?lat=' + lat + '&lon=' + lon).then(
+        function(value) {
+            if (value != null) {
+                document.getElementById('output').value = JSON.stringify(value,null,2);
+            } else {
+                document.getElementById('output').value = 'Failure';
+            }
+        }
+    );
+}
+
+async function fetch_json(url) {
+    let obj = null;
+    try {
+        obj = await (await fetch(url)).json();
+    } catch(e) {
+        console.log(e, url);
+    }
+    return(obj);
+}
+
+// Usage in HTML
+//
+//<script src="./assets/getForecast.js"></script>
+//<form name="coords" action="javascript:getForecast()">
+//    <label for="lat">Latitude</label>
+//    <input type="text" id="lat" size="6" name="lat">&nbsp;&nbsp;
+//    <label for="lon">Longitude:</label>
+//    <input type="text" id="lon" size="6" name="lon"><br><br>
+//    <input type="submit" value="Submit"> <br><br>
+//    <textarea id="output" cols="60" rows="25" style="font-family: monospace, monospace"></textarea>
+//</form>

doc/index.md

@@ -58,8 +58,8 @@ Helpdesk's greatest hits
 
 ## Other data sources
 
-- [Map client and geolocation libraries](./MapClients)
-- [WMS services](./WMS)  (Under construction)
+- [Map client and geolocation libraries](./maps/MapClients)
+- [WMS services](./mapsWMS)  (Under construction)
 - [Fetching gridded forecast data from THREDDS](./thredds)
 
 ## Backend service development
@@ -73,3 +73,6 @@ For MET employees only
 ## Support
 
 - [News and contact information](./support)
+
+*Content generated using [Jekyll](https://jekyllrb.com/) and
+[Just the Docs](https://github.com/just-the-docs/just-the-docs).*

doc/maps.md

@@ -0,0 +1,9 @@
+---
+title: Maps
+layout: page
+nav_order: 55
+has_children: true
+---
+
+## Yo, we got maps, bro
+

doc/MapClients.md doc/maps/MapClients.mddoc/MapClients.md renamed to doc/maps/MapClients.md

@@ -3,7 +3,7 @@ title: Map libraries for WeatherAPI
 date: 2020-08-18
 author: Geir Aalberg
 layout: page
-parent: Other data sources
+parent: Maps
 state: draft
 tags:
     - reference

doc/WMS.md doc/maps/WMS.mddoc/WMS.md renamed to doc/maps/WMS.md

@@ -3,7 +3,7 @@ title: Introduction to WMS
 date: 2020-08-23
 author: Geir Aalberg
 layout: page
-parent: Other data sources
+parent: Maps
 #nav_exclude: true
 state: draft
 tags:

doc/maps/yr-maps.md

@@ -0,0 +1,44 @@
+---
+title: Yr-maps
+date: 2025-03-12
+author: Geir Aalberg
+layout: page
+parent: Maps
+nav_exclude: true
+state: draft
+tags:
+    - guide
+summary: >
+    Getting started with Yr-maps
+---
+
+## Demo
+
+
+<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
+
+<div id='map' style="width: 100%; height: 800px;"></div>
+<script>
+    var map = new maplibregl.Map({
+        container: 'map',
+        style: 'http://157.249.72.12/styles/basic-preview/style.json',
+        center: [15, 65],
+        zoom: 4
+    });
+</script>
+
+
+## Datakilder
+
+- <https://beta.yr-maps.met.no/> - kart-API med dokumentasjon
+
+Kartilene bruker WebMercator-projeksjon, som er default i de fleste kartklienter.
+
+## Ressurser
+
+### Yr-maps
+
+- [Dokumentasjon fra NRK](https://nrkno.github.io/yr-map-docs/) på tile rendering med [kildekode](https://github.com/nrkno/yr-map-docs)
+- [TileConvert](https://github.com/metno/tileconvert) - Go-kode for proxy server for produksjon av tiles som kan leses direkte inn i kartbibliotek
+- [Yr-maps demo client](https://client.yr-maps.met.no/)

doc/thredds.md

@@ -19,7 +19,7 @@ For more information, please see the section on "Data Access" in the [Numerical
 Weather Prediction wiki](https://github.com/metno/NWPdocs/wiki/Data-access).
 
 THREDDS also supports the Web Map Service protocol for interactive raster images.
-For a quick guide, see the [WMS page](./WMS).
+For a quick guide, see the [WMS page](./maps/WMS).
 
 ## OPeNDAP
 

site

@@ -18,7 +18,7 @@ abort() {
 case "$action" in
 
     run)
-        bundle exec jekyll serve
+        bundle exec jekyll serve &
         ;;
 
     post)