Noaa Interface

A React-based application for visualizing NOAA Interface

---

Local Setup

To get NOAA interface App up and running on your local machine, follow these steps:

Prerequisites

You'll need the following tools installed:

• nvm (Node Version Manager): For managing Node.js versions. You can find installation instructions on the nvm GitHub page.
• Yarn: A fast, reliable, and secure dependency manager. Install it by following the instructions on the Yarn website.

Environment Variables

Create a copy of the .env.local-sample file and name it .env. Populate it with your specific environment variables:

REACT_APP_FEATURES_API_URL='xxxxxxxxxxxx'
REACT_APP_STAC_API_URL='xxxxxxxxxx'
REACT_APP_BASE_STAC_API_URL='xxxxxxxxxx'
REACT_APP_RASTER_API_URL='xxxxxxxxxx'
PUBLIC_URL='xxxxxxxxxx'
REACT_APP_MAPBOX_TOKEN='xxxxxxxxxx'
REACT_APP_MAPBOX_STYLE_URL='xxxxxxxxxx'
REACT_APP_BASEMAP_STYLES_MAPBOX_ID='xxxxxxxxxx'
REACT_APP_ENV='xxxxxxxxxx'

Installation and Running

Once your environment variables are set, use the following commands:

1. Select Node.js Version:

   nvm use

   This command ensures you're using the appropriate Node.js version specified for the project.

2. Install Dependencies:

   yarn

   This will install all the necessary project dependencies.

3. Start Development Server:

   yarn serve

   This command will launch the development server, and you can access NOAA interface App in your browser.

---

Bundling as a Library

You can package custom-interface-noaa as a reusable library for distribution via the npm registry.

1. Build the Library

Use the provided build command to generate the library bundle:

This will create a production-ready build in the dist (or equivalent) directory.

yarn build-lib

2. Prepare for Publishing

Ensure the name and version fields in your package.json are correctly set.
These two fields together uniquely identify your package in the npm registry.

3. Authenticate with npm

If you haven't already, log in to your npm account.
If you don’t have one, you can sign up here.

npm login

4. Publish the Package

Once authenticated, publish your library to npm:

npm publish

Note:

• Make sure your package name is unique if it's public.
• Consider using scoped packages (e.g., @your-org/custom-interface-noaa) for organization or private packages.
• For more details, see the npm publishing guide.

---

After publishing, your library can be installed in any project via:

Usage as a Library

NOAA interface can also be used as a library within other React applications.

Installation

Install the library via npm or yarn:

npm install custom-interface-noaa
# or
yarn add custom-interface-noaa

Usage

Import NOAA Interface:

import { NoaaInterface } from 'custom-interface-noaa';

Create a Configuration Variable:

const defaultConfig = {
  mapboxToken:"xxxxxxxxx",
  mapboxStyle: "xxxxxxxxx",
  basemapStyle: "xxxxxxxxx",
  featuresApiUrl: "xxxxxxxxx",
};

Add some default map configuration to start with

const defaultZoomLocation:[number,number] = [-98.771556, 32.967243];
const defaultZoomLevel:number= 4;

Use the CloudBrowse Component:

   <NoaaInterface
          defaultZoomLevel={defaultZoomLevel}
          defaultZoomLocation={defaultZoomLocation}
          config={defaultConfig}
        />

Note: Configuration settings can also be provided directly in the host React application's .env file. For example:

REACT_APP_FEATURES_API_URL='xxxxxxxxxxxx'
PUBLIC_URL='xxxxxxxxxx'
REACT_APP_MAPBOX_TOKEN='xxxxxxxxxx'
REACT_APP_MAPBOX_STYLE_URL='xxxxxxxxxx'
REACT_APP_BASEMAP_STYLES_MAPBOX_ID='xxxxxxxxxx'
REACT_APP_ENV='xxxxxxxxxx'

Peer Dependencies

This component has the following peer dependencies that you will need to install in your host application:

"peerDependencies": {
    "react": "^18.2.0 || ^19.0.0",
    "react-dom": "^18.2.0 || ^19.0.0",
    "@mui/material": "^5.14.2 || ^6.0.0 || ^7.0.0"
}

Make sure these versions (or compatible ones) are installed in your project to avoid issues.