alyssaxuu / mapus Goto Github PK

A map tool with real-time collaboration 🗺️

License: MIT License

HTML 7.49% JavaScript 72.94% CSS 19.57%

real-time collaboration map maps google-maps leaflet annotation drawing trip planning

mapus's Introduction

You can follow my maker journey by subscribing to my newsletter 💌

I'm a serial entrepreneur who has shipped 12+ products, been twice a Maker of The Year finalist, and created some of the top products on Product Hunt. Featured in Fast Company, YCombinator HN, Smashing Magazine, Awwwards, Women Who Design, Product Hunt, Sidebar, CSS-Tricks, Muzli, HeyDesigner, Changelog, Codrops, HackerNoon, Google Open Source Peer Bonus, and more.

PRODUCTS

🎥 Screenity, the free and privacy-friendly screen recorder with no limits (over 180K users, #1 Product of The Day).
✨ Flowy, a minimal flowcharting library.
♻️ EcoSnap, an app to help you recycle plastics better using Artificial Intelligence (built with Leonor Furtado)
📽 Motionity, a web-based motion graphics editor (a mix of Canva and After Effects).
🗺️ Mapus, an open source map tool with real-time collaboration (Golden Kitty Awards finalist & #3 Product of The Week).
🖱️ Later, a menu bar app for Mac to save apps for later (over 1000 copies sold & >$7K made).
⌨️ Omni, the all-in-one tool to supercharge your productivity (over 20K users & JsNation 2022 OSAwards winner).
🔥 Animockup, an editor to create stunning product teasers with animated mockups (Golden Kitty Awards finalist).
👻 Jumpskip, an extension to watch horror movies and series on Netflix without the jumpscares (Golden Kitty Awards finalist).
✍️ Slashy, a Notion extension to add custom commands to draw, record, and more.
🌱 Carden, a science-based flashcard app with spaced repetition (made with Anne-Laure Le Cunff).
🚀 CreatorScout, a platform to discover Twitter accounts to follow & promote your own.
🎮 Figma platformer maker, a no-code way to create platformer games in Figma.
📽️ Figma to Google Slides, an extension to convert Figma frames into a Google Slides presentation.

If you'd like to discuss any sort of opportunity, feel free to contact me.

mapus's People

Contributors

Stargazers

Watchers

Forkers

folkevil geogubd basarozcan didierhk kishoraditya diegoug landsurveyorsunited kennethdolk kirschd rembrandtqeinstein anthonyliriano 1boris kirkryan adiorahksu zaarheed mikeydub newgenapps openhistorymap muhammed-ajmal hnq90 neilborromeo maniacs-oss lukekuenneke shamsmosowi dahackett project-demo-auto nepgearg yifree designedbyclu herolibra loongmxbt buyrs kartobit prashant-shahi aardabayram hmidani-abdelilah transformaps cjh0613 pilgrim2go rasarab mayankmandloi hadryan jemaz shaunstanislauslau 1crazymoney lunamcsv l1kw1d xregitx dkasuga rashid2003 mohsinali678 bigeard kg4lp mu-l samarthsikotara amortka jonyhuang asklinux kekewind greenblacked alikom zhanggenlove connorgodbike worldcentral anonymousdevteam jemacchi bobflay der-ofenmeister frankyu0326 403-fruit suryatmodulus igledaniel ciscoox shihyuyu datawego kawael yeohoonyun carloswalter igoves mysticaltech tan1010 alientales cybernetics appdirectory scrapenx bluecommunitysustainability aroksetx amit-y11 eudaimoniatech lcsouzamenezes ertprs christian-barnabe-chabi ideabrian esimionato ibnuhabibie tejau guezone fairhopeweb devanandgowda unanonmy

mapus's Issues

style.css——color-list

#color-list {
  position: absolute;
  /*margin-top: -85px;*/
  margin-top: -300px;
  height: 40px;
  background-color: #FFF;
  border-radius: 5px;
  border: 1px solid #EAEAEA;
  /*padding-left: 10px;*/
  padding-left: 5px;
  transform: translateX(-50%);
  /*margin-left: 15.5px;*/
  margin-left: 10px;
  width: fit-content;
  visibility: hidden;
}
.color-enabled {
  visibility: visible!important;
}
.color {
  width: 20px;
  height: 20px;
  background-color: #624EEF;
  display: inline-block;
  /*margin-right: 10px;*/
  margin-right: 5px;
  border-radius: 50%;
  margin-top: 10px;
}

Hi!
Thanks for a great project!
It looks like it depends on firebase, but it doesn't need to.
There is a replacement for firebase called supabase... Not sure how hard could be to migrate, but it is definitely worth trying as it would mean no external dependencies.
https://supabase.io/

Geojson export without attribute

Hi, for few days recently I have been testing your app and found out that exported geojson files do not have attributes like color, name and description, only geometry.

P.S. Also if possible you could have a screen-flexible version for the app, since leaflet geoman can be usable on smartphone and tablet.

AutoMerge for sync

Heya, really cool project you made!

I was reading the bit about the data persistence and how it's hard to sync between clients without incurring costs right now, and https://github.com/automerge/automerge came to mind. It uses CRDTs to sync between clients and get to a consistent state, working as offline-first.

I think using that approach for mapus could work if sync was between clients with something like web rtc, and clients kept local state. Then whenever two users that wanted to do stuff together connected to each other, they'd propagate the changes they have to the map. A new user coming to see that map without no other client online would be out of luck though.

Maybe that's enough for ephemeral collaborative sessions though?

AutoMerge has a webrtc lib in https://github.com/automerge/mpl, but for the life of me I can't understand how that example connects.

An alternative for AutoMerge is https://github.com/yjs/yjs, that seems to have a first party webrtc connector in https://github.com/yjs/y-webrtc. I've heard good things about yjs so maybe it's a better starting point right now than AutoMerge.

When I refresh the page, I log out

When I refresh the page, I log out, which feels that the experience is not very good

supa-mapus

supa-mapus demo
document

function focusMapName add disabled

  function focusMapName() {
    $("#map-name").select();
    $("#map-name").addClass("map-editing");
    $("#map-name").prop("disabled", false);
  }

{
    "type": "Feature",
    "properties":
    {
      "textMarker": true,
      "text": "测试文字1",
      "icon":
      {
        "options":
        {
          "className": "pm-text-marker",
          "html":
          {
            "_leaflet_id": 230
          }
        },
        "_initHooksCalled": true
      },
      "type": "marker"
    },
    "geometry":
    {
      "type": "Point",
      "coordinates": [113.305435, 23.125837]
    }
  },

Can not sign in to Google

Hi,

I am a hobbyist who like design participatory solution. I found Mapus a great idea.
After I clone the git, change the config as the manual, I could not click in sign in google for further steps.

Does any one know the problem