agrc / recreate

A mobile app for exploring recreation locations.

recreate

React native app for recreation locations

Installation

git clone https://github.com/agrc/recreate && cd recreate && npm install

You can go to the react-native docs for more info.

Development

This project was bootstrapped with react-native-cli.

Run project in simulators:
react-native run-ios && react-native run-android

Note: Android emulator needs to be started manually.

Run project in production:
react-native run-ios --configuration Release
react-native run-android --variant=release

Run project on connected device:
react-native run-ios --device

Lint (via eslint): npm run lint

Upgrade react-native: npm i -g react-native-git-upgrade react-native-git-upgrade

Deployment Steps

DTS Mobile Application Deployment Doc

1. Bump version number in package.json, package-lock.json, ios/RecreateNative/Info.plist (CFBundleShortVersionString & CFBundleVersion), and android/app/build.gradle (versionName).
2. Increment versionCode in android/app/build.gradle.
3. Confirm that you can generate an archive in Xcode (Set to Generic iOS Device, Product -> Archive) and APK in Android Studio (Build -> Build APKs)
4. Update src/ChangeLog.js
5. Commit and tag new version.
6. Submit a Mobile Application Deployment Form
   • Make sure to leave a note if this is for a TestFlight (Apple App Store) or Beta Testing (Google Play) deployment.
   • You need to create two separate tickets; one for Apple and one for Android.
   • Source Code URL: git clone --branch <tag name> https://github.com/agrc/recreate && cd recreate && npm install

Useful Tools

react-native-debugger

⌘D (iOS) & ⌘M (Android) open the developer menu within the app. This can be used to enable live reload and remote debugging.

List of native-base icons: https://oblador.github.io/react-native-vector-icons/

recreate's Issues

Switch from trail segments to new RouteLines feature class for hikes

This is the output of the work that Eric and Nicole are doing.

Replace AppText with native-base typography

I wasn't aware of these components until now: https://docs.nativebase.io/Components.html#Typography. They may be a better solution.

Marker size on mobile vs. icons

It can become hard to tap on specific points on the map on mobile. Perhaps we need to make the point markers larger?

Blank details page on navigating back from visit utah link

To Reproduce

Go to a trail detail page and click on the "Trail Details" link.
After the visitutah.com page loads hit the back button.
The recreate page is totally blank.

This only appears to happen in Chrome (iOS) not safari. Confirms bug is not present in Chrome on Android or any desktop browsers including chrome and safari.

show more/less buttons on list

Show fewer items for each category by default.

Possible Data issue with ZoomLocations

I've seen a few weird extents in ZoomLocations when using the search form on the home view. Moab and Capitol Reef are a few examples.

Switch to AGRC Vector Base Maps

• Generate vector tiles version of Terrain base map
• Repoint this app to use it
• Switch out mapbox static map (#26)

Populate "Elevation Gain" in HikingDetails

It's just hardcoded for now.

Replace Yelp burst logos as map markers

APR 05, 2018 | 02:19PM PDT
Hi Scott,
Thanks for the info! The Display Requirements are essentially the same for website and app. As long as you have the current Yelp star rating, Yelp branded stars, current review count, and Yelp logo (for attribution) and are redirecting users to the Yelp app or Yelp.com, then you are good.
I looked at your mock-up and all is good except for the Yelp burst icons being used as map pins; the Yelp burst is specifically used for sharing on social media - is it possible for you to use a different pin and perhaps show the business info when you hover over the pin? Something like this: https://gyazo.com/71774fc73423f358e56f469aebdc3e99. Users can click on the pop up and then be led either to another page within the app or directly to the Yelp mobile app (or Yelp.com if it's for website use).
Also, just as a friendly reminder, all Yelp data on your site/app should remain dynamic and be generated at the point of user inquiry; API responses cannot be stored, downloaded, cached, or prefetched for more than 24 hours (except for the business ID for backend matching).
Please let me know if you have further questions.

Regards,
Harper
Yelp User Support

Point Clustering

Not sure if the mapbox api even supports this or not. Tom requested it.

Point color legend

There's no way for the user to know what the different colors represent.

Switch to Native Application

Some of the requirements that I've gathered:

• Native application installable via iTunes and Google Play stores
• Works completely offline
• Looks and feels like the web application

Mapbox React Native was the best alternative that I found for this.

Items to consider:

• How to share business logic with React Native UI between web and native apps

Task List:

• Customize Button
• Yelp Data
• Elevation Profile
• Search form in Home
• Map popups

Fonts

From Aaron:

I am using a mix of Helvetica and Avenir for fonts throughout the site. Try Helvetica as the primary. If it doesn't look that great, we can change it.

RECREATE (Font: Avenir Next Condensed, Weight: Demi Bold, Size: 48)
Your Way (Font: Caveat, Weight: Regular, Size: 64;

"Let's Go!" link to google maps

When someone is viewing the map and they select the pin of the hike, could the details box that appears include: The name of the hike, difficulty level (easy, moderate, difficult), distance (one way), details, a Let's Go! link and the city?

The "Let's Go!" link would open Google Maps and provide directions from where you are currently at to the destination.

List Styling is Messed up

It's been a while since I looked at the list but I'm sure that it looked nicer than this:

It's also missing the header for Yelp data.

Resetting the filter in the Customize box does not work

nitaliano/react-native-mapbox-gl#1160

DetailMap should use ungeneralized geometry

Currently it's using the generalized geometry from the details page. It could still probably send the generalized data to the elevation service, but should show the ungeneralized on the map.

Larger (iPad) Layout

The app currently looks good only on smaller devices. We need a larger screen design that includes showing the list and map at the same time.

Offline enable

How to store data offline. Do we want to ask the user to cache different areas or just ship the app with all of the data included?

How to deal with Yelp data. Only include if the app is online?

Integrate Yelp Data

Add yelp data to the map as local services.

Loading /feature/:id as a fresh route does not load

For example: http://localhost:3000/recreate-web/feature/8009

The issue is that there is no listItemProperties passed from a previous page. That data can be retrieved via the fetch request in DetailsBase however, we need to handle the rendering before that request is finished.

Maybe http://ericclemmons.com/react-resolver/ is a potential solution?

multiple points link to the same park

I am in the app, click on a park- the water tank North and east of our office on the hill , it takes me to a park Raspberry patch and Yacht Drive. Then that window just closes automatically. It turns out that Park is in Rich County adjacent to Bear Lake

Link to Yelp mobile app rather than website

Based on a suggestion from Yelp support...

DetailsMap - symbolize start/finish points on map & chart

Otherwise the elevation profile is hard to relate to the map.

App Icons & Splash Screens

Going to try following the steps in this post: https://medium.com/@scottianstewart/react-native-add-app-icons-and-launch-screens-onto-ios-and-android-apps-3bfbc20b7d4c

I've asked Aaron for an icon that 1024x1024. I believe that's the only thing that I need from him.

Back button goes directly to map instead of list from FeatureDetails (android-only)

Clustering Prevents List View from Showing All Features

nitaliano/react-native-mapbox-gl#1268

Label trail length as one way

"one-way: 1.5 miles"

Update page title, favicon and manifest.json

It's set to react defaults currently.

Shrink Popup Width to Prevent Overflow

Show Trail Segments on Maps

Show adjacent trail segments on details map. Show all trail segments in main map at larger scales.

Return button should initiate a search

...if the user does not want to hit the search button.

URL for Parks Data

In a similar way that we do with trails.

• Find out if this information is already in the SGID data (not likely)

Static Maps (Details View)

Currently, the app uses a Mapbox service for static maps. This isn't going to work if we want to switch to AGRC base maps. We'll need to come up with a new solution.

Also, the Mapbox service doesn't like large geometries such as this: https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static/geojson(%7B%22type%22:%22Feature%22,%22id%22:187,%22geometry%22:%7B%22type%22:%22LineString%22,%22coordinates%22:[[-111.45326,40.54509],[-111.45315,40.54508],[-111.45301,40.54506],[-111.45294,40.5451],[-111.4529,40.5453],[-111.45286,40.54531],[-111.45281,40.54527],[-111.45277,40.54524],[-111.45267,40.54527],[-111.45264,40.54525],[-111.4527,40.54512],[-111.45266,40.54497],[-111.45262,40.54495],[-111.4526,40.54496],[-111.45258,40.5451],[-111.45236,40.54542],[-111.45177,40.54586],[-111.4515,40.54597],[-111.45142,40.54598],[-111.45241,40.55031],[-111.45236,40.55014],[-111.45241,40.54997],[-111.45243,40.5499],[-111.45248,40.54983],[-111.45258,40.54967],[-111.45258,40.5496],[-111.45267,40.54944],[-111.4527,40.54929],[-111.45273,40.54922],[-111.45274,40.54918],[-111.45273,40.54914],[-111.45279,40.54907],[-111.45287,40.54899],[-111.45287,40.5489],[-111.45294,40.54873],[-111.45301,40.5486],[-111.45318,40.54846],[-111.4533,40.54835],[-111.45349,40.54819],[-111.45356,40.54809],[-111.45366,40.54798],[-111.45403,40.54769],[-111.45414,40.5476],[-111.45434,40.54746],[-111.45446,40.54735],[-111.45452,40.54731],[-111.45452,40.54728],[-111.45443,40.54727],[-111.45426,40.54728],[-111.45416,40.54727],[-111.45394,40.5472],[-111.4538,40.54719],[-111.45373,40.54716],[-111.45374,40.5471],[-111.4538,40.54705],[-111.45402,40.54708],[-111.45433,40.54708],[-111.45432,40.54704],[-111.45425,40.547],[-111.45418,40.54688],[-111.45408,40.54678],[-111.45398,40.54656],[-111.45397,40.54629],[-111.45384,40.54608],[-111.45385,40.546]]%7D,%22properties%22:%7B%7D%7D)/auto/320x198@2x?access_token=pk.eyJ1Ijoic3RkYXZpcyIsImEiOiI5Mkdac0FNIn0.GEQLOdntbI01q3JeFkQuTg

Out & Back AGOL Issue

Switch to production Giza Instance

Currently, the app is pointed at wms.appgeo.com. This is so that we can reset the cache while we iterate without affecting production. Once we get the app working well with Giza we need to switch it to discover.agrc.utah.gov.

Switch routes away from using OBJECTID

OBJECTID can and will likely change.

Searches require exact match

Currently, the search on the home page for city or place needs to be an exact match. We should have an auto-complete similar to sherlock.

Handle no-GPS available better

Show a message to let the user know. Hide the GPS button.

Test by disabling location in chrome.

List does not populate on first map load

Not sure that it populates at all until you zoom in far enough to see yelp data.

Color changes from Aaron

can you please make the following color changes:

header: BF3919
buttons and map and list buttons: 358EA6

Show GPS location on Details Map

Find new solution for Mapzen elevation profile service

Mapzen is shutting it service down on Feb 1, 2018. Need to find another solution. Check out their migration guide: https://mapzen.com/blog/migration/

Handle fetch errors in DetailsBase & FeatureDetails

Look for TODO's in code.

Trail Details Link

Wire up link to visitutah.com. It's hardcoded to the Chinle trail for now.

Handle Fresh Loads of DetailsMap

This Url: http://localhost:3000/recreate-web/feature/%7B4AFAEA7A-52D8-4970-8760-FC8C016916B1%7D/map

Only works if you navigate to it from the HikingDetail view. Need to handle fetching the feature data.

Add change log

GOED Logo

It either needs to go away or be made to look nice on top of the background image.

Don't recreate MapView component each time it is hidden by a route

Each time you navigate to the map the MapView component is recreated. This is a lot of wasted work. I wonder if there's a way to preserve it. Maybe this is a question for the react-router folks.

Don't draw parks polygon on details page

It duplicates what's already in the base maps and doesn't line up well with the mapbox data. When we switch to our own base maps, it might look better?