seaitrise / seaitrise-v1

Sea It Rise HTML5 Web App

A lightweight HTML5 site that adapts the Kinvey starter application and uses the Kinvey (www.kinvey.com) HTML5 3.x SDK as well as MapBox (www.mapbox.com) (for maps). Inundation data from NOAA Office for Coastal management data (coast.noaa.gov) layers. Water level and tide station data courtesy of the NOAA CO-OPS API (https://tidesandcurrents.noaa.gov/api/).

Setup

1. Clone the repo.
2. Create an app backend using the console for your application.
3. Create a user (with password) using the console for your application.
4. Open www/js/app.js in a text editor
5. Search for <appKey> and <appSecret> and replace with your appKey and appSecret for the app you created in step 1.
6. Create a books collection and import data/books.json.

Mobile Identity Connect Setup (Optional)

6. Open www/js/app.js in a text editor.
7. Serach for <micRedirectUr> and replace with your redirectUri for Mobile Identity Connect

Run

1. Execute npm install.
2. Execute npm start.

License

All changes and updates the responsibility of the Sea It Rise project, use at your own risk! These files are under the Apache License because of the original code used from Kinvey, Inc. (see below).

Copyright (c) 2017 Kinvey Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

seaitrise-v1's Issues

Access the kinvey filestore and plot markers for all photos taken in a given map bounding box

A central piece of functionality missing from the Sea It Rise app is the linking of photos taken by the user community to the map view.

Story: As a user browses the map view, Sea It Rise will display marker icons for photos taken nearby. Only photos in the nearby area should be shown, so that the map loads quickly (less than 1s)

retrieve tide stations "nearby" for plotting on map and in the table of tide stations

In the "tide chart" view we only want to display data for stations near to the user.

Story: When a user access the "tide height" menu, only the closest 5 stations to the user are shown.

detail =======
Here's a specific use case I want to enable.

1. Click a button or some such on either the "map" page or the "tide stations" page, that says "tide stations near me"

2. geolocate myself (can use the mapbox javascript, probably).

3. Hit the COOPS api to pull back station metadata for stations within 0.5 degrees in lat/lon (e.g. mlocation.lat -0.5, my_location.lon -c.5, my_location.lat + 0.5, my_location.lon + 0.5) Here is an example call for Seattle

API Call:
https://opendap.co-ops.nos.noaa.gov/ioos-dif-sos/SOS?service=SOS&request=GetObservation&version=1.0.0&observedProperty=water_surface_height_above_reference_datum&offering=urn:ioos:network:NOAA.NOS.CO-OPS:WaterLevelActive&featureOfInterest=BBOX:-123,47,-120,49&responseFormat=text/xml;subtype=%22om/1.0.0/profiles/ioos_sos/1.0%22&eventTime=2017-09-11T00:00:00Z/2017-09-11T00:59:00Z&unit=Meters

Docs:
https://opendap.co-ops.nos.noaa.gov/ioos-dif-sos/index.jsp

4. process up the XML to get lat/lons of those stations and label info.

5. convert to JSON and put them on the map as markers with a popup, or, into a table like the "books" example from Kinvey. The JSON format required by Mapbox look like:
   https://www.mapbox.com/help/add-points-pt-3/

allow for layer switching of NOAA inundation data

A user should be able to switch between the "confidence" layer and the "depth" layer from NOAA. The current implementation of the map page has contention between the "search" box and a layer switcher (some javascript bug, I suspect).

"Confidence" layers show the confidence of "wet/dry" scenarios given certain levels of sea level rise.

tilelayer call for confidence interval with 6ft of sea level rise

https://www.coast.noaa.gov/arcgis/rest/services/dc_slr/conf_6ft/MapServer/tile/{z}/{y}/{x}

"depth" layers show a colorbar of "shallow to deep" inundation
https://www.coast.noaa.gov/arcgis/rest/services/dc_slr/slr_6ft/MapServer/tile/{z}/{y}/{x}

Upon upload of image, scrape the EXIF data for lat/lon

A user can upload an image from the Sea It Rise app via their smartphone. That image can be either a standard photo, a panorama or a photosphere, depending upon how it was acquired.

Upon uploading the image, the app should scrape the EXIF data so that we can determine the lat/lon of the image. Ideally we would also add orientation information for the phone, via a mechanism like:

https://mobiforge.com/design-development/html5-mobile-web-device-orientation-events

The accompanying data would then be added to the kinvey filestore with the image as metadata that can be searched on.

Add AR functionality to camera view: simple "water level slider" functionality

The "cool" feature of this project is to allow a user to visualize what 1' or 5' of sea level rise looks like.

Story: User opens the AR view, and sees slider on the left side of the view. Dragging the slider up/down moves a plane up/down, depending upon the setting. Phone uses ARKit (iPhone) or ARCore (google) to project the plane into the photo in real time.

NOTE: this issue is only for the basic slider functionality. Subsequent functionality would visualize "likely" inundation levels, but that is a much harder problem and requires integration with the NOAA GIS layer data.