Add map view

[tibetsprague]

Add a map view within Hylo to display all resources, requests and offers that have a location and are visible to the current user. You can view this map within a community, network or all your communities. It is a new tab listed next to the feed and projects

https://www.figma.com/file/lh2DVGMh7CRdUsxF3k6vGI/Map-Improvements?node-id=128%3A384

• Clicking on a pin on the map will bring up a card with info about the post: Clicking on a post in the map opens up post details in the side drawer #445
• Posts visible in the current map view are also listed along the side of the map in cards like Airbnb: Show list of posts visible in current map view #446
• The map updates as its viewport moves or scales: Search posts by map bounding box hylo-node#479
• The map can be searched using full text search and filtered by topic tag
• Mousing over a post in the map shows tooltip: Mousing over a post shows tooltip with some info about it #444
• Posts are clustered so at zoomed out scales they appear as grouped icons with a post count for the cluster: Map clustering #450

[thomasgwatson]

@brodeur

My UX/design thoughts for this:

Map access

Overall access
Add a map icon button in the left list under the Home and Projects

Or is there a different preference? I assume the url will be /all/map

Initial map viewport

Ask for user location
Prompt the user to allow access to their location, as a way of centering map viewport.

Autocomplete geocoder to steer map
Regardless of whether the user allows their location to be used, offer a text input to allow them to jump to different areas. I don't think this should be the text search

Page layout

Map on the left side
Yeah that's the crip side. Default behavior is that list of offers/resources/requests is filtered by map viewport

Some tag selection UI needs to be places... is this over the map? Up with the full text search?

Right side panel
Default view is List view with summaries of offers/resources/requests. Top of list includes text input for full text search of items. On item select, panel is instead replaced with detailed item view

Map and List interactivity

For map feature, on hover: reveal small summary popup (card) about feature, displayed on map
For list item, on hover, style change map feature to highlight where feature is

For map feature OR list item, on click, show detailed item view in right side panel

Component breakdown

So, in summary expecting to build out or use this list of components:

• new Page, with Map left/List right layout described about
• Map Panel that includes required layers, geocoder-autocomplete, and the map
• A right panel, that includes the full-text search + List view or a detailed item view
  These decompose down into:
• geocoder-autocomplete, which needs a text input
• full-text search, also needs a text input and maybe a tag display area
• List view (I assume this exists and can be readily reused)
• Detailed item view (I assume this exists and can be readily reused)
• text input (assume this is available)
• the map (will have to refine from what is around)

@tibetsprague @cpolitano I will be trying to add functionality piece by piece, in smaller chunks. Should this PRs be merged into the dev branch? Or into a feature branch?

[tibetsprague]

A few things @thomasgwatson

• We will also want the map view to appear within a community too, not just for All Communities
• Users can add their location to their profile and we should center the map on that if they have that. I'm now realizing we need an issue to geocode that location too...
• I'm curious how to fit in the 3 pane view of map, list and detail in our current UI...
• Good question about feature branch vs. dev. This is a big enough feature that it may make sense to have a feature branch, but also that may be more complexity than we need right now... Hmm. Opinions @thomasgwatson @cpolitano ?

[tibetsprague]

ok @thomasgwatson let's do a map feature branch so a few of us can be working on map related stuff without gunking up dev

[thomasgwatson]

1. Yes, I see the distinction for /all/map vs /:community/map, makes sense, thanks for pointing that out
2. ok makes sense. Will need a default for those without
3. Sounds busy! I fear it would only fit on wide screens. Certainly would be good to get @brodeur 's thoughts, maybe a rough layout spec? zillow have map left, list with cards right and then pop a whole screen modal. Hipcamp are similar but take detail view on a whole other page. They both have really extensive detail views than what I'd expect from hylo detail views tho... Wonder if we can find some map/list/detail view combos out in the wild somewhere
4. Ok cool

[thomasgwatson]

Some working notes:

• Spent some time on Friday understanding the routing and a little bit of the page layout of hylo. Unfortunately then ran into some problems getting evo, hylo-node and my postgres instance running and connecting together, so that burnt time on the afternoon.
• I see there are predefined routing to pop up specific posts/detail views and figure that the map views will want something similar:
  • <Route path={``/all/map/${OPTIONAL_POST_MATCH}``} exact component={SomeCoolMapPageWithList} />
  • <Route path={``/c/:slug/map/${OPTIONAL_POST_MATCH}``} component={SomeCoolMapPageWithList} /> and
  • <Route path={``/n/:networkSlug/map/${OPTIONAL_POST_MATCH}``} exact component={SomeCoolMapPageWithList} />
• I'll need to look up what the exact property does in ReactRouter... and otherwise hoping that I'll be able to figure out whether those URLs are right.
• SomeCoolMapPageWithList component doesn't yet exist and won't be named that. MapFeed is the name that probably best evokes its semantic place in the app; it's the map view of a community/network/individuals feed. Next thing I want to do is have a deeper look at how the layout works for the feed and feed-with-post views, so I can replicate something similar with the MapFeed.
• Shared a bunch of code examples with Tibet for the geocoder and discussed some related questions

If we do have quick explainers for the routing logic and the layout logic of the app, it would be handy for onboarding new developers quickly.

I plan to spend some time this afternoon looking at the layout and how I might compose the main MapFeed components together

[tibetsprague]

Dope sauce @thomasgwatson, i certainly dont have a better understanding of the routes and layouts than you yet, we're ramping up together :) Would be good to start documenting what we are learning somewhere. Let's create a docs folder in the repo and start adding some files like routing.md for now. How does that sound to you?

[thomasgwatson]

Sounds like a plan!

[thomasgwatson]

https://www.figma.com/file/lh2DVGMh7CRdUsxF3k6vGI/Map-Improvements?node-id=8%3A1
https://www.hylo.com/all/p/30121

Linked some related commentary

[thomasgwatson]

@brodeur I have more specific design needs after reading into what is required for a clustered icon layer.

These layers need an icon atlas and a mapping to those icons. The icon atlas from the example icon-cluster map I have previously shared is below:

The layer then needs the mapping to be able to pick out the right icon to display. A subset of the mappings for the above icon

   {
     "marker-1": {
       "x": 0,
         "y": 0,
         "width": 128,
         "height": 128,
         "anchorY": 128
     },
     "marker-2": {
       "x": 128,
         "y": 0,
         "width": 128,
         "height": 128,
         "anchorY": 128
     },
   }

So, for one thing: we need every possible permutation of the icons packed into the library (unless we build an icon providing endpoint). We have to use png; css and svg belong to the DOM and these mapping libraries rely on webGL accelerated canvas elements.

The deck.gl maintainers suggest using something like TexturePacker to simplify the building of an Icon-atlas and mapping.

Assuming that we don't need unique color combos (we don't need yellow-blue and blue-yellow) and that we alphabetically ordered the colors as identifiers we'd need a png for:

1. each color dot, without the grey background bubble
   • (five: blue, red, green, yellow, purple)
2. each color dot, with the grey background bubble since there could be clusters of the same category of post!
   • (five: blue, red, green, yellow, purple)
3. each color pair, with grey background pill a la
   • (ten: blue-yellow, blue-green, blue-red, blue-purple, green-yellow, red-yellow, purple-yellow, green-red, green-purple, purple-red)
4. each color trio, with grey background pill
   • (ten: blue-green-red, blue-green-purple, blue-green-yellow, blue-red-purple, blue-red-yellow, blue-purple-yellow, green-purple-red, green-purple-yellow, green-red-yellow, red-purple-yellow)
5. each color quad, with grey background pill
   • (five: blue-green-purple-red, blue-green-purple-yellow, blue-green-red-yellow, blue-purple-red-yellow and green-purple-red-yellow)
6. and then one for all five colors, with grey background pill

For a grand total of 41 different icons. Separately, we would also be using a synced text layer, to write out the numbers of features hidden by a cluster.

Or.... we could have a more generic cluster icon and start with that.

If you want to go with fewer icons, I can roll with that. If you want leave the texturePacking to me, I can roll with that. I don't have the leet skills to make the pngs those...

[brodeur]

I'll prepare those Icons, @thomasgwatson! I'm working on the map today.. check my progress:

https://www.figma.com/file/lh2DVGMh7CRdUsxF3k6vGI/Map-Improvements?node-id=0%3A1

Looking forward to connecting <3

[brodeur]

Can't the grey background bubble be CSS on the container? e.g.

.pillContainer {
border-radius: 16px;
background-color: #23405b;
}

[tibetsprague]

im going to work on this: Hylozoic/hylo-node#479