Languages of New York City Map

Background

This project will become an interactive map of New York City’s linguistic diversity, using data collected by the Endangered Language Alliance (ELA). Users will need to be able to query a rich dataset and interact with the data through an interactive map that may consist of audio, video, and storymap links. The long-term vision for this project is to create an open source toolkit documenting the workflows and tools used to enable others to undertake language mapping in their own communities.

Additional resources

View our Google Drive documentation folder for additional resources, especially in regards to GIS workflows.

Dev setup and requirements

This project was bootstrapped with Create React App with --typescript. In order to develop it, you will need a few items.

Software

In order to use this project locally, you must have:

• Node.js. Version is not specific but code was written using v14.15.4.
• yarn package manager

Setup and installation steps are available on each website.

Accounts setup

Mapbox

In order to use Mapbox ("MB") features including background layers, vector tiles, and place search, follow these steps:

1. Create a Mapbox account if needed.
2. Create an access token.

Airtable

This project uses Airtable to store much of the config and most of the project data. Your setup will need to match ours, or you'll want to edit the code to your needs. Get an API key either way.

YouTube API (optional)

The project is set up to support YouTube embed URLs (for both playlists and individual videos) and Internet Archive embed URLs. If using YouTube, get an API key.

The API is only used for metadata like title and descriptions. You can still embed videos without an API key, and Internet Archive's API does not require a key at all.

If you are not using YouTube's API, search the project for references to it and remove as needed.

Sentry (optional)

If using Sentry error tracking, follow the React steps from their docs. If not, search the project for Sentry references and remove them.

Netlify (optional)

We are hosting/deploying with Netlify. If you are using it, edit the netlify.toml file in this directory accordingly, otherwise delete it. If not using Sentry, remove that part from the file.

Environment

After setting up accounts above:

1. Rename the sample.env file in this directory to .env.
2. Follow instructions inside the file using your account info.

Data

See details in [docs/data_structure.md](this file).

Fonts

Mapbox fonts

1. Create
2. Upload any custom fonts you need for endonym labels to Mapbox.
3. Make sure they are set with corresponding values in the Airtable Fonts and Language tables.

UI fonts

Not all fonts in the map render incorrectly in the UI, and vice versa. If you need to add/edit UI fonts, do so in:

• public/index.html
• src/components/config/fonts.ts
• src/components/style.css (only for one problematic font so far)

Some fonts may not have a script at all, e.g. ASL. Upload these as an image to the Font Image Alt field of the Language table.

MB Studio Styles

Create three Styles in MB Studio with light and dark basemaps, and one with just a darker background. These are used by the basemap switcher. Publish the styles, make them public, and update the relevant spots in src/components/map/config.ts using their IDs.

Dev Usage

Install dependencies

In the project directory, run yarn to install the project's npm dependencies. It should take a lot less time to install after the first run.

Develop

In the project directory, run yarn start to run the app in a local web server visible at http://localhost:3000.

The page will automatically reload if you make edits. You will also see any lint errors in the console.

Test

yarn test launches the test runner in the interactive watch mode. See the section about running tests for more information.

Build

yarn build builds the app for production in a ./build folder in this directory. It bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include cache-busting hashes. Your app is ready to be deployed!

See the section about deployment for more information.

To build with Profiling enabled

...in case you want to profile your production build (dev builds will be misleadingly large).

CRED: Kent's article

npx react-scripts build --profile

And then serve it from the ./build directory:

# The -l 3000 is optional to set port, which defaults to 5000
npx serve -s build -l 3000

Learn More

You can learn more in the Create React App documentation. To learn React, check out the React documentation.

Software Credits

• Every dependency is open-source. View package.json for a list.
• Country flags are the source for the images we uploaded to Airtable.

Contribution

See the organization repo for details.