maptio icon indicating copy to clipboard operation
maptio copied to clipboard
verified publisher icon Maptio

Finish beta of circle descriptions and search on the public map

Open rgoj opened this issue 3 years ago • 3 comments

In #643 we quickly added circle descriptions to the publicly shareable map. We've done that with some simplifications just to get something over to the Green Party of Canada. This issue list what's left to be done.

  1. The main problem with the current implementation is that it's not particularly responsive. It works well for a, say, 15in laptop, a 22in screen (less so), with a fullscreen window (i.e. width being greater than height), but will not work for square aspect ratios. This will make it harder to embed the map with descriptions on websites and as that's the ultimate reason for the embedding/sharing functionality, it'd be great to have all aspect ratios covered! Some design thought will need to go into this.

  2. It'd be great to also consider the design of the panel itself, what should this look like? Here is what it looks like now: Screenshot 2022-01-27 at 13 21 31 For a long time I thought it'd be better to lose the panel background altogether, something along these lines: Screenshot 2022-01-27 at 13 21 50 I'm not so sure now that we've settled on a look that's not too bad. For the latter look, we'd need to ensure that the map moves out of the way a bit to the right... but even with the current look, it'd still be great to do that! See some discussion in Slack: https://maptio.slack.com/archives/C01QCQJMS23/p1643222692287539

  3. As part of responsiveness it'll be important to address font sizes. We've got some custom logic for this in the circle map itself and we should respect and use that, i.e. the name of the circle should be at the same font size (or should be relative to) as the name of the circle inside the map. This will be a little bit more complex than the vw units I used in the beta, but worth it to ensure the descriptions are responsive!

  4. When two or more "show descriptions" checkboxes are present in the list of maps (i.e. embedding settings are open for two or more maps), the label and input ids and names will be confused, so we need to give them custom ids! And/or ensure that only one map can have embedding settings open at the same time.

  5. Error handling is improved, but I didn't have time to go as far as I wanted, so it'd be good to surface all errors.

Some smaller issues: 6. The card map component is getting unwieldy, to address this we should:

  • separate the embedding configuration into a new component
  • create some smaller reusable subcomponents, e.g. for the error message
  1. And finally, it'd be great to use the same pattern we've now got for configuring embedding for all the other options - i.e. instead of using popovers we could have an in-card menu.

rgoj avatar Jan 27 '22 13:01 rgoj

We're now adding a public search box on top of the circle descriptions. Some more possible improvements stemming from this:

  1. I'd love to make the overall feel closer to Google Maps by making the description panel opaque and white when someone is viewing information about a circle. That does have drawbacks though and it'd be great to think through the design for this more carefully.
  2. It'd be good to have an option somewhere to hide the search box (what if someone has a simple map, wants to show it on their website and is annoyed by the search box?). Relatively straightforward to do, though will add to an overcrowded set of settings in the map sharing dialog box, which isn't great. Perhaps we can wait until someone actually requests this?
  3. The current search in the workspace shows the lead/source for each circle. I've skipped this here as it doesn't seem strictly necessary, but happy to add it too! Might need to show more than the lead/source perhaps as that's the direction we've been moving everywhere?

rgoj avatar Mar 15 '23 17:03 rgoj

I've added a small tweak to the styles to hide the description panel and search on mobile-like widths - simplest tweak to make the map nice on mobile again without getting into designing a fully responsive version with potentially hiding the description, etc.

rgoj avatar Mar 16 '23 15:03 rgoj

One more potential improvement from customer feedback:

It might be good to toggle additional fields to search (i.e. default to only circle name)

Which makes me think it'd be great to have "advanced" search. Perhaps we could combine that kind of search with filtering by tag? 🤔

Along with that feedback we also got a vote to show the people / circle leads in the search result:

It will also be nice to have the "led by" indicated in the search results list like it does in the non-public search.

Source: https://app.intercom.com/a/inbox/q3x5lnhp/inbox/admin/4637195/conversation/106323200007243

rgoj avatar Mar 16 '23 15:03 rgoj