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.
View our Google Drive documentation folder for additional resources, especially in regards to GIS workflows.
This project was bootstrapped with Create React
App with --typescript
. In order
to develop it, you will need a few items.
In order to use this project locally, you must have:
v14.15.4
.yarn
package managerSetup and installation steps are available on each website.
In order to use Mapbox ("MB") features including background layers, vector tiles, and place search, follow these steps:
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.
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.
If using Sentry error tracking, follow the React steps from their docs. If not, search the project for Sentry references and remove them.
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.
After setting up accounts above:
See details in [docs/data_structure.md](this file).
Fonts
and
Language
tables.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:
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.
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.
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.
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.
yarn test
launches the test runner in the interactive watch mode. See the
section about running
tests for more
information.
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.
...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
You can learn more in the Create React App documentation. To learn React, check out the React documentation.
See the organization repo for details.