It is difficult to discern which UI elements are a part of which list item.

Because of how a list item cell is formatted, the list item subtitle (address) appears quite near to the next list item's title (name)

Please reformat this list view so that it is more easily understood which UI item belongs to which nearby place.

You could accomplish this by either:

A) Reformatting the UI elements of each list item so that the title and subtitle are closer together:

B) Inserting a line between each list item.

If I click on a feature on the map to identify it, and then I run a new Search or Filter, the Identify box doesn't close. This can be an issue if the user has filtered out the category that feature belonged too. See screenshot below. I identified a restaurant, and then I removed restaurants from my filter list. The Identify box remained despite the feature no longer being on the map.

Device: Microsoft Surface 3
OS: Windows 10 version 1803 build 17134
Browser: Chrome v. 71.0.3578.98

I'm not sure about the use case(s) for having a short timeout. I suggest bumping the Notification.tsx snackbar timeout from 3000 to something like 10000, or longer.

Suggestion to enhance useGeolocation.ts:

Replace these lines:

      navigator.geolocation.getCurrentPosition(({ coords }) => {
        const { latitude, longitude } = coords;
        setState({ latitude, longitude });
      });

With the following:

      // Check if geolocation is enabled
      if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(({ coords }) => {
          const { latitude, longitude } = coords;
          . . .  
        }, error => {
          // handle geolocation errors
          });
      } else {
        // gracefully handle in UI when no geolocation is available
      }

It would be nice if when the user got directions, they were told that those were walking directions, and maybe have the amount of time it would take to get there. Take a look please at the screenshot below from the Android app. Something simple like that would be great to maintain consistency between apps.

The UI treats a tap-drag as a tap gesture when trying to drag the list of nearby places.

This behavior is reported using:

iPhone XR iOS 12.0 Simulator in Safari
iPhone XS iOS 12.0 Safari
iPhone XS iOS 12.0 Chrome

As I pan the map, the Search for places box at the bottom slides up, but the SEARCH button isn't always there. About 30% of the time there is no SEARCH button.

Device: Microsoft Surface 3
OS: Windows 10 version 1803 build 17134
Browser: Chrome v. 71.0.3578.98

I'm testing this app on my Microsoft Surface and the UI looks like it was designed for phones. It should adapt a little bit to not have all that blank space in the middle. See screenshot below

Device: Microsoft Surface 3
OS: Windows 10 version 1803 build 17134
Browser: Chrome v. 71.0.3578.98

The Search button is currently centered at the bottom of the entire application window.
It would demonstrate a better practice to show how to center it at the bottom of just the map view.

It appears a bit oddly when it becomes offset:

I filtered the data to only show Bar or Pub and it seems the only data we have is in Central America. That doesn't seem right, could we look at the data? Is there a definition query on it maybe? And if that is what the data shows, then should we remove that category altogether?

@mikewilburn do you have access to the Android version of the app? Can we look at that and see what it's using and if this category shows a different result.

When logged in, there are several issues with the popup on the map result page.

To reproduce:

1. Run app locally and log in
2. Click on an item in the list
3. Go back to home page/list
4. Select another item in the list
5. Repeat steps 2 - 4

There are several issues that I'm seeing:

• On the very first list selection I get a valid popup that automatically opens when the map page loads:

• After that sometimes the popup at the bottom of the map window doesn't inflate?

• Sometimes there's neither an icon or popup?

• And sometimes there is an icon but no popup?

I ran ```npm test`` and I could not get all tests to run successfully. Here is a screenshot of the error messages I am getting

Also, the app doesn't compile when I run npm start What do I do next to resolve this?

If I pan away from my current location and then hit the SEARCH button at the bottom I get the behavior I expect: a new set of results that match the current visible extent.

However, if I pan away from my current location and then hit the Filter button and Apply a new filter, the result set doesn't match the current visible extent. Instead it matches the user's current location (blue dot).

Device: Microsoft Surface 3
OS: Windows 10 version 1803 build 17134
Browser: Chrome v. 71.0.3578.98

I loaded the app and got a list of nearby places (see issue #5 for screenshot). Then I clicked on the Map button and a globe flashed for a split second but then the page just went blank. I refreshed it after about 10 minutes of waiting and then it loaded. Cleared cache and retried, same behavior, the map didn't load until I refreshed it

Device: Microsoft Surface 3
OS: Windows 10 version 1803 build 17134
Browser: Chrome v. 71.0.3578.98

@mikewilburn could you add the proper labels to this repo so it aligns with the other EA repos. Thanks!

On larger screens with both the map and list of nearby places visible, the map will recenter and highlight the selected place, however, on smaller screens with only the list visible - if you select a place, the map opens but it doesn't highlight and recenter over the selected place.

I wish this app was on the JS Api pages as an example, I totally stumbled on this by accident. I am interested in using react hooks with the api.

The app is designed as mobile-first, but I think I can make some changes so that if the browser screen size is say 900px wide, I can show the list and the map at the same time.

Fix incoming.

This may be a JS API issue, but I just noticed that if I double tap on the touchpad of my surface, the app looks like it's trying to do an Identify rather than zoom. This only happens with a light double tap. If I do a heavy double tap where the touchpad is pushed until it clicks, the zoom works every time.

Device: Surface Pro 3
OS: Windows 10 v 1803 build 17134
Browser: Google Chrome v 71.0.3578.98

From Surface documentation: Press the touchpad firmly to click. A quick tap is interpreted as a touch gesture.

Maybe the app should not ask me twice for location access? I assume once for the list and once for the map.

When the map view is visited the second time the view becomes unresponsive to clicks, double clicks or taps. This may be related to #14 Double tap on touchpad doesn't trigger zoom.

To reproduce,

1. load the app on a mobile device (or chrome responsive view)
2. click on a list item to navigate to the map view
3. click or double click or tap....view/map responses.
4. go back to the list view and click some other item or simply navigate back to the map view
5. the view stops responding

I have reverted back to JS API version 4.11 and this issue goes away but want to use the latest and greatest JS API (>= 4.14). It also fails with 4.15 as well.

Any help is appreciated. Thanks.

Seems like it would be more consistent and cleaner to consolidate all the configuration variables in one place under /env. My suggestion is to have the developement.env and production.env files already created.

Add the following to both .env files:

ARCGIS_APP_ID=THISisMYdevelopmentID

And, move the following from config.ts and make them environment vars as well:

• DEFAULT_WORKER_URL
• portalUrl
• geocodeURL

When the app starts, if I decline the prompt asking me to share my location, the app no longer works. It loads a map centered on Palm Springs but search and filtering doesn't work.

For one, I feel the app should somehow communicate to the user that they can't do anything because they haven't enabled location.

But the question is, should the app still work? Other than directions, which need the current location, I don't see why the rest of the functionality should be restricted. @mikewilburn @fallsdownhill thoughts? How does the Android app behave?

How is the filter supposed to work? It seems like it reorders the list somewhat inconsistently. Is it supposed to only display results based on that keyword?

Here's an example where I selected filter by "Pizza"

And, the same list when filtered by "Hotel"

This is filtered by "Coffee Shops", the hotel is still at the top of the list:

This only happens on a mobile device, or on a browser that's been resized to where the Map and List are separate pages. When clicking Sign out, the app tries to load https://arcgis-nearby-js.netlify.com/map and returns Page not found

The app does not present a map to the user when device is in portrait orientation.

(Simulator, Safari)

(Device, Chrome)

This behavior is reported using:

• iPhone XR iOS 12.0 Simulator in Safari
• iPhone XS iOS 12.0 Safari
• iPhone XS iOS 12.0 Chrome