Search result page: visualize search radius on Map

[joshi1983]

When viewing search results in the Map view, it would be nice to see a representation of the geographical search range over the map. There is a blue marker on the search location but no representation of the search radius.

Map as it is now:

Mockup of map with the proposed search range visualization:

All of the red markers should be inside the circle when it is working properly. The mockup isn't perfect.

The mockup isn't centred well. The blue marker should be in the centre of the circle.

There are various ways to this but watch out for the following:

• Clicking the red markers inside the visualized range must still navigate a user to that location's report.
• The zoom in and zoom out features with the + - buttons in the lower right corner should still work unless you have a strong reason to disable them. The disk should appropriately expand and shrink as the zoom level changes.

The work on #205 will probably break down to the following tasks:

• [x] Find a similar feature on another website or in Google Maps documentation
• [x] Implement the change and test it in our project.

205 is related to a broader issue #135 .

[Blandine-AA]

I like the idea.

Does this needs to be split in more than one issue or have tasks created to better track the features implemented and the completion of the work?

[joshi1983]

@Blandine-AA this would probably start with finding a similar feature on another website or mentioned elsewhere. The next step would be to implement a similar technique in our project.

I guess those are 2 subtasks of #205 but representing them as 2 separate github issues might be more confusing than it is worth. There won't be any code changes in finding a similar solution but there would be in implementing the change and the research task would block the implementation task. #205 is also already a little piece of #135.

I added those as subtasks of the issue in case that helps monitor progress.

[joshi1983]

101 is done now so all the red markers should fit inside the proposed circle.

[christian-codez]

What if the red marker is not within the search range specified by the user, it will fall outside the overlay.

[joshi1983]

@e1cerebro your circle looked very good in our meeting. It also looked like it should be roughly the size we'd want. The way some of the red markers were out of the circle seemed like it had to be a bug in something but we had trouble getting a specific location that clearly had the wrong distance result.

The one we looked at was called something like Ecole Catholique E.J but it looked roughly the right distance.

Can you try give me a specific location far to the East or West of your circle?

[christian-codez]

Ya, you could check "Forest Glade Community Centre". On the app the distance is 2.20km but am getting roughly 17km with google map.

[christian-codez]

So basically I was trying to compare what we have on this table with what we have on google map below

So based on the data on out app, the difference in km between the two locations is like 2.36 km. But based on what we have on google map it should longer that 2.36km

This is also what I have on our map

POINT A=Constable John Atkinson Memorial Community Centre (2.02km) POINT B= Forest Glade Community Centre (Distance is 4.38km) POINT C= Malden Park Visitors Centre (Distance is 4.58km)

So looking at it from the map on our app its like the distance between point A and B is more than 2.36 km too. Also, if the distance of POINT B is correct it should fall into the circle because point C which is the closest to POINT B in terms of distance was inside the circle.

[joshi1983]

@e1cerebro nice find. I merged a fix to that distance calculation bug you uncovered. Can you commit your current changes for the overlay and then pull latest and rebase?

The commands are documented at: https://github.com/hhaccessibility/hhaccessibility.github.io/wiki/git-commands

Your work looks very close to ready for a pull request.

[joshi1983]

@e1cerebro 's changes were merged. It looks good to me on app.accesslocator.com so I'm closing this issue.

Here is a screenshot from app.accesslocator.com:

[Blandine-AA]

Reopened for testing

[christian-codez]

#THESE ARE THE STEPS TO TEST ISSUE-205:

1. Navigate to the home page by clicking on the home link at the top of the page.

HOW TO SEARCH: You can either follow step 2 to 4 or just step 5.

METHOD ONE:

2. Enter the search address in the address text field.
3. Enter the search key word in the search keyword text field.
4. Click on the search button. OR METHOD TWO
5. Click on the any of the location categories. Either of these two methods would take you to the Location Search Results:

VIEWING THE SEARCH RESULT ON MAP MODE

6. Click on map button on the upper right hand side of the page.

TESTING THE SEARCH RADIUS

7. If the search radius is not visible, try clicking on the zoom out icon on the map (It is placed on the lower right hand side of the map).
8. Check if all the points are within the radius.
9. Check if the blue marker is at the center of the map.
10. Finally click on each of the location markers and see if they will link you to the right page.

[areebakamal]

Some of the remarks may not necessarily directly relate to this issue rather stem from it:

1) I feel like there should be a way to insert the radius while you are on the results page after search. I've zoomed out plenty as Chris suggested but I do not see a radius or a way to change it without visiting the Profile page. 2) If the radius can only be changed on the profile page, there should be a search box on the profile page too. 3) I believe it's important to show the radius in whichever format because if the user entered a large radius on the profile page, he may never zoom out that much to ever make use of the feature.

The features directly related such as the blue marker appearing in the center of search radius through search box or category selection, and circle overlay of defined radius work well.

RESULT: PASS. Maybe work on it some more for additional features.

[joshi1983]

@areebakamal what do you think of having the radius determine the initial zoom level such that the full circle is always immediately visible so no one needs to zoom out for it?

You're correct that the profile page is the only place where you can update the radius for now. How would you suggest selecting the search radius on the location search results page? Any suggestion for how the input control might look or work?

One idea that comes to my mind is a little button that looks like http://fontawesome.io/icon/bullseye/ that switches on a radius resize mode and lets you adjust the radius with your mouse on the map. When clicked, the radius would be set and the page would refresh so the location results show corresponding with the new radius.

Another little problem with the map is it is still possible to get the blue marker off the map if you zoom in enough which could be confusing.

If the map view has a way to update search radius, the "table" view should too since the table view is basically the alternative for people depending on screen readers.

[areebakamal]

@joshi1983 "the radius determine the initial zoom level"-- I think this is a good idea. Initial zoom should be dependent on the radius so that the entire circle overlay is visible initially.

I was thinking something like this: Where it says 50mi, we would put a text box there which displays the value as the user drags left or right and also gives the capability of just entered the radius number there. We can place this addition beside the table and map tabs and make it only visible on 'Map' view.

For the table view, it should simply be a text box near the top of the page, Enter radius: |___|

[Blandine-AA]

New issue #260 has been created to track the testing feedback for enhancement. Closing this one as the initial design is working as intended