@geops/rvf-mobility-web-component 0.1.55 → 0.1.56

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -13,7 +13,7 @@ import {
 // const geopsMapsApiLink = `<a href="https://developer.geops.io/apis/maps">geOps Maps API</a>`;
 // const geopsStopsApiLink = `<a href="https://developer.geops.io/apis/stops">geOps Stops API</a>`;
 const geopsMocoApiLink = `<a href="https://geops.com/en/solution/disruption-information">geOps MOCO API</a>`;
-const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
+// const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
 
 export interface WebComponentAttributeDoc {
   defaultValue?: string;
@@ -125,14 +125,26 @@ const attrs: MobilityMapAttributes = {
        The layers available are : ${LAYERS_WITH_LINK}.<br/>
        Definition for a layer :
 <pre style="font-size: 12px; overflow: auto;">{
-  liniennetz: { // The layer name, here the liniennetz layer.
-    link: { // Define the link to display int footer of the details view, if not defined no link is displayed.
-      text: "Zu den Liniennetzplänen",  // The text of the link, if not defined the title is used.
-      href: "https://www.rvf.de/fahrtinfo/netzplan", // The url of the link, if not defined no link is displayed.
+  "liniennetz": {
+    "link": {
+      "href": "https://www.rvf.de/fahrtinfo/netzplan",
+      "show": true,
+      "text": "Zu den Liniennetzplänen"
     },
-    title: "Liniennetzpläne", // Text displayed on the layer tree and in the header of the details view.
+    "title": "Liniennetzpläne"
   }
-</pre>}`,
+</pre>}
+<br/>
+where:
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li><i>link</i> defined a external link displayed at the bottom of the detail view</li>
+    <ul style="list-style-type: disc; padding-left: 40px;">
+      <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li
+      <li><i>text</i> is the text display as a link</li>
+      <li><i>show</i> show/hide the link in the details view</li>
+    </ul>
+  <li><i>title</i> is the title of the layer used in the details view header and in the layer tree, if not defined the layer name will be used.</li>
+</ul>`,
   },
   layertree: {
     defaultValue: "true",
@@ -168,7 +180,7 @@ const attrs: MobilityMapAttributes = {
     // "Commas separated list of mots to display on the Realtime layer.<br/>Ex: rail,bus,coach,foot,tram,subway,gondola,funicular,ferry,car .",
   },
   notification: {
-    defaultValue: "false",
+    defaultValue: "true",
     description: `Add the notification layer to the map. This layer will display informations about disruptions on the network. Data comes from
         our ${geopsMocoApiLink} .`,
     type: "boolean",
@@ -183,7 +195,7 @@ const attrs: MobilityMapAttributes = {
   },
   notificationurl: {
     defaultValue: "https://moco.geops.io/api/v2/",
-    description: `The ${geopsMocoApiLink} url to use.`,
+    description: null, // `The ${geopsMocoApiLink} url to use.`,
   },
   permalink: {
     defaultValue: "false",
@@ -203,7 +215,7 @@ const attrs: MobilityMapAttributes = {
   },
   realtime: {
     defaultValue: "true",
-    description: `Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
+    description: null, //`Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
     type: "boolean",
   },
   realtimebboxparameters: {

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -3,7 +3,7 @@ import { memo, useId, useState } from "preact/compat";
 import RvfCheckbox from "../RvfCheckbox";
 import RvfSelect from "../RvfSelect";
 import Button from "../ui/Button";
-import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
+import { LAYER_PROP_IS_EXPORTING, RVF_EXTENT_3857 } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
 import getAllLayers from "../utils/getAllLayers";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -66,6 +66,8 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               map,
               { format },
               {
+                maxExtent: useMaxExtent ? RVF_EXTENT_3857 : undefined,
+
                 onAfter: (mapp, layers) => {
                   if (
                     realtimeLayer &&
@@ -78,7 +80,6 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
                   });
                   mapp.set(LAYER_PROP_IS_EXPORTING, false);
                 },
-
                 onBefore: (mapp, layers) => {
                   mapp.set(LAYER_PROP_IS_EXPORTING, true);
                   if (realtimeLayer) {
@@ -91,7 +92,6 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
                     layer.set(LAYER_PROP_IS_EXPORTING, true);
                   });
                 },
-                useMaxExtent,
               },
             );
             setTimeout(() => {

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -703,7 +703,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                   hasLayerTree={hasLayerTree}
                   hasPrint={hasPrint}
                   hasRealtime={hasRealtime}
-                  hasSearch={false}
+                  hasSearch={false} // The search could be in the overlay but we decide to put it in the toolbar for better UX
                   hasShare={hasShare}
                 />
               </Overlay>

package/src/utils/exportPdf.ts

@@ -4,8 +4,6 @@ import { Map } from "ol";
 import { getBottomRight, getTopLeft } from "ol/extent";
 import View from "ol/View";
 
-import { RVF_EXTENT_3857 } from "./constants";
-
 import type { jsPDFOptions } from "jspdf";
 import type { Coordinate } from "ol/coordinate";
 import type { Extent } from "ol/extent";
@@ -532,12 +530,12 @@ export interface CopyrightExportOptions {
 
 export interface MapExportOptions {
   copyrightOptions?: CopyrightExportOptions;
+  maxExtent?: number[];
   onAfter?: (map: Map, layers: BaseLayer[]) => void;
   onBefore?: (map: Map, layers: BaseLayer[]) => void;
   pixelRatio?: number;
   text?: string;
   useCopyright?: boolean;
-  useMaxExtent?: boolean;
   usePlaceholder?: boolean;
 }
 
@@ -547,11 +545,11 @@ async function exportPdf(
   mapExportOptions: MapExportOptions = {},
 ): Promise<boolean> {
   const {
+    maxExtent,
     onAfter,
     onBefore,
     pixelRatio = 3,
     useCopyright = true,
-    useMaxExtent = false,
     usePlaceholder = true,
   } = mapExportOptions;
 
@@ -560,7 +558,7 @@ async function exportPdf(
   const size = sizePt.map((n) => {
     return (n * 96) / 72;
   });
-  const extent = useMaxExtent ? RVF_EXTENT_3857 : null; //map.getView().calculateExtent();
+  const extent = maxExtent;
 
   // Save current pixel ratio
   const actualPixelRatio = window.devicePixelRatio;