Can the map work well as a 'tab' on a page with other 'tabs'?

[matt-wallis]

We may want to 'embed' the map into a web page. There are usability issues with simply placing the map in the scrollable flow of the containing web page. An alternative is to have a menu on the containing web page which has an option (e.g. "Map"): When the Map option is selected, the menu stays in place, but the map fills the remaining part of the browser window. This needs to be tested:

• Can it be done in a way that works well on smart phones, for example?
• If the user is viewing the map, and selects a different option from the menu (so that the map is no longer displayed), and then re-selects the map option, will the map be as it was when they were last viewing it? We do not want, for example, the map to be re-loaded every time the Map option is selected from the menu: Why? Because the user may want to flip back and forth between menu options in order to read related information.

To resolve this, we need a working example, with a menu displayed above the map application. We also need to understand if this puts any constraints on the containing web page - if so, these need to be documented for the benefit of anyone developing we pages that are intended to contain the map application in this way.

This was identified as a specific requirement for the Oxford map at a meeting today with @Clara-dos-Santos @SEAKatDarling and @ColmMassey.

---

TaskJuggler

TJ: effort 3d TJ: depends-on SolidarityEconomyAssociation/open-data-and-maps#126

[matt-wallis]

Plan of action:

Create a wrapper for the map using W3.css. The wrapper is a navigation bar with just 2 options: Map and Site. When the Map option is selected, the map should be displayed, occupying all of the vertical space in the window, below the nav bar. When the Site option is selected, the map is hidden, and some arbitrary content is displayed - that content should be long enough that a vertical scrollbar is required. The nav bar should be visible at the top of the window all the time. When the Map option is then re-selected, the map should be displayed, in exactly the same state it was in before it was hidden.

W3.css is being used as it is the path of least resistance, given that the map app uses W3.css. If we don't want to use W3.css for the site that wraps the map, then at least we'll have an example of how it can be done, and a different framework should be able to be adapted to do an equivalent job.

[matt-wallis]

Progress to date: we now have the map running within an iframe. You can see it here: https://internal.solidarityeconomy.coop/experiments/whole-page-iframe/ (login required for access to internal - see SolidarityEconomyAssociation/open-data-and-maps-outreach#123 for details) This should look and behave exactly as the map does when running normally. This whole-page-iframe map should exhibit the following properties on all devices:

• it runs full screen
• it is responsive. In particular, on small screens it will display either the sidebar or the map, but not both. On desktops, sidebar and map appear side-by-side.

@ColmMassey, @SEAKatDarling - if you are able to verify the above on different browsers/devices, that would be v. useful. Please report successes and failures here, mentioning device and browser.

The next step is to add a navigation bar above the map ...

[SEAKatDarling]

Works on:

• Laptop using Chrome
• Laptop using Mozilla Firefox

However there is a small discrepancy between these two. When you zoom into the cluster, a pin becomes visible ('My Sisters Place') on both browsers (which is good, because it's quite apart from the rest of the pins, looks more like North Yorkshire). When you zoom back out (using mouse wheel) on Chrome, the separate pin remains visible, when it should pop back into the cluster. It works fine on Mozilla though. (I don't know whether this is the kind of thing to flag but it's a thing I noticed).

Other things I've noticed are: it's still really zoomed out when you first land on the page. Particularly this is the case on the iPhone - you have to pinch it in loads before you can really tap an individual pin. The pins themselves are really small on the screen, so again, it makes it hard and fiddly to tap one - I think they need to grow as you zoom in, so that you can easily tap on one.

This actually applies to all of it on the iPhone (I'm using an iPhone SE, using Safari to browse, and the iPhone is using the iOS 12.1 software), as everything is really small and hard to click on, and the left hand side section with text is very hard to read. So whilst I would say yes it does 'work' in the same way that it works on the laptop, it feels like it hasn't been optimized for the smaller device. (I don't mean this as a criticism at all, I'm just sharing my initial reactions as I test it!).

[SEAKatDarling]

• it is responsive. In particular, on small screens it will display either the sidebar or the map, but not both. On desktops, sidebar and map appear side-by-side.

Sorry, just re-read this part properly - no, on my iPhone, I can see both at the same time. I've taken some screen shots:

[matt-wallis]

no, on my iPhone, I can see both at the same time.

That's really useful feedback @SEAKatDarling

I now have to figure out which of the following is true:

• the responsiveness is not working.
• the responsiveness is working, but it is not active on the iPhone SE, which has a display 640px wide, and the threshold at which resposiveness "kicks in" is lower (e.g. 600px).

I will do some digging!

[matt-wallis]

@SEAKatDarling - could you visit

• [1] https://internal.solidarityeconomy.coop/maps/newcastle-mapjam/

and see if it behaves differently to

• [2] https://internal.solidarityeconomy.coop/experiments/whole-page-iframe/

  ?

In particular:

• responsiveness: do you also see both sidebar and map together on [1]?
• does [1] have the same issues with text size and icon size?

I wish I could do this testing, but I don't have a suitable phone.

[SEAKatDarling]

• responsiveness: do you also see both sidebar and map together on [1]?

No, the sidebar takes up the whole screen when you click on a pin.

[SEAKatDarling]

• does [1] have the same issues with text size and icon size?

No, it is bigger and easier to navigate

[SEAKatDarling]

Also, accessing [2] on my iPhone, even when I flip the phone horizontally (which usually makes the screen easier to read/resizes it), it looks exactly the same (well, it takes up the whole screen, but the issues are still present).

[SEAKatDarling]

• the responsiveness is working, but it is not active on the iPhone SE, which has a display 640px wide, and the threshold at which resposiveness "kicks in" is lower (e.g. 600px).

could @Clara-dos-Santos try it as she has an android?

[SEAKatDarling]

Clara has just tried it on Android (Samsung A3) using Chrome and has the same issues.

[ColmMassey]

Android on Fairphone 2 uisng Firefox also does not seem to detect it is in a small screen.

[matt-wallis]

When you zoom back out (using mouse wheel) on Chrome, the separate pin remains visible, when it should pop back into the cluster

It looks to me as if the marker remains outside the cluster because that initiative is 'selected' (I can tell this because it is orange!) i.e. it is listed in the initiatives in the sidebar. This happens either as a result of having searched for the initiative, or because you clicked on the initiative's marker. It is intentional that the markers for currently 'selected' initiatives do not get clustered. Are you sure that the initiative was also 'selected' on Mozilla?

[matt-wallis]

No, the sidebar takes up the whole screen when you click on a pin.

No, it is bigger and easier to navigate

From these two facts, it is clear that the map is not working properly in the iframe (that's the HTML container that would be used to embed the map app into a web page). I will do some more digging to see if I can get to the bottom of this - this is a thorny area!

Thanks for all the testing! This problem needs to be solved before we can move on to adding a top navigation bar.

[SEAKatDarling]

Great, thanks @matt-wallis !

[matt-wallis]

Using an iframe has not worked, despite using a recipe that claimed to achieve this. From background reading, it would appear that using iframes to achieve our goal is fraught with problems.

Next step is to investigate the use of web components. This has the potential to produce a very clean way of doing what we want. There's an open source library, slimjs for authoring web components.

The idea would be to create the map-app as a web component. This web component can then be slotted into any website as desired. This begs the question: can we create a web component that takes up all of the available space defined in the container? e.g.

• if the container is 'full page' (whole screen), it looks exactly like the existing map, and
• if the container is the whole page below a nav bar, then the map-app occupies all of that space available.

The first step is to create a simple web component that is designed to fill all the space made available to it by a container. If this experiment is successful, then the next step is to create the map-app as a web component that behaves the same way as the experiment.

[matt-wallis]

Progress to date: we now a site with a navigation bar. You can see it here:

• https://internal.solidarityeconomy.coop/experiments/flexbox-navbar-app-plus-site/

(login required for access to internal - see SolidarityEconomyAssociation/open-data-and-maps-outreach#123 for details)

This is for testing that the "map" (just an orange rectangle!) always fills the remaining space below the nav bar, and never has scrollbars. There's also a "site" which does have scrollbars (and videos!). This is to simulate the content that describes the map and mapping process.

Next step: insert the map in place of the orange rectangle.

[Clara-dos-Santos]

Hooray! Well done Matt! I particularly like the Tom & Jerry compilation! ;)

[ColmMassey]

FROM KAT: Great, thanks @matt-wallis it's so good to see that this can work!!

Are you still at the testing whether it can work technically stage, or should we give feedback on the design (colours, fonts...) and 'user journey' (what people see when they first land on the site, how they move around it...) now? My guess is we are still at the testing the tech phase, but could you indicate to me when we need to have that discussion? Thanks again for this, great to see!

[ColmMassey]

FROM CLARA: Colm asked us to have a look at it on our mobiles and I noticed that on the 'Site' tab, the videos are not re-sizing to the page.

[ColmMassey]

FROM COLM: It all works as I expected across Firefox & Explorer on desktop and Chrome & Firefox on IPhone.

[ColmMassey]

FROM KAT: Same for me on mob.

Also on mobile, when you are on the 'site' tab and then click on the 'map' tab to go back, nothing happens (iPhone SE, safari browser)

[ColmMassey]

FORM COLM:

Same for me on mob. @SEAKatDarling Was your comment in response to my or CLara's comment?

[ColmMassey]

The behaviour to reduce the size of a video window as the browser window reduced was probably not what Matt intended at this stage. He was really just testing the two very distinct modes of operation available on different tabs.

[ColmMassey]

Also on mobile, when you are on the 'site' tab and then click on the 'map' tab to go back, nothing happens.

Switching between tabs is different from changing webpages, so the browser doesn't by default know what to go back to. Have you noticed that the videos continue running in the background when you go back to the map?

I think Matt will need to explicitly tell the browser what to remember when moving between tabs, for changing tabs to feel more like changing pages.

[matt-wallis]

@SEAKatDarling

Are you still at the testing whether it can work technically stage, or should we give feedback on the design (colours, fonts...) and 'user journey' (what people see when they first land on the site, how they move around it...) now? My guess is we are still at the testing the tech phase, but could you indicate to me when we need to have that discussion?

Your guess is right. Still at tech testing stage.

[matt-wallis]

@Clara-dos-Santos

Colm asked us to have a look at it on our mobiles and I noticed that on the 'Site' tab, the videos are not re-sizing to the page.

The videos are just placeholders - it will be up to the developer of the web pages that accompany the map to ensure they work well on mobile.

[matt-wallis]

@SEAKatDarling

Also on mobile, when you are on the 'site' tab and then click on the 'map' tab to go back, nothing happens (iPhone SE, safari browser)

Oh! That is not good. New issue: SolidarityEconomyAssociation/open-data-and-maps#126

[matt-wallis]

@ColmMassey

Switching between tabs is different from changing webpages, so the browser doesn't by default know what to go back to.

I'm not sure I follow. In the case of the problem reported by @SEAKatDarling, clicking the Map item in the nav bar should do on a mobile the same as it does in the desktop - but maybe I'm not understanding what you mean. Could you elaborate?

[matt-wallis]

@ColmMassey

Have you noticed that the videos continue running in the background when you go back to the map?

That's an interesting observation. I think this falls under requirements that we need to put on the oxmap web-pages: one often sees web pages with several videos, and a video will automatically stop playing when the video is no longer visible. It may be that this particular implementation, using a nav bar to hide/display different elements (e.g. Map, and Site) puts additional requirements on the implementation of the oxmap web pages, or perhaps the desired behaviour is achieved by other 'normal' good practice, like stopping videos when they are no longer visible.

I think Matt will need to explicitly tell the browser what to remember when moving between tabs, for changing tabs to feel more like changing pages.

See above, in this comment.

[SEAKatDarling]

Unsubscribing for now, please @ me if you need my input!

[matt-wallis]

Switching between tabs is different from changing webpages, so the browser doesn't by default know what to go back to.

I'm not sure I follow. In the case of the problem reported by @SEAKatDarling, clicking the Map item in the nav bar should do on a mobile the same as it does in the desktop - but maybe I'm not understanding what you mean. Could you elaborate?

Hi @SEAKatDarling - I've just talked to Colm for an elaboration! His comments above were refering to the use of the browser's back button - could you, Kat, confirm that you were using the Map button in the navigation bar, and not the browser's 'back' button when you tried to go 'back to the Map'. Thank you!

[matt-wallis]

@ColmMassey @SEAKatDarling A proof of concept is now available at https://internal.solidarityeconomy.coop/experiments/14-kinda-working-with-map-and-site

Please test it on various browsers/devices if you are looking for something exciting to do over Christmas!

[ColmMassey]

Works as I expected on Firefox on Fairfone & WIndows 10. Also on Chrome in Fairfone and Windiws 10. Map does not show on Internet Explorer.

[ColmMassey]

The first time you load up the page on all the browsers that can show the map, only the teal background shown. You need to explicitley click a tab to see something. This was the same in the previous test.

[matt-wallis]

Map does not show on Internet Explorer.

No - it won't. IE is way behind. D3 dropped support for IE over a year ago. But thanks for trying!

[matt-wallis]

You need to explicitley click a tab to see something.

Yes - that's how the experiment is set up ... for now

[matt-wallis]

@ColmMassey - here's an alpha test: https://internal.solidarityeconomy.coop/experiments/17-alpha-test/example-embedding-site-index.html

Note the following:

• the 'site' is now loaded (previously, you had to click the 'Site' button
• the map contains all datasets (to test performance issues related to amount of data)