I spend a good amount of time optimizing my frontend and making sure everything looks good, so I'd like to share my experience on that topic here. Obviously, everything I say is super subjective and everyone will feel different about it.

Just so we're on the same page here: When I'm talking about >frontend< I'm mainly talking about Discord messages and a map. I have no idea how Telegram works.

Tools

For Discord notifications I highly recommend Poracle - it's very actively maintained by very competent and cool people. It has every single feature you'd ever want and even more. There's also PoracleWeb that gives you and your users an interface to set up alarms.

Alternatively, you could use PokeAlarm, WhMgr (RDM only) or WDR (also just RDM)

As a map I use PMSF, but RocketMAD (mad only) and MapJS (rdm only) are also great options.

There's also ReactMap coming up that looks very promising.

Webhook DTS

The single most important part of your frontend: Good looking Discord notifications. Most of the time, this is the main form of "connection" between your users and MAD data, so having informative and good looking templates is very important.

Understanding Discord messages

Webhook vs Bot

There are two ways messages can be sent on Discord: Through webhooks and bot accounts. The main difference is that webhooks can have unique avatars and usernames. Since they offer more styling options, I recommend using webhooks instead of a bot for channel notifications.

Embeds

I'm sure you already know what embeds are. They allow a bunch of styling options you wouldn't be able to use in a normal message.

Helpful links

• Embed Visualizer (not very maintained but gets the job done)
• Webhook message limits
• Official Embed documentation

Different embed parts

To understand the different embed parts, go to the visualizer and look at the example. You can also look at the documenation for a more ..serious? description. Different things to note:

• Author and title have the same styling. Differences:
  • Title is white by default, if you add an URL to the embed, it's colored blue
  • Author with URL would stay white and it can have an icon next to it
• fields look the same as title+description but can be used repeatedly. If no title and description are used, a single field would basically look the same. Downside is you can't put a link in the field name
• Every component supports \n newlines
• Author name and footer text do not support markdown, everything else does
• [Embedded](links) are only supported in description and field text
• Places where you can put images:
  • Avatar (top left of the message)
  • Author icon (next to author text)
  • Thumbnail (top left of the message)
  • Image (Bottom of the message, very big) (Attention: Right side likes to cut off on Android)

Push notification content

Depending on what you put in your message, different things will show up in push notifications. I primarily tested this on Android (OxygenOS) and Windows (10) but believe the rules are very similar on other platforms

• Author and footer will never show in a notification
• Avatar will show on Windows and Android, not on iOS
• If there's content in the message, nothing of the embed will show up
• If there's no content, the title and/or description show up
• If there's neither content nor a title nor a description, the first field name + value will show
• Markdown will work well on (newer versions of) Android, are wonky on Windows and do not work on iOS. Try to not use them
• Do not use custom emotes or embedded [links](http://link.com) in parts that show in notifications. It's ugly.

Conclusion:

The goal is to quickly the tell the user what, where and how long: A 100% Magikarp with 122CP until 12:36pm at 24 Russell Rd., Mitcham, London. (more on geocoding later) - that's all you need to know to decide if you can get it and if you want it. If one doesn't apply, swipe the notification away. If both apply, click the notification and get all extra info you need: Moves, power-up costs, shiny availability, types, whatever.

For the best looking embed that also works well in a notification, put all relevant information in the title and description. Try to do it within 3 lines, so users don't have to expand the notification. Refrain from using markdown, custom emotes and embedded links here.

Now add a field (or multiple) where you're free to put everything in you want: custom emojis, markdown, links to websites, etc.

Put the mon icon at least in the avatar, so it shows up in notifications and you know even faster what just got scanned. I like to also put it in the thumbnail, which will make the embed look wider. In the image you can put a static map.

Geocoding

As mentioned earlier, reverse geocoding (coordinates -> address - i'll just call it geocoding) helps a lot to give a rough location estimate within the push notification. This is overlooked by sooo many people but saves sooo much time, since you don't have to click on every notification so see where the mon is located at.

More than just an addressed

An argument I often hear is that "no one knows the street names anyway", which might be true in bigger cities. Personally, I didn't know most street names in my town in 2016, but when we got our first scan notifications with addresses in, I quickly started to recognize a lot of names just from past notifications. And now, 5 years later 😳 I could basically go to every mon without even opening the notification.

However, geocoding can include more than just the street name and number. My address format looks like this: **Suburb** POI: Streetname, Streetnr, City. We have like 10-15 suburbs that are all relatively small, so it's super easy to quickly know if you can get the mon, just by reading the suburb name. Thus, I placed it at the beginning in bold (The only exception I made to my no-markdown-emotes-links rule!).

The POI part is very unique. I basically made a geojson in which I fenced every major place in my town, like squares, parks, malls, sights or even popular gyms/stops. While this only shows up in a fraction of mon notifications, it will help the most identifying where that mon is located at.

Note that I made a middleman for my fancy geocoding, which I might share but probably not. If you want to do it like me, you'd have to invest a good amount of time and effort.

Providers

There are a bunch of different geocoding providers that will all produce varying qualities of results. This will also be different per-location. So do some research and find out what works best for your area.

I live in northern Germany and I found that nominatim delivers the best results, but will return empty strings for locations that aren't near roads (e.g. locations within parks, fields or squares). So I used mapbox as a "back-up" provider if nominatim fails. I found that mapbox's geocoding doesn't work super-well but for these kinds of location, it will return the closest road.

Static Maps

Another big part of the notification: Static Maps. This used to be a struggle so set up, but with Flo's Tileserver, it's gotten super easy to set up. I spent a lot of time messing around with them, here's some tips I can give you:

To play around with Static Maps, either use the the UI or this link: url.com/staticmap?style=osm-bright&latitude=0&0&zoom=18&width=300&height=300&scale=1. For help on the Tileserver you can join the RDM Discord

• Playing with zoom, scale and width/height can give you different looking maps. Examples are in the image below.
  • Personally, I like to use zoom=16 and scale=2 with a small (around 300px) resolution. It's a good combination of not showing big features while also not being too far zoomed out.
  • If you want to find values that you like, I recommend to settle on a resolution first and then find a cool scale/zoom
  • Keep in mind you can use double values for zoom. E.g. 16.5 or 17.14 would also work for more fine-tuning

• Keep map resolutions as small as possible for faster notifications and better cellular data usage for your users
• Use my tileserver-middleman to host staticmaps on Discord. Even if your notifications may end up taking a few seconds longer to come in, they'll feel more responsive because the Static Maps will load in quicker.
• The middleman also has a feature to display Pokestops and Gyms. Super useful for when you're in-game and need some "marker" on where to go
• Tileserver comes with 2 map styles: klokantech-basic and osm-bright. Most tools use klokantech-basic as default, but I don't like it. #osmbightgang
  • If you really want to, you can also install more styles. I recommend using the UI for that. Check tileserver github and discord for instructions.
• If you're using satellite styles, like in my multimap template, keep in mind you can also use Google Satellite images for free. Since it may not be fully legal, you can go to the tileserver-announcements channel and scroll up a bit for instructions.