Merge branch 'main' into fix/custom-search-type-fix

Dataport · Feb 23, 2024 · 3881419 · 3881419
2 parents d2111c6 + 257dd3a
commit 3881419
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 8 deletions.
diff --git a/packages/clients/afm/API.md b/packages/clients/afm/API.md
@@ -38,7 +38,10 @@ In your HTML, a div with unique ID is required that holds the following style pr
     position: relative;
   "
   id="polarstern"
-/>
+>
+  <!-- Optional, may use if your page does not have its own <noscript> information -->
+  <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+</div>
 ```
 
 ```js

diff --git a/packages/clients/afm/example/index.html b/packages/clients/afm/example/index.html
@@ -34,7 +34,9 @@ <h2>Karte</h2>
         box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.5);
       "
       id="polarstern"
-    ></div>
+    >
+      <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+    </div>
     <h2>Beispiel für programmatische Informationsbindung</h2>
     <p>Aktuelle Zoomstufe: <span id="vuex-target-zoom" /></p>
     <p>Featureinformationen: <span id="vuex-target-gfi" /></p>

diff --git a/packages/clients/afm/example/prod-example.html b/packages/clients/afm/example/prod-example.html
@@ -34,7 +34,9 @@ <h2>Karte</h2>
         box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.5);
       "
       id="polarstern"
-    ></div>
+    >
+      <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+    </div>
     <h2>Beispiel für programmatische Informationsbindung</h2>
     <p>Aktuelle Zoomstufe: <span id="vuex-target-zoom" /></p>
     <p>Featureinformationen: <span id="vuex-target-gfi" /></p>

diff --git a/packages/clients/dish/src/index.html b/packages/clients/dish/src/index.html
@@ -20,7 +20,9 @@
   </head>
   <body style="width: 100%; height: 100%; overscroll-behavior: contain">
     <div style="width: 100%; height: 100%">
-      <div id="polarstern"></div>
+      <div id="polarstern">
+        <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+      </div>
     </div>
     <script type="module" src="./polar-client.ts"></script>
   </body>

diff --git a/packages/clients/generic/API.md b/packages/clients/generic/API.md
@@ -20,6 +20,22 @@ The method expects a single object with the following parameters.
 | enabledPlugins  | string[]? | This is a client-specific field. Since the `@polar/client-generic` client contains all existing plugins, they are activated by strings. The strings match their package names: `'address-search' \| 'attributions' \| 'draw'* \| 'export' \| 'filter'* \| 'fullscreen'* \| 'geo-location'* \| 'gfi'* \| 'icon-menu' \| 'layer-chooser'* \| 'legend' \| 'loading-indicator' \| 'pins' \| 'reverse-geocoder' \| 'scale' \| 'toast' \| 'zoom'*`. The plugins marked with * are nested in the `'icon-menu'` in this pre-layouting, hence they depend upon it being active, too. |
 | modifyLayerConfiguration | ((layerConf: object[]) => object[])? | Defaults to identity function. This function is applied to the loaded layer configuration before usage. That is, the `services` can be modified by this to e.g. set parameters not supported by the service register, add additional layers, and so on. |
 
+In your HTML, a div with unique ID (`containerId` from above) is required that holds the following style properties. Width and height can be changed as you need, but are required to be defined.
+
+```html
+<div
+  style="
+    width: 680px;
+    height: 420px;
+    position: relative;
+  "
+  id="polarstern"
+>
+  <!-- Optional, may use if your page does not have its own <noscript> information -->
+  <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+</div>
+```
+
 `createMap` returns a Promise of a map instance. This returned instance is required to retrieve information from the map.
 
 The package also includes a `style.css` and an `index.html` file. The `style.css`'s relative path must, if it isn't the default value `'./style.css'`, be included in the `mapConfiguration` as follows:

diff --git a/packages/clients/meldemichel/API.md b/packages/clients/meldemichel/API.md
@@ -67,7 +67,10 @@ A document rendering the map client could e.g. look like this:
     </style>
   </head>
   <body>
-    <div id="meldemichel-map-client"></div>
+    <div id="meldemichel-map-client">
+      <!-- Optional, may use if your page does not have its own <noscript> information -->
+      <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+    </div>
     <script type="module">
       import meldemichelMapClient from './client-meldemichel.js'
 

diff --git a/packages/clients/meldemichel/src/html/index.html b/packages/clients/meldemichel/src/html/index.html
@@ -20,7 +20,9 @@
   </head>
   <body style="width: 100%; height: 100%; overscroll-behavior: contain">
     <div style="width: 100%; height: 100%">
-      <div id="polarstern"></div>
+      <div id="polarstern">
+        <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+      </div>
     </div>
     <script type="module">
       import client from './client-meldemichel.js'

diff --git a/packages/clients/meldemichel/src/index.html b/packages/clients/meldemichel/src/index.html
@@ -21,7 +21,9 @@
   </head>
   <body style="width: 100%; height: 100%; overscroll-behavior: contain">
     <div style="width: 100%; height: 100%">
-      <div id="polarstern"></div>
+      <div id="polarstern">
+        <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+      </div>
     </div>
     <script type="module">
       import client from './polar-client.ts'

diff --git a/packages/clients/snowbox/src/index.html b/packages/clients/snowbox/src/index.html
@@ -84,7 +84,9 @@ <h2>🗺️ Map</h2>
         <option value="de">German</option>
       </select>
     </label>
-    <div id="polarstern" class="polarstern"></div>
+    <div id="polarstern" class="polarstern">
+      <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+    </div>
     <h2>Example for programmatic information binding</h2>
     <p>
       This illustrates which kind of data can be retrieved from the map client.

diff --git a/pages/documentation.html b/pages/documentation.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="./assets/iceberg_icon.svg">
   <link rel="stylesheet" href="./mvp.css">
+  <link rel="stylesheet" href="./mobile.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - documentation">

diff --git a/pages/index.html b/pages/index.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="./assets/iceberg_icon.svg">
   <link rel="stylesheet" href="./mvp.css">
+  <link rel="stylesheet" href="./mobile.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - the configurable map client factory">

diff --git a/pages/mobile.css b/pages/mobile.css
@@ -0,0 +1,6 @@
+/* px determined by when the page starts to look wonky */
+@media screen and (max-width: 650px) {
+  nav {
+    flex-direction: column;
+  }
+}