mobility-web-component
A web component used to display a map using different geOps apis.
The map displays realtime vehicles, and allow to click on them to display their schedule plan. You can also display MOCO notifications.
Usage Example
<html>
<body>
<script type="module" src="https://www.unpkg.com/@geops/mobility-web-component)"></script>
<geops-mobility apikey="YOUR_GEOPS_API_KEY" style="display: block;width: 400px;height: 800px;"></geops-mobility>
</body>
</html>Development
yarn install
yarn startURL parameters
You can specify all the web component attributes as url parameters to customize easily the map.
- apikey: string;
- baselayer?: string;
- center: string;
- geolocation?: string;
- maxzoom?: string;
- minzoom?: string;
- mots?: string;
- notification?: string;
- notificationat?: string;
- notificationurl?: string;
- notificationbeforelayerid?: string;
- realtime?: string;
- realtimeurl?: string;
- tenant?: string;
- zoom: string;
Another url parameter is used to get a full screen map instead of the documentation:
- fullscreen=true
Guidelines
- every new components must have a new folder
MyComponentwith anindex.tsxthat contains only an export and aMyNewComponent.tsxfile. The reason is too simplifx the override in forked project.
Client specific code
If a client, for example trenord, needs a mobility-web-component with custom functionnalities.
Never add custom client specific stuff in this repository, instead:
- create a fork from this repository, and call it
trenord-mobility-web-component. - change the package name in
package.jsonto@geops/trenord-mobility-web-component. - change the
READMEandindex.htmltitles. - create a new
MobilityMapcomponent insrc/calledTrenordMobilityMap. In this component you can copy the content ofMobilityMapor just use theMobilityMapcomponent with default values. It depends of your use case. - change the
MobilityMapimport toTrenordMobilityMapinsrc/index.tsx. - create a new npm package on
npmjs.comfrom this repository, and call it@geops/trenord-mobility-web-component. - publish a beta version to test the publishing with
ỳarn publish:beta
At this point you're ready to create custom code, some rules must be followed to facilitate the merge of upstream mobility-web-component repository:
- always create new components using the client name as prefix, like
TrenordRouteSchedule, or put them in a client specific foldersrc/trenord/RoutSchedule. - to use the overrided components just change the export in the
index.tsxof the component to overrided. - never modify the original components in the forked repository, do it in the upstream repository then merge it in the forked repository.
- never update dependencies in the forked repository, do it in the upstream repository then merge it in the forked repository.
- if you have a doubt, ask.
Merge upstream repository
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