@geops/rvf-mobility-web-component 0.1.59 → 0.1.61

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.61](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.60...v0.1.61) (2025-10-07)
+
+### [0.1.60](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.59...v0.1.60) (2025-10-07)
+
+
+### Features
+
+* add permalingtemplate attribute ([0c28884](https://github.com/geops/rvf-mobility-web-component/commit/0c28884b059b7b56ba7814a689e908440a8b4f7d))
+
+
+### Bug Fixes
+
+* ad a default visible layers list ([3664a90](https://github.com/geops/rvf-mobility-web-component/commit/3664a90188d548e7a10076d58cbae78681ed85de))
+* add more translations ([ea1dff7](https://github.com/geops/rvf-mobility-web-component/commit/ea1dff7cc8f905f9a3a1f762fecd06bb2a30b3f7))
+* add more translations ([6d49d2b](https://github.com/geops/rvf-mobility-web-component/commit/6d49d2bf9a42b09bb34da71ffbd076f554e522f2))
+* add more translations ([6dfa067](https://github.com/geops/rvf-mobility-web-component/commit/6dfa0672face8ed76a1948ea6e9d44d84cb27a6a))
+* add more translations ([9f99968](https://github.com/geops/rvf-mobility-web-component/commit/9f9996878006a1ece409fb3ba411a1267ecd9076))
+* add realod attr ([bdcadb8](https://github.com/geops/rvf-mobility-web-component/commit/bdcadb840e39ad26a19c8b7025e5c45b2fd7534b))
+* add realod attr ([5946f78](https://github.com/geops/rvf-mobility-web-component/commit/5946f78310bf1a7112043cd2708a4c5f456cb85a))
+* add realod attr ([ed1205c](https://github.com/geops/rvf-mobility-web-component/commit/ed1205c7865e94377e5cc4880b836c02d0abdcbb))
+* add translations ([5588a7e](https://github.com/geops/rvf-mobility-web-component/commit/5588a7ec19b26b83c18942145f9b479a353727b4))
+* add translations ([d37c94d](https://github.com/geops/rvf-mobility-web-component/commit/d37c94dd50078cbb7cb23a744d5f13c822a20369))
+* display custom html inline ([10cb2ba](https://github.com/geops/rvf-mobility-web-component/commit/10cb2bac233a61164662b57e19c20a89825b9f86))
+* do not center on the train clicked ([a8a24f5](https://github.com/geops/rvf-mobility-web-component/commit/a8a24f5471d09b61c382b52d472f1cc46c1b4739))
+* do not center on the train clicked ([d4ddb03](https://github.com/geops/rvf-mobility-web-component/commit/d4ddb033194cd32adcbfdb838e271be662cf746e))
+* fix css issue with serach when the browser is zoomed ([dc252e7](https://github.com/geops/rvf-mobility-web-component/commit/dc252e7b3ae78379b81f5340226cc2bc1402de9c))
+* fix css issue with serach when the browser is zoomed ([1201059](https://github.com/geops/rvf-mobility-web-component/commit/1201059c110960c9f74a6e89d8a72cbd9ca5c881))
+* fix search css when browser page is zoomed ([60dae1d](https://github.com/geops/rvf-mobility-web-component/commit/60dae1dbc0a415cdb401db13b3a3c438652b2f9a))
+* handle when selected Feature is a cluster and make overlay bigger ([255caa5](https://github.com/geops/rvf-mobility-web-component/commit/255caa5efef33741f566cca0610734135025f9c4))
+* increase overlay size ([da8ccf9](https://github.com/geops/rvf-mobility-web-component/commit/da8ccf911dbde93518944878a3944c545fc1bcfd))
+* merge upstream ([3232885](https://github.com/geops/rvf-mobility-web-component/commit/32328856b770fa95f5d3f3857d4681f9ad1d4677))
+* move up  reading Permalink ([fbf3af4](https://github.com/geops/rvf-mobility-web-component/commit/fbf3af4f74e9ed2d16e555024fa80cab486ca5a7))
+* move up  reading Permalink ([978df5b](https://github.com/geops/rvf-mobility-web-component/commit/978df5bc88355176f70b560a9e5a2daff9c5a9d2))
+* remove css file ([6ef6b1e](https://github.com/geops/rvf-mobility-web-component/commit/6ef6b1eedbf9da3b4cb8dde6564cb3183e9cbd00))
+* separate map layout from main component adn add lang attributes ([213c252](https://github.com/geops/rvf-mobility-web-component/commit/213c2528ab7d2b2910a41d5b55399066e3b145df))
+* set default value to read permalink template ([9aba6e9](https://github.com/geops/rvf-mobility-web-component/commit/9aba6e9023e0382cb7b2fa8b7eb64766d015bb26))
+* set icons size to 24 by default ([eef7342](https://github.com/geops/rvf-mobility-web-component/commit/eef734213a4b26d921e20cd8b6296cca0b2606b6))
+* use 320px for overlay width ([f75394e](https://github.com/geops/rvf-mobility-web-component/commit/f75394ebf84eff9f43dfbfa7127ae31f9a29f1bf))
+* use also default prop when available ([6c0e850](https://github.com/geops/rvf-mobility-web-component/commit/6c0e8508a1024abb600d2595bc6d02a22482d81c))
+* use good layer 's name in overlay ([023513c](https://github.com/geops/rvf-mobility-web-component/commit/023513c4c6538c5eb4ededdf60f3d9cb5469d22b))
+* use good layer 's name in overlay ([b2a3f95](https://github.com/geops/rvf-mobility-web-component/commit/b2a3f956915fe869d0860a947405d4f71924e019))
+* use good layer 's name in overlay ([46034e8](https://github.com/geops/rvf-mobility-web-component/commit/46034e8d405c5611799eb36c2ce44c72d605fcc5))
+* use proper template ([2e06883](https://github.com/geops/rvf-mobility-web-component/commit/2e068836c8a6faf7f3e66f3213c920aa4ad1c6b8))
+* use smaller font for copyright ([064733c](https://github.com/geops/rvf-mobility-web-component/commit/064733c482eba836cfb25449470aebb7bafaaf85))
+* use smaller font for copyrights ([93cea58](https://github.com/geops/rvf-mobility-web-component/commit/93cea589d03b9e0232527df8ac48abf2a305bfae))
+
 ### [0.1.59](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.58...v0.1.59) (2025-10-01)
 
 ### [0.1.58](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.57...v0.1.58) (2025-10-01)

package/README.md

@@ -15,7 +15,8 @@ Most components in RVF are mostly very generic and could be migrate to the main
 ## Links
 
 - [Vercel app](https://rvf-mobility-web-component-geops.vercel.app/)
-  [NPM package](https://www.npmjs.com/package/@geops/rvf-mobility-web-component)
+- [NPM package](https://www.npmjs.com/package/@geops/rvf-mobility-web-component)
+- [RVF design system](https://www.rvf.de/muster#c4523)
 - [Sketch file design system](https://www.sketch.com/s/71e4d120-f65f-4451-80c8-0a7e60e22265/p/22207D12-0F28-49D1-BCA4-1EDEF8B8BFE9/canvas)
 - [Sketch file design website](https://www.sketch.com/s/25c65997-d5d5-426f-b86c-a68c2de03524)
 - [VAG colors](https://www.vag-freiburg.de/fahrplan/linien-fahrplaene)
@@ -29,136 +30,26 @@ Most components in RVF are mostly very generic and could be migrate to the main
 
 This project contains a set of web components allowing to use easily the [geOps APIs](https://developer.geops.io/):
 
-- [`<geops-mobility>`](#geops-mobility-web-component): a web component used to display a map using different [geOps APIs](https://developer.geops.io/).
-- [`<geops-mobility-search>`](#geops-mobility-search-web-component): a search input to search stops using the  [geOps Stops API](https://developer.geops.io/apis/stops).
+- `<geops-mobility>`: a web component used to display a map using different [geOps APIs](https://developer.geops.io/).
+- `<geops-mobility-search>`: a search input to search stops using the  [geOps Stops API](https://developer.geops.io/apis/stops).
 
+## Demo
 
-## `<geops-mobility>` web component
+You can see the web components in action  using the [demo app](https://rvf-mobility-web-component.geops.io/).
 
-A web component used to display a map using different [geOps APIs](https://developer.geops.io/).
-
-The map displays realtime vehicles, and allow to click on them to display their schedule plan.
-You can also display MOCO notifications.
-
-### Demo
-
-You can see the web component in action using the [demo app](https://rvf-mobility-web-component-geops.vercel.app/).
-
-### Usage Example
-
-```html
-<html>
-  <body>
-    <script type="module" src="https://www.unpkg.com/@geops/rvf-mobility-web-component)"></script>
-    <geops-mobility apikey="YOUR_GEOPS_API_KEY" style="display: block;width: 400px;height: 800px;"></geops-mobility>
-  </body>
-</html>
-```
-
-### Attributes
-
-Here an exhaustive list of the `<geops-mobility>` web component attributes available to customize easily the map.
-
-- [`apikey="YOUR_API_KEY"`](https://mobility-web-component.geops.io/?apikey=YOUR_API_KEY): your [geOps API key](https://developer.geops.io/).
-- [`baselayer="travic_v2"`](https://mobility-web-component.geops.io/?baselayer=travic_v2): the style's name from the [geOps Maps API](https://developer.geops.io/apis/maps) (base_dark_v2, base_bright_v2, ...). Default to `travic_v2`.
-- [`center="831634,5933959"`](https://mobility-web-component.geops.io/?center=831634,5933959): the center of the map in EPSG:3857 coordinates. Default to `831634,5933959` (Bern).
-- [`extent="830634,5923959,831634,5933959"`](https://mobility-web-component.geops.io/?extent=830634,5923959,831634,5933959): the extent of the map of the map in EPSG:3857 coordinates. It has the priority over `center` and `zoom` attributes.
-- [`geolocation="false"`](https://mobility-web-component.geops.io/?geolocation=false): display the geolocation button or not (true or false). Default to true.
-- [`mapsurl="https://maps.geops.io"`](https://mobility-web-component.geops.io/?mapsurl=https://maps.geops.io): the [geOps Maps API](https://developer.geops.io/apis/maps) url to use.Default to `https://maps.geops.io`.
-- [`maxextent="830634,5923959,831634,5933959"`](https://mobility-web-component.geops.io/?extent=830634,5923959,831634,5933959): constraint the map in a specific extent  in EPSG:3857 coordinates, the user can not navigate outside this extent.
-- [`maxzoom="14"`](https://mobility-web-component.geops.io/?maxzoom=14): define the max zoom level of the map.
-- [`minzoom="2"`](https://mobility-web-component.geops.io/?minzoom=2): define the min zoom level of the map.
-- [`mots="rail,bus"`](https://mobility-web-component.geops.io/?mots=rail,bus): list of commas separated mots to display on the Realtime layer ( rail, bus, coach, foot, tram, subway, gondola, funicular, ferry, car).
-- [`notification="false"`](https://mobility-web-component.geops.io/?notification=true): display the notification layer or not (true or false). Default to true.
-- [`notificationat="2025-01-01T12:00:00Z"`](https://mobility-web-component.geops.io/?notificationat=2025-01-01T12:00:00Z): a ISO date string used to display active notification at this date in the notification layer.
-- [`notificationtenant=`](https://mobility-web-component.geops.io/?notificationtenant=): the MOCO notification tenant to get the notifications from.
-- [`notificationurl=`](https://mobility-web-component.geops.io/?notificationurl=): the MOCO notification url to get the notifications from.
-- [`permalink="true"`](https://mobility-web-component.geops.io/?permalink=true): add automatically an `x`,`y` an `z` URL parameters to the URL to allow to share the current map view. Default to false.
-- [`realtime="false"`](https://mobility-web-component.geops.io/?realtime=false): display the realtime layer or not (true or false). Default to true.
-- [`realtimeurl="wss://api.geops.io/tracker-ws/v1/ws"`](https://mobility-web-component.geops.io/?realtimeurl=wss://api.geops.io/tracker-ws/v1/ws): the [geOps Realtime API](https://developer.geops.io/apis/realtime) url to use. Default to `wss://api.geops.io/tracker-ws/v1/ws`.
-- [`search="false"`](https://mobility-web-component.geops.io/?search=false): display the search stops input or not (true or false). Default to true.
-- [`stopsurl="https://api.geops.io/stops/v1/"`](https://mobility-web-component.geops.io/?stopsurl=https://api.geops.io/stops/v1/): the [geOps Stops API](https://developer.geops.io/apis/stops) url to use. Default to `https://api.geops.io/stops/v1/`.
-- [`tenant="sbb"`](https://mobility-web-component.geops.io/?tenant=sbb): the tenant name to use to filter the Realtime vehicles available.
-- [`zoom="13"`](https://mobility-web-component.geops.io/?zoom=13): the zoom level of the map. Default to 13.
-
-### URL parameters
-
-You can specify all the web component attributes as url parameters to the demo app to customize easily the map.
-
-- [`/?apikey=YOUR_API_KEY`](https://mobility-web-component.geops.io/?apikey=YOUR_API_KEY)
-- [`/?baselayer=travic_v2`](https://mobility-web-component.geops.io/?baselayer=travic_v2)
-- [`/?center=831634,5933959`](https://mobility-web-component.geops.io/?center=831634,5933959)
-- [`/?geolocation=false`](https://mobility-web-component.geops.io/?geolocation=false)
-- [`/?mapsurl=https://maps.geops.io`](https://mobility-web-component.geops.io/?mapsurl=https://maps.geops.io)
-- [`/?maxzoom=14`](https://mobility-web-component.geops.io/?maxzoom=14)
-- [`/?minzoom=2`](https://mobility-web-component.geops.io/?minzoom=2)
-- [`/?mots=rail,bus`](https://mobility-web-component.geops.io/?mots=rail,bus)
-- [`/?notification=false`](https://mobility-web-component.geops.io/?notification=true)
-- [`/?notificationat=2025-01-01T12:00:00Z`](https://mobility-web-component.geops.io/?notificationat=2025-01-01T12:00:00Z)
-- [`/?notificationbeforelayerid=`](https://mobility-web-component.geops.io/?notificationbeforelayerid=)
-- [`/?notificationurl=`](https://mobility-web-component.geops.io/?notificationurl=)
-- [`/?permalink=true`](https://mobility-web-component.geops.io/?permalink=true)
-- [`/?realtime=false`](https://mobility-web-component.geops.io/?realtime=false)
-- [`/?realtimeurl=wss://api.geops.io/tracker-ws/v1/ws`](https://mobility-web-component.geops.io/?realtimeurl=wss://api.geops.io/tracker-ws/v1/ws)
-- [`/?search=false`](https://mobility-web-component.geops.io/?search=false)
-- [`/?stopsurl=https://api.geops.io/stops/v1/`](https://mobility-web-component.geops.io/?stopsurl=https://api.geops.io/stops/v1/)
-- [`/?tenant=sbb`](https://mobility-web-component.geops.io/?tenant=sbb)
-- [`/?zoom=13`](https://mobility-web-component.geops.io/?zoom=13)
-
-Another url parameter is used to get a full screen map instead of the documentation:
-
-- [`/?fullscreen=true`](https://mobility-web-component.geops.io/?fullscreen=true): display the web component in full screen mode.
-
-## `<geops-mobility-search>` web component
-
-A search input to search stops using the  [geOps Stops API](https://developer.geops.io/apis/stops).
-
-### Demo
-
-You can see the web component in action using the [demo app](https://mobility-web-component.geops.io/search.html).
-
-### Usage Example
-
-```html
-<html>
-  <body>
-    <script type="module" src="https://www.unpkg.com/@geops/mobility-web-component)"></script>
-    <geops-mobility-search
-      apikey="YOUR_GEOPS_API_KEY"
-      limit="5"
-      mots="rail,bus"
-      style="display: block;width: 800px;height: 800px;">
-    </geops-mobility>
-  </body>
-</html>
-```
-
-### Attributes
-
-Every parameters of the [geOps Stops API](https://developer.geops.io/apis/stops) can be passed as a string attribute of the web component.
-
-The list of parameters of the [geOps Stops API](https://developer.geops.io/apis/stops) can be found
-        [here](https://developer.geops.io/apis/stops#parameters).
-
-
-### URL parameters
-
-All the web component attributes can be specified as url parameters to the demo app to customize easily the search.
-
-Another url parameter is used to get a full screen map instead of the documentation:
-
-- [`/?fullscreen=true`](https://mobility-web-component.geops.io/search.html?fullscreen=true): display the web component in full screen mode.
+If supported, you can see the web-component in fullscreen mode using the URL parameter `fullscreen=true`:
 
 ## Development
 
 If you want only the basic HTML, faster development process.
+
 ```bash
 corepack enable
 yarn install
 yarn start
 ```
 
-If you want the documentation website:
+If you want the NextJS documentation website:
 
 ```bash
 corepack enable
@@ -166,15 +57,17 @@ yarn install && cd doc && yarn install
 yarn doc
 ```
 
-
 ## Deployment
 
-The demo app is deployed automatically after a merge on master using Vercel, on 
+The NextJS documentation website is deployed automatically after a merge on master using Vercel, on 
 [https://mobility-web-component.geops.io/](https://mobility-web-component.geops.io/).
 
+For forked project, the static index.html file is enough as documentation for the client. No need to provide the NextJS documentation website.
+Just set it up properly in vercel. See [RVF configuration](https://vercel.com/geops/rvf-mobility-web-component) for an example.
+
 ## Guidelines
 
-- every  new components must have a new folder `MyComponent` with an `index.tsx` that contains only an export and a `MyNewComponent.tsx` file. The reason is too simplifx the override in forked project.
+- every  new components must have a new folder `MyComponent` with an `index.tsx` that contains only an export and a `MyNewComponent.tsx` file. The reason is too simplify the override in forked project.
 
 ## Client specific code
 
@@ -185,7 +78,7 @@ Never add custom client specific stuff in this repository, instead:
 - change the package name in `package.json` to `@geops/trenord-mobility-web-component`.
 - change the `README` and `index.html` titles.
 - create a new `MobilityMap` component in `src/` called `TrenordMobilityMap`. In this component you can copy the content of `MobilityMap` or just use the `MobilityMap` component with default values. It depends of your use case.
-- change the `MobilityMap` import to `TrenordMobilityMap` in `src/index.tsx`.
+- change the `MobilityMap` import to `TrenordMobilityMap` in `src/MobilityMap/index.tsx`.
 - create a new npm package on `npmjs.com` from this repository, and call it `@geops/trenord-mobility-web-component`.
 - publish a beta version to test the publishing with `ỳarn publish:beta`
 
@@ -205,5 +98,5 @@ When you use a fork you can merge the upstream repository using:
 // Set up the upstream remote, to do only once
 git remote add upstream git@github.com:geops/mobility-web-component.git
 
-git fetch upstream && git merge upstream/main
+yarn upstream
 ```

package/docutils.js

@@ -105,7 +105,7 @@ function generateAttributesTable(
           class="border"
           name="${key}"
           ${checked ? "checked" : ""}
-          onchange="document.querySelector('${wc.localName}').setAttribute('${key}', this.checked);onAttributeUpdate(document.querySelector('${wc.localName}'),this.name, this.checked, '${reloadAttrs.join(",")}');" 
+          onchange="document.querySelector('${wc.localName}').setAttribute('${key}', this.checked);onAttributeUpdate(document.querySelector('${wc.localName}'),this.name, this.checked, '${reloadAttrs.join(",")}');"
           />`
           : `
         <input

package/index.html

@@ -37,6 +37,8 @@
       class="absolute inset-0 flex h-full w-full table-auto gap-4 flex-col border bg-black p-0 px-4 py-2 pt-2 text-white hover:bg-gray-700"
       style="display: none"
     ></div>
+    </script>
+<button onclick="document.getElementById('map').setAttribute('center',      '877430.64,6118377.18');document.getElementById('map').setAttribute('zoom','17.02');">Center and zoom to Denzligen</button>
     <div class="pt-2" style="display: none"></div>
     <div id="doc" style="display: none" class="mx-auto max-w-3xl space-y-4">
       <h1 class="flex gap-4"><img src="./Logo.svg">Mobility Web Component</h1>
@@ -48,7 +50,9 @@
       ></pre>
 
       <geops-mobility
+      id="map"
         class="block h-128 w-full resize overflow-hidden rounded-2xl border"
+        zoom="20"
       ></geops-mobility>
 
       <br />