{"id":18720031,"url":"https://github.com/geops/mobility-web-component","last_synced_at":"2025-08-02T15:32:49.501Z","repository":{"id":256775050,"uuid":"641850862","full_name":"geops/mobility-web-component","owner":"geops","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-30T11:13:05.000Z","size":3105,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-30T13:51:04.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mobility-web-component.vercel.app","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geops.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-05-17T09:46:13.000Z","updated_at":"2025-01-03T12:39:20.000Z","dependencies_parsed_at":"2024-09-13T02:00:55.807Z","dependency_job_id":"73b57bed-9031-48d3-9941-cbf85b9bfadd","html_url":"https://github.com/geops/mobility-web-component","commit_stats":null,"previous_names":["geops/mobility-web-component"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/geops/mobility-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geops%2Fmobility-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geops%2Fmobility-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geops%2Fmobility-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geops%2Fmobility-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geops","download_url":"https://codeload.github.com/geops/mobility-web-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geops%2Fmobility-web-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268410598,"owners_count":24246030,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T13:29:11.208Z","updated_at":"2025-08-02T15:32:49.472Z","avatar_url":"https://github.com/geops.png","language":"TypeScript","readme":"# mobility-web-component\n\nThis project contains a set of web components allowing to use easily the [geOps APIs](https://developer.geops.io/):\n\n- [`\u003cgeops-mobility\u003e`](#geops-mobility-web-component): a web component used to display a map using different [geOps APIs](https://developer.geops.io/).\n- [`\u003cgeops-mobility-search\u003e`](#geops-mobility-search-web-component): a search input to search stops using the  [geOps Stops API](https://developer.geops.io/apis/stops).\n\n## `\u003cgeops-mobility\u003e` web component\n\nA web component used to display a map using different [geOps APIs](https://developer.geops.io/).\n\nThe map displays realtime vehicles, and allow to click on them to display their schedule plan.\nYou can also display MOCO notifications.\n\n### Demo\n\nYou can see the web component in action using the [demo app](https://mobility-web-component.geops.io/).\n\n### Usage Example\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cscript type=\"module\" src=\"https://www.unpkg.com/@geops/mobility-web-component)\"\u003e\u003c/script\u003e\n    \u003cgeops-mobility apikey=\"YOUR_GEOPS_API_KEY\" style=\"display: block;width: 400px;height: 800px;\"\u003e\u003c/geops-mobility\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Attributes\n\nHere an exhaustive list of the `\u003cgeops-mobility\u003e` web component attributes available to customize easily the map.\n\n- [`apikey=\"YOUR_API_KEY\"`](https://mobility-web-component.geops.io/?apikey=YOUR_API_KEY): your [geOps API key](https://developer.geops.io/).\n- [`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`.\n- [`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).\n- [`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.\n- [`geolocation=\"false\"`](https://mobility-web-component.geops.io/?geolocation=false): display the geolocation button or not (true or false). Default to true.\n- [`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`.\n- [`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.\n- [`maxzoom=\"14\"`](https://mobility-web-component.geops.io/?maxzoom=14): define the max zoom level of the map.\n- [`minzoom=\"2\"`](https://mobility-web-component.geops.io/?minzoom=2): define the min zoom level of the map.\n- [`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).\n- [`notification=\"false\"`](https://mobility-web-component.geops.io/?notification=true): display the notification layer or not (true or false). Default to true.\n- [`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.\n- [`notificationbeforelayerid=`](https://mobility-web-component.geops.io/?notificationbeforelayerid=): the style layer's id before which the notification layer will be added. By default the layer will be added on top.\n- [`notificationurl=`](https://mobility-web-component.geops.io/?notificationurl=): the MOCO notification url to get the notifications from.\n- [`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.\n- [`realtime=\"false\"`](https://mobility-web-component.geops.io/?realtime=false): display the realtime layer or not (true or false). Default to true.\n- [`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`.\n- [`search=\"false\"`](https://mobility-web-component.geops.io/?search=false): display the search stops input or not (true or false). Default to true.\n- [`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/`.\n- [`tenant=\"sbb\"`](https://mobility-web-component.geops.io/?tenant=sbb): the tenant name to use to filter the Realtime vehicles available.\n- [`zoom=\"13\"`](https://mobility-web-component.geops.io/?zoom=13): the zoom level of the map. Default to 13.\n\n### URL parameters\n\nYou can specify all the web component attributes as url parameters to the demo app to customize easily the map.\n\n- [`/?apikey=YOUR_API_KEY`](https://mobility-web-component.geops.io/?apikey=YOUR_API_KEY)\n- [`/?baselayer=travic_v2`](https://mobility-web-component.geops.io/?baselayer=travic_v2)\n- [`/?center=831634,5933959`](https://mobility-web-component.geops.io/?center=831634,5933959)\n- [`/?geolocation=false`](https://mobility-web-component.geops.io/?geolocation=false)\n- [`/?mapsurl=https://maps.geops.io`](https://mobility-web-component.geops.io/?mapsurl=https://maps.geops.io)\n- [`/?maxzoom=14`](https://mobility-web-component.geops.io/?maxzoom=14)\n- [`/?minzoom=2`](https://mobility-web-component.geops.io/?minzoom=2)\n- [`/?mots=rail,bus`](https://mobility-web-component.geops.io/?mots=rail,bus)\n- [`/?notification=false`](https://mobility-web-component.geops.io/?notification=true)\n- [`/?notificationat=2025-01-01T12:00:00Z`](https://mobility-web-component.geops.io/?notificationat=2025-01-01T12:00:00Z)\n- [`/?notificationbeforelayerid=`](https://mobility-web-component.geops.io/?notificationbeforelayerid=)\n- [`/?notificationurl=`](https://mobility-web-component.geops.io/?notificationurl=)\n- [`/?permalink=true`](https://mobility-web-component.geops.io/?permalink=true)\n- [`/?realtime=false`](https://mobility-web-component.geops.io/?realtime=false)\n- [`/?realtimeurl=wss://api.geops.io/tracker-ws/v1/ws`](https://mobility-web-component.geops.io/?realtimeurl=wss://api.geops.io/tracker-ws/v1/ws)\n- [`/?search=false`](https://mobility-web-component.geops.io/?search=false)\n- [`/?stopsurl=https://api.geops.io/stops/v1/`](https://mobility-web-component.geops.io/?stopsurl=https://api.geops.io/stops/v1/)\n- [`/?tenant=sbb`](https://mobility-web-component.geops.io/?tenant=sbb)\n- [`/?zoom=13`](https://mobility-web-component.geops.io/?zoom=13)\n\nAnother url parameter is used to get a full screen map instead of the documentation:\n\n- [`/?fullscreen=true`](https://mobility-web-component.geops.io/?fullscreen=true): display the web component in full screen mode.\n\n## `\u003cgeops-mobility-search\u003e` web component\n\nA search input to search stops using the  [geOps Stops API](https://developer.geops.io/apis/stops).\n\n### Demo\n\nYou can see the web component in action using the [demo app](https://mobility-web-component.geops.io/search.html).\n\n### Usage Example\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cscript type=\"module\" src=\"https://www.unpkg.com/@geops/mobility-web-component)\"\u003e\u003c/script\u003e\n    \u003cgeops-mobility-search\n      apikey=\"YOUR_GEOPS_API_KEY\"\n      limit=\"5\"\n      mots=\"rail,bus\"\n      style=\"display: block;width: 800px;height: 800px;\"\u003e\n    \u003c/geops-mobility\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Attributes\n\nEvery parameters of the [geOps Stops API](https://developer.geops.io/apis/stops) can be passed as a string attribute of the web component.\n\nThe list of parameters of the [geOps Stops API](https://developer.geops.io/apis/stops) can be found\n        [here](https://developer.geops.io/apis/stops#parameters).\n\n\n### URL parameters\n\nAll the web component attributes can be specified as url parameters to the demo app to customize easily the search.\n\nAnother url parameter is used to get a full screen map instead of the documentation:\n\n- [`/?fullscreen=true`](https://mobility-web-component.geops.io/search.html?fullscreen=true): display the web component in full screen mode.\n\n## Development\n\nIf you want only the basic HTML, faster development process.\n```bash\ncorepack enable\nyarn install\nyarn start\n```\n\nIf you want the documentation website:\n\n```bash\ncorepack enable\nyarn install \u0026\u0026 cd doc \u0026\u0026 yarn install\nyarn doc\n```\n\n\n## Deployment\n\nThe demo app is deployed automatically after a merge on master using Vercel, on \n[https://mobility-web-component.geops.io/](https://mobility-web-component.geops.io/).\n\n## Guidelines\n\n- 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.\n\n## Client specific code\n\nIf a client, for example `trenord`, needs a `mobility-web-component` with custom functionnalities.\nNever add custom client specific stuff in this repository, instead:\n\n- create a fork from this repository, and call it `trenord-mobility-web-component`.\n- change the package name in `package.json` to `@geops/trenord-mobility-web-component`.\n- change the `README` and `index.html` titles.\n- 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.\n- change the `MobilityMap` import to `TrenordMobilityMap` in `src/index.tsx`.\n- create a new npm package on `npmjs.com` from this repository, and call it `@geops/trenord-mobility-web-component`.\n- publish a beta version to test the publishing with `ỳarn publish:beta`\n\nAt this point you're ready to create custom code, some rules must be followed to facilitate the merge of upstream `mobility-web-component` repository:\n\n- always create new components using the client name as prefix, like `TrenordRouteSchedule`,  or put them in a client specific folder `src/trenord/RoutSchedule`.\n- to use the overrided components just change the export in the `index.tsx` of the component to overrided.\n- never modify the original components in the forked repository, do it in the upstream repository then merge it in the forked repository.\n- never update dependencies in the forked repository, do it in the upstream repository then merge it in the forked repository.\n- if you have a doubt, ask.\n\n## Merge upstream repository\n\nWhen you use a fork you can merge the upstream repository using:\n\n```bash\n// Set up the upstream remote, to do only once\ngit remote add upstream git@github.com:geops/mobility-web-component.git\n\ngit fetch upstream \u0026\u0026 git merge upstream/main\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeops%2Fmobility-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeops%2Fmobility-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeops%2Fmobility-web-component/lists"}