Home

Awesome

Mapus

Preview <br> Maps with real-time collaboration πŸ—ΊοΈ

Mapus is a tool to explore and annotate collaboratively on a map. You can draw, add markers, lines, areas, find places to go, observe other users, and much more.

<a href="https://www.producthunt.com/posts/mapus?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-mapus" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=307018&theme=light&period=weekly" alt="Mapus - An open source map tool with real-time collaboration | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

You can support this project (and many others) through GitHub Sponsors! ❀️

Made by Alyssa X

Table of contents

Features

πŸ™Œ Real-time collaboration to help plan trips synchronously<br> ✏️ Draw to highlight areas on the map<br> πŸ“ Create lines to designate paths and measure distance<br> πŸ“ Create areas to mark different zones<br> πŸ“ Create markers to save places on the map<br> β˜•οΈ Find places and things to do nearby<br> πŸ” Search and navigate to specific places<br> πŸ‘€ Observe other users by clicking on their avatar<br> πŸ“ View a list of all the annotations, and toggle their visibility<br> πŸ’Ύ Export the map data as GeoJSON<br> ...and much more - all for free!<br>

It's basically Google's MyMaps, except it has real-time collaboration.

Installing Mapus

Since real-time multiplayer can get expensive (even though Firebase has a pretty generous free plan), you'll need to self-host Mapus to use it. Here's how:

  1. Download the code. In the web version of GitHub, you can do that by clicking the green "Code" button, and then "Download ZIP". You'll be using the src folder.
  2. Create a Firebase account and project. You can check out the docs to see how to get started.
  3. Create a Realtime Database. You may need to set up specific rules to keep the data safe, here's an overview. The default rules though will work fine for testing and development, just not for production.
  4. Enable Google Sign In in the Firebase console. Here's how.
  5. Replace the Firebase config object in the index.html file with your own. The docs explain how to get the object.
  6. In order for the authentication to work, you need to run Mapus in a server. Here's a few ways to do it in localhost. Then go to the Firebase console, click on "Authenthication" in the sidebar, then on the "Sign-in method" tab and add your domain (or localhost) in the authorized domains list.
  7. At this point you could just use the tool as is, but if you want to make sure you don't go over the Firebase free plan limits, you could set up the Firebase Emulator and run everything locally 100% for free.

Note that since Mapus has a MIT License you are free to set it up in a domain or even commercialize it.

Miscellaneous ideas

Throughout the development of Mapus I've had several ideas in regards to additional features, potential use cases, and more. I thought it would be a good idea to share, if anyone wants to contribute to Mapus, or make their own version.

<a name="feature-ideas"></a>Feature ideas πŸš€

<a name="potential"></a>Potential use cases πŸ€”

<a name="monetization"></a>Monetization πŸ’΅

Libraries used

Feel free to reach out to me through email at hi@alyssax.com or on Twitter if you have any questions or feedback! Hope you find this useful πŸ’œ