uatisdeproblem/egm-app

EGM app

egm-app's Issues

Navigation breaks after closing a nested modal

Well-known issue: ionic-team/ionic-framework#23863.

Use the useIonModal hook instead of inline modals.

Refactor app to use Angular + update AWS CDK

With the current React app as a base, refactor the current code base to use the Angular framework.

• Remake the app with the latest version of the AWS CDK starter kit
• Add any custom stacks the current app has to the updated back-end (i.e. MapStack)
• Rebuild the front-end in Angular
• Add mobile support with Capacitor

To-Dos

• cancel previous stacks and deploy new app on dev and prod
• Set the correct domains on environments.ts
• change the cloudfront ID's on release.sh
• change the docs URL to the ESN Int's one on swagger.yaml

Event agenda

As a participant, I'd like to interact with the event's agenda to know where I could go and at which time.

Chat between participants

As a participant, I'd like to be able to chat with other participants I connected to.

Organization page (detail)

As a partner, I'd like to have my business profile to let the participants know about my mission and job opportunities.

Starting point: the Organization page already implemented.

• Add a "Discover more" button that opens the website of the organization (attribute "website"); the button should be visible only if the attribute is set.
• Add a "Contact us" button that opens the email composer for sending an email to the organization main contact (attribute "contactEmail").
  • Example of the link under the button, to open the user's default email client: mailto:${organization.contactEmail}?subject=EGM%20contact%20request.
  • The button should be visible only if the "contactEmail" is set.
• Add to the bottom of the page the (filterable) list of the speakers part of this organization, ordered by [firstName, lastName]. Take a look at other filterable lists in the app to know how to implement this.

In the Speaker page:

• Where the organization name is displayed, add a link to open the organization's page in the app.

Feat: useful links

As a user, I'd like to be able to see all relevant documents associated to the event.

@uatisdeproblem Adel has requested me this, saying to base it off of the GA app's page with the same name. Does the GA app support inserting new links through the UI?

Lunch tickets

As a member of the OC, I'd like to check for Participants' lunch tickets in the app, to avoid printing paper tokens.

By Sara (logistics).

Critical aspects

Currently, anyone could register (with one or more accounts) to the EGM app. Hence, this could happen:

1. I create an account in the EGM app with my [email protected] email address, and I complete my profile as "Matteo Carbone".
2. I create a second account in the EGM app with my [email protected] email address and I complete a second profile as "Matteo Carbone".
3. Now I potentially have 6 lunch tickets (instead of 3).

Another issue: if I name the second profile “Matteo Smith”, how can the OC double-check it is an existing Participant? It could be extra work for the OC, compared with physical (paper) tickets -- that you "blindly accept".

Possible solution(s)

To overcome the above-mentioned issues, we need to find a way to univocally authorize the lunch tickets and link them to a specific Participant's app account. We thought about two solutions (each of them with its own pro and cons):

a. During the check-in/registration on the first day of the event, we assign a "lunch code" (that we previously generated -- one for each Participant); e.g. ABCDE123. The Participant will then have an option in the app to add this code and link the lunch capability to a specific app account.

• PROS: the user doesn't have to be registered already in the app / we don't create a queue of people that needs to register to the app to complete the check-in: they can simply store their code and type it in the app when they are ready.
• CONS: we need to print the "lunch code" to leave it to the Participant; at this point, does it make sense to simply print the lunch tickets instead?

b. During the check-in/registration on the first day of the event, the Participants have already an account in the app, and the OC member simply assigns them a lunch code (digitally) through a specific procedure in the app.

• PROS: it's completely digital -- we don't need to print anything.
• CONS: it requires the Participants to come to the registration/check-in at the event with the account in the app already created. The risk, if they don't do it, is to create queues at the check-in.

With both the solutions, once the lunch tickets are linked to the Participant's app account:

• Before each lunch, the OC members will be able to scan a QR code generated by the Participant's app to validate their lunch tickets.
• A used lunch ticket can't be reused.

User roles

As a user, I'd like to have a role so that I can have access to different functionality I need.

• Decide if roles are assigned automatically on sign up (using ERS-like forms) or by the administrator
• Guest/External role
• Participant
• Delegation Leader

Appreciation wall

As a participant, I'd like to add an appreciation thought to a feed, to spread love during the event.

Nice-to-have feature.

Abstract: a new tab "" will allow users to read other participants' appreciation thoughts throughout the event. It will be something similar to a big, common chat. Each participant can post one appreciation per hour (or a similar limit, to prevent spam). All the participants can add a "like" to an existing appreciation, which will power up a counter displayed with the appreciation entry. The general idea is to spread and promote positive thoughts during the event. There should be some "moderator" feature to delete inappropriate messages and block users from posting again. It could be fun!

Interaction between participants and partners

As a partner, I’d like to connect with participants that are interested in my job opportunities, to exchange contact information.

Speaker page (detail)

As a participant, I'd like to know more about a speaker and how to contact him

Starting point: the Speaker page already implemented.

• Add a "Contact me" button that opens the email composer for sending an email to the speaker (attribute "contactEmail").
  • Example of the link under the button, to open the user's default email client: mailto:${speaker.contactEmail}?subject=EGM%20contact%20request
  • The button should be visible only if the "contactEmail" is set.
• Add to the bottom of the page the (filterable) list of the sessions held by the speaker, ordered by date and time of start. Take a look at other filterable lists in the app to know how to implement this.

Add CV to participant profile

As a participant, I’d like to upload my CV to add it to my profile, so that companies can see it when they connect with me.

Reading the social card (QR code) of another participant.

As a participant, I'd like to connect with other users to get their information and enrich my connections/friends list.

• From the "You/profile" page, in the tab "friends list/connections" (name TBD), a button "Add connection" will allow you to scan the QR code of another participant. #26
• Once the participant to connect with is recognized, both the participants will be added to each other's friends list. #28

News (communications) feed

As a participant, I'd like to have a feed with all the important communications related to the event, so that I don't have to get searching elsewhere.

Base

• A Communication is a new entity with the following fields (@uatisdeproblem can help you with that):
  • communicationId: string,
  • title: string,
  • content: string,
  • publishedAt: ISOTimestamp,
  • imageURI: string.
• Implement the provider in utils/data.tsx to communicate with resources of this new entity. (@uatisdeproblem can help you with that)
• Add a new tab "News" and a new option in the menu.
• The page will show a list of news and communications, sorted by latest date.
• An Admin (user part of the admins group) will see a new option in the menu: "Add communication". Also: a new "manage icon" (as it happens with other entities of the app) will allow an Admin to edit an existing communication. Both of the actions will lead the admin in the ManageEntityPage, where they will be able to add/edit/delete a communication.

Nice-to-have

• On the News page, each news will have a dot to highlight if a communication has been read already or not; by clicking on it, it will mark the communication as "read".
• In case of new (unread) communications, a badge will appear over the News tab icon.
• A new button in the News page will allow the user to subscribe (/unsubscribe, as a toggle) to the feed, hence receiving an email notification when a new communication is posted. Note: so far we have not enough reasons nor workforce to deploy the app on mobile stores; therefore, we can't make use of push notifications via web-app (iOS doesn't support them yet).

Improve list pickers

All the pickers (ion-select) currently available could be improved to support filtering; this is useful, especially, for long lists (such as languages, ESN sections, fields of expertise, speakers, etc.).

Two possible solutions:

1. Use the component of an existing library (e.g. https://www.npmjs.com/package/react-native-dropdown-picker) that fits nicely with our current UI/theme/style; in other words, the appearance should be uniform with the rest of the existing fields (from Ionic).
2. Create a custom component:
   • a "select" component that shows the current selection and opens the picker on click.
   • a list to display in a modal that enables the selection of one or more elements.

An example of the component for solution 2. which we created for Angular projects:

Screen.Recording.2022-02-18.at.14.05.28.mov

Screen.Recording.2022-02-18.at.14.07.28.mov

The solution should then be implemented to all the current <ion-select> pickers in the app.

Login with ESNAccounts API

As participant, I'd like to login with my ESN account so that I don't have to keep track of which emails I am using, rendering the experience easier.

• Add the login with ESN accounts based off the current GA app
• Keep the current login with Cognito as an alternative for externals
• In the login page add the options to login as an ESNer or login as an external.

Social links in user profile

As a Participant, I'd like to add the links to my social media accounts in my profile, to let the other participants find me on the internet.

• Define a few major social networks to include; e.g. Facebook, Instagram, Twitter, Tiktok.
• Add a new section in the profile "Social".
• For each social network picked, insert a new field to save the URL to the social media account of the user.

Add a map page

As a user, I'd like to see a map on the app so that I can see where the venues are located, set custom waypoints and check local suggested places by the OC

• Add the app stack as seen on the previous version of the app (react)
• Allow the user to add his own points of interest (more than 1)
• Allow the organization to add the venus as well as other points of interest (such as pubs, gardens,pharmacies, etc...)

Add mobile support

Improve UI on mobile devices

• Auth: avoid header and footer disappearing while loading.
• Agenda: show a reference to the session type in the session items.
• Agenda (dark): make venue and speakers font colour lighter. -> verify ion-color-steps.
• Agenda: in the session items save some space between time/star and contents.
• Change the tab "Map" name into "Venues"; change the internal section "Venues" in "List".
• Change the tab "Profile" in "You"; the icon should resemble a "network" since the page will include both profile and "friends list". Add two tabs: "profile" and "friends". (needed in #7)
• The profile field "email" should be obligatory and pre-filled with the account email. (needed in #11)
• Fix: download CV on web-app iOS.

Add links to social media buttons on social card modal

The buttons are working correctly but they're still missing a link to the user's social media.

Ideally they should also be able to open the user's app instead of a new browser tab

possibly relates to #35

Spots management (end)

Here's what (I believe) is missing from the event spots management. I will work on it this weekend.

From spots list

• Assign to user
  • idea-select to pick user → confirmation alert → email.
  • Only with single selection.
  • Transfer to user (label change in case it's already assigned).
• Assign to country
  • idea-select to pick country → confirmation alert → no email
  • Transfer to country (label change in case it's already assigned).
• Release spot (de-assign)
  • Only if previously assigned to user or country.
• Edit description
  • Alert with input.
• Delete spots
  • Alert.
• Confirm (payment and) participation.
  • Alert → email.
  • Only with single selection.

From users list

Turn into single-selection mode (they are all single-user actions).

• Assign spot to user.
  • idea-select to pick spot → confirmation alert → email.
• Manage permissions.
  • Opens a modal/alert.
• Confirm (payment and) participation.
  • Alert → email.
• Delete user.
  • Alert con confirm key.
• Assign country spot.
  • Only for delegation leaders.
  • No spot selection: assign first one available.
  • Add counter in the action bar to alert of how many country spots are currently available.

User

• Download invoice (wait for @rbento1096).
• Upload proof of payment.
• Download proof of payment.

Email sending

• Send email based on templates in the source code's @todo. @rbento1096

Link the Organizations to their profile on Talent Portugal (Mobility Fair platform)

There will be a specific platform for the Mobility Fair, hosted by Talent Portugal (link). Therefore, it won't be necessary anymore to have a specific feature in-app to handle the contact between a Participant and an Organization (sorry, Bento 🥲).

After a meeting with Joli, we contacted Talent Portugal (TP) to ask them for the link to the profiles of the companies participating in the fair. In the app, we only need to change the current behaviour of the button "I'd like to get in contact": instead of sending an email, the button should just open the browser towards the company's profile on TP's platform.

When TP will confirm the links, we will complete this change within the app.

Add buttons to automatically fill social fields with user's links

It would be nice to have a button for each social media app to automatically fill in their respective fields with the user's links instead of having to manually copy and paste the info.

There is probably an API already for this

Push notifications

As as a user, I'd like to receive notifications on my mobile so that I can know the latest news and be reminded of time-sensitive topics (i.e. a session is about to start, a session room has been changed, etc...)

• add automatic notifications
• add manual notifications?

Manage admins in-app

Instead of using the console of Cognito, allow an administrator to add/remove other administrators directly in the app.

Description and note fields as markdown strings

• Improve the note/description fields of all the entities (organizations, speakers, etc.) to support markdown markup.
• In the pages that allow editing those fields:
  • Turn the inputs into text areas.
  • Add a basic/simple toolbar (or lib?) to suggest the use of markdown language.
• In the pages that view those fields:
  • Convert markdown strings in HTML.

Speakers and Sessions

Certain participants (from any role) can also be speakers at the conference.

• Identify participants as speakers (method not decided, could be a flag, a method, etc...)
• Speakers should be able to manage their sessions (t.b.d. what they can change) and view its participants
• Participants should be able to rate sessions from a scale of 1-5 and leave written feedback if they so desire
• IDEA: presence list, speakers can check which users attended their session (alternatively, use a QR Code for logistical purposes). Delegation leaders can see if their participants attended their sessions or not.

Useful links (not an issue)

• App content recap OC
• Agenda of the event
• Agenda: common sessions in Auditorium
• Agenda: OC sessions
• Venues
• Sessions details and rooms placement
• Unorganized pics of the Venues (1)
• Unorganized pics of the Venues (2)

Feat: registrations export data

As a user with permissions to view the user list (DL, OC, Admin...) I want to be able to export the users' registration data to a csv/excel file

Allow participants to connect

As a participant, I'd like to request the acceptance of a connection ("become friends") to other participants, to exchange contacts.

Note: to avoid over-complicating, we won't include a chat component inside the app. Instead, we will let the users share each other's contact information, to communicate outside the app (e.g. on WhatsApp, Telegram, Facebook, Instagram, etc. — depending on #25).

Note 2: to maintain a basic level of privacy, and to enable a social component (explained at the bottom) during the event, it won't be possible to search through the participants of the event. Instead, you will need a QR code or link to "become friends" of a participant and exchange contact information.

The user story is implemented in several parts:

• #26
• #27
• #28

Social component during the event

As an extra, we could plan (prized?) game to award the participant that will make more connections before the end of the event). Gotta catch'em all!

News: notifications

Continue from #29.

• A new button in the News page will allow the user to subscribe (/unsubscribe, as a toggle) to the feed, hence receiving an email notification when a new communication is posted. Note: so far we have not enough reasons nor workforce to deploy the app on mobile stores; therefore, we can't make use of push notifications via web-app (iOS doesn't support them yet).

Venues map

As a participant, I'd like to interact with a map of the venues to orient myself through all the event's activities.

feat: automatically import sessions/speakers

to investigate: Find a way to make the process automatic.

Ask programme chair how the session proposal/approval is currently being done and investigate the feasability of doing it in-app

Badges and statistics

Add event statistics (such as number of different nationalities, total sessions, participants, etc...) users can see. Additionally create badges when users reach certain landmarks to improve engagement (i.e. attended x sessions, met people from all nationalities, etc...). To discuss with team

Hide/show past Sessions

As a Participant, I'd like to have an option to show/hide past Sessions among my favourite ones, to have a clearer view of what's still about to happen.

Connections: search for other Participants

As a Participant, I'd like to search for other Participants and send them Connection requests (without the use of QR codes or similar approaches), to access their contacts and enrich my Connections list.

Alternative to #39, which has been proved difficult to handle without deploying the app natively (through Ionic Capacitor).

• Instead of requesting an email address of the user we want to connect with, the Add a connection button (You > Connections) should open (in a modal) a filterable list of the platform's Participants. Note: only summary information of each Participant should be downloaded from the back-end and displayed, for privacy reasons; i.e. to access contacts and other info about other Participants, they first have to accept our Connection request.
• By selecting a Participant from the list, we can send them a Connection request; a new Connection is established in "pending" state.
• The Participants list, for each Participant, will show an icon in case a Connection request has been sent (and not accepted yet); by tapping it, the User can cancel the Connection request, i.e. delete the Connection.
• When the target Participant enters the connections page (we can't use push notifications, and emails would be spammy), they will see a badge in case of Connections requests. They will then be able to accept or deny the pending Connections.
• When a Connection is confirmed, the Participants will see each other in the Connections list; for this reason, the latter should be changed to display only confirmed (non-pending) Connections.

Migrate content from old app

Migrate all the features from the previous app in React to Angular (i.e. sessions):

• #60
• #57
• #61
• #40
• #103
• #104
• #105
• #106
• #107
• #108
• #109
• #110
• #111
• #114

List the participants you connected to and see their social card.

As a participant, I'd like to see the participants connected to me, to access their contact information.

• In the "You/profile" page, the tab "friends list/connections" (name TBD), show the social cards (created in #26) of the users I connected with.
• The list will be filterable by the social card attributes.
• The list should be paginated, to avoid slowing down older devices with long lists.

Creation (and display) of your social card (with QR code).

As a participant, I'd like to display my social card, so that other participants can connect with me and acquire my contact information.

• From the "You/profile" tab, it will be possible to "open" your social card, i.e. opening a modal/popup displaying your basic information (e.g. Name, picture, ESN section, ESN Country and an icon for each social network linked) together with a unique QR code that can be scanned by other users.
• Each social icon should be actionable, i.e. by clicking on it it should open the browser towards the social links.

Venue page (detail)

As a participant, I'd like to know how to reach and what is happening in a specific venue of the event, to orient myself content-wise and location-wise

Starting point: the Venue page already implemented.

• If set, display the field "address", which was recently added to the data model (but is currently not shown on the page).
• If set, display a new image (after the venue description) using the URL available in the attribute "plantImageURL"; be sure to hide the image in case it's not available (fallback). You can check how to implement a fallback action by looking a the main venue IonImg tag.
  • Note: the image will show a map of the building (in case the venue is an internal room) with highlighted the location of the room, to give the user a direction in how to reach it.
  • Don't worry about the images: we will add them later on.
• Add a button "how to reach it" that opens a link in Google/Apple maps in navigation mode; on mobile devices, this will open the navigator app to let the user be guided towards the destination.
• Add to the bottom of the page the (filterable) list of the sessions happening in the venue, ordered by date and time of start. Take a look to other filterable lists in the app to know how to implement this.

In the Map page:

• Add a new button (below "See details") in the venue popup that appears when you click on a location: "Get directions" (same behaviour as the "how to reach it" button above).

Customisable event agenda

As a participant, I'd like to star (flag) events in the agenda to create my own personalized timetable.

IDEAS - LIST

This issue serves the purpose to list all current ideas proposed for the app. Some need to be discussed better with OC/IB, others need a technical analysis, others will be ready to add to the timeline.

• Buddy families
• #30
• Alissa: I have another random idea... how easy/difficult would it be to make it possible for participants to subscribe to certain notifications. What I am thinking for example is that they can register to get sport challenges (can be like a checkbox on their profile or QR code we have at the info point or whatever...) and when they do, they get notifications from us with sport challenges in them

Participant profile

As a participant, I'd like to create my profile/portfolio to showcase my skills to partners and some brief information about me to other participants.

• Add a multiple-select field "Spoken languages" to allow the user to showcase the languages he speaks. The origin list is available at utils/languages.tsx.
• Add a select field "Field of expertise" to let the users choose their field of study/work. The origin list is available at utils/fieldsOfStudy.tsx; note: it's an enum field.
• Add an input field of type email "Contact email" to let the users insert an email address of contact.
• Add an input field of type tel "Contact phone" to let the users insert a phone number of contact.
• Add a textarea field "About me" (attribute "bio") to allow the user to write something about himself.
• Add a checkbox field "I'm interested in job opportunities", to allow the user to express their intentions in this sense.

All the fields are optional.

The fields should be organized in different sections, divided by an item-divider (see the Profile page for an example):

• Basic information:
  • First name
  • Last name
• Contacts:
  • Email
  • Phone
• Skills:
  • Languages
  • Fields of expertise
• ESN:
  • ESN Country
  • ESN Section
• Extra:
  • Bio
  • Open to job

Note: take a look how the current profile fields are set, to ensure they are saved and read correctly.

Creation and management of event sign ups

To be discussed with the IB/CT and Gorka. The plan is to substitute ERS as the platform to handle all event registrations.
Required features and requirements will be discussed on a future meeting.

So far we know we will need:

• Spot assignment and approval
• Document generation
• Document upload (for proof of payments, etc...)

Allow users to let an organization know they are interested (send CV)

As a participant, I'd like to notify an organization that I'm interested in working/collaborating with them and send my contact information so that they can contact me back.

• On the organization page, show a new button "I'd like to get in contact".
• On click, show an alert to select via checkboxes which data to send to the organization:
  • Name (always selected, disabled).
  • Email (always selected, disabled).
  • Phone number (enabled only if the user added the info in the profile).
  • CV (enabled only if the user added the info in the profile).
• At confirmation, an email will be sent to the contactEmail address of the organization, with included/attached the information selected. The email will have a pre-defined subject and content. (@uatisdeproblem can help you with this!)
• Show loaders (ion-loading) and messages (ion-toast) according to the state of the operations (e.g. "Nice, you've sent your data to " or "Operation failed; please try again"). You can see examples already in the code, e.g. the user profile.

Add a new connection via QR code

The previous QR code scanning configuration wasn't stable enough, therefore we switched to another "pairing" mechanism for managing connections. We are running out of time, so we needed something that could work correctly as of now.

It would be nice though to find a solution to manage this behaviour with QR codes as originally planned.

Here's some useful code already implemented.

The QR code generation-part is stable:

import QRCode from 'qrcode.react';
// ...
<QRCode value={profile.userId} size={200} />

whereas we have to fix the QR scanning part, because it requires the QR code to be perfectly aligned in the camera and it's not working all the time:

import { Html5QrcodeScanner } from 'html5-qrcode';
import React from 'react';

const qrcodeRegionId = 'html5qr-code-full-region';

class Html5QrcodePlugin extends React.Component {
  render() {
    return <div id={qrcodeRegionId} />;
  }

  componentWillUnmount() {
    // TODO(mebjas): See if there is a better way to handle
    //  promise in `componentWillUnmount`.
    this.html5QrcodeScanner.clear().catch(error => {
      console.error('Failed to clear html5QrcodeScanner. ', error);
    });
  }

  componentDidMount() {
    // Creates the configuration object for Html5QrcodeScanner.
    function createConfig(props) {
      var config = {};
      if (props.fps) {
        config.fps = props.fps;
      }
      if (props.qrbox) {
        config.qrbox = props.qrbox;
      }
      if (props.aspectRatio) {
        config.aspectRatio = props.aspectRatio;
      }
      if (props.disableFlip !== undefined) {
        config.disableFlip = props.disableFlip;
      }
      return config;
    }

    var config = createConfig(this.props);
    var verbose = this.props.verbose === true;

    // Suceess callback is required.
    if (!this.props.qrCodeSuccessCallback) {
      console.error('qrCodeSuccessCallback is required callback.');
    }

    this.html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
    this.html5QrcodeScanner.render(this.props.qrCodeSuccessCallback, this.props.qrCodeErrorCallback);
  }
}

export default Html5QrcodePlugin;

import Html5QrcodePlugin from './HTML5QRCodeReader';
import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonToolbar } from '@ionic/react';
import { close } from 'ionicons/icons';

interface ContainerProps {
  onDismiss: () => void;
}

const AddConnection: React.FC<ContainerProps> = ({ onDismiss }) => {
  const qrCodeSuccessCallback = (data: any) => {
    console.log('much success', data);
  };
  const qrCodeErrorCallback = (error: any) => {
    console.log('oh no', error);
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonButton onClick={onDismiss}>
              <IonIcon icon={close}></IonIcon>
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <Html5QrcodePlugin qrCodeSuccessCallback={qrCodeSuccessCallback} qrCodeErrorCallback={qrCodeErrorCallback} />
      </IonContent>
    </IonPage>
  );
};

export default AddConnection;

Feel free to change the libraries or any support tool needed.

From #7.

Onboarding (intro)

As a participant, I'd like to see an introduction to the event and the app capabilities (menu) to make sense of the app.

Suggestion: make use of Intro.js: it provides you an easy way to implement this issue; otherwise, use/build the tool you prefer!

• During the first login of a user in the app, we should display some introductionary text that lead the user in discovering:
  • The agenda tab: here users can see the sessions and build their customized agenda.
  • The map tab: here users can see the venues (list and map) of the event.
  • The profile tab: here users can build their profile.
  • The menu tab: here users can run other actions and access speakers lists, etc.

Feel free to include any information you think is useful. 😉

The final result should look something like the following (highlighting and explaining the sections listed above):

intro-example.mov

Auth UI freezes on iOS Safari

The user isn't able to interact with the Auth UI when navigating with Safari in the latest versions of iOS.

In particular, you cannot type anything inside the input fields: they seem to lose focus continuously.

"Set my home" in the venue map

As a participant, I would like to add a custom location in the map, to mark my hotel/apartment, so that I can easily reach it and see where it is, compared to the other venues.