TribeFinder: Locating Indigenous Communities

Welcome to the TribeFinder portfolio page! Here, you’ll explore the development and functionality of a unique web application designed to connect users with the nearest tribal communities. TribeFinder uses the Google Maps API and GeoJSON data from the Bureau of Indian Affairs to provide accurate and meaningful location-based information.

This page showcases the process and features of TribeFinder, including:

Interactive Form and Map Integration: Locate tribal offices by entering a ZIP code and view results on an interactive map.
Dynamic Features and Design: Learn about the implementation of distance calculations, dynamic results rendering, and responsive layouts.
Code Insights and Best Practices: Dive into highlighted code snippets and techniques used to build TribeFinder.
Visual and Cultural Thoughtfulness: Explore the design choices inspired by the colors of the medicine wheel and the symbolic Ghost Dance artwork.

The purpose of TribeFinder is twofold: to assist users seeking official or business interactions with tribal offices and to provide a reliable resource for tribal members connecting with their communities. By focusing on public-facing information, TribeFinder balances accessibility and respect for privacy.

Browse this page to learn more about the technical and cultural considerations behind TribeFinder and stay tuned for updates on the upcoming React-powered version!

Respecting Privacy and Purpose

TribeFinder was created with a strong commitment to respecting the privacy of Indigenous communities. This tool is designed to locate tribal offices for official or business purposes, or to assist tribal members in connecting with their communities. By focusing on public-facing information, such as leadership contacts and office locations, the hope is that TribeFinder ensures that it serves as a respectful resource rather than an intrusive platform.

Please respectfully use this tool for the purpose it was intended.

Vanilla Javascript Version

Vanilla JavaScript Version

The Vanilla JavaScript version of TribeFinder integrates the Google Maps API and GeoJSON data to help users locate the nearest tribal communities.

Responsive design built with HTML, CSS, and JavaScript, bundled using Webpack.

Key Features:

Dynamic data fetching and map display.

Distance calculation between user-entered ZIP code and tribal offices.

TribeFinder Splash Page: Setting the Tone

The TribeFinder splash page serves as a visually engaging introduction to the app, designed to captivate users while conveying the app’s purpose. Key features include:

Logo Integration: A custom logo inspired by the Medicine Wheel and a Google Maps marker, symbolizing cultural significance and functionality.
Modern Design: A warm yellow gradient background complements the bright colors of the logo, creating a cohesive and inviting aesthetic.
Responsive Typography: Large, clear fonts ensure readability on all devices.
Call-to-Action Button: A distinct “Enter Now” button directs users seamlessly into the app.

Welcome Section: Introducing TribeFinder

The app starts with a bold, visually distinct welcome box that explains its purpose. Users learn they can locate nearby tribes by simply entering their ZIP code.

Interactive Form for Tribe Search

Users can enter their ZIP code and select how many nearby tribes to display (5 or 10). The form integrates with the Google Maps Geocoding API to retrieve user location coordinates.

Dynamic Map Integration

The map dynamically displays tribal office locations based on user input. Markers are generated using the Google Maps API to showcase real-time geospatial data.

Results Display

The results section displays:

Contact Information: Including addresses and emails where available.

Tribe Names: Linked to official websites if available.

Leadership Details: Names and titles of tribal leaders.

Distance: Calculated using the Haversine formula.

Thoughtful Color Choices: Visual and Cultural Significance

The bright yellow sections were chosen for visual distinction against the white and gray background, which features an artistic rendering of the Ghost Dance.
The colors—white, red, yellow, and black—reflect the symbolic palette of the medicine wheel, connecting the app to a pan-Indian sense of Native American identity.

https://www.nps.gov/articles/000/the-medicine-wheel.htm

API Call Implementation: Handling Errors and Timeouts

This function manages API calls to the Google Geocoding API. Key features include:

Timeout Handling: Fails after 5 seconds to prevent indefinite waiting.
Error Management: Ensures only valid JSON data is processed.
Dynamic Fetch Requests: Adjusts for route and request methods.

API Key Management and Secure Requests

This code demonstrates fetching location data from the Google Maps Geocoding API based on a user-provided ZIP code. Key components include:

API Key Management: A placeholder for the apiKey ensures integration with Google Maps, while comments note options for environment variables to improve security.
Dynamic Fetch Requests: The fetch call dynamically appends the ZIP code and API key to the URL.
Error Handling: The function checks if the response is successful. If not, it throws an informative error; otherwise, it returns the parsed JSON.
This approach highlights secure and reliable API usage for obtaining geospatial data essential to the app’s functionality.

Distance Calculation with Haversine Formula

The app uses the Haversine formula to calculate distances “as the crow flies” between the user’s location and tribal offices.

Math Moment:
The Haversine formula determines the great-circle distance between two points on a sphere, commonly used in navigation.

https://en.wikipedia.org/wiki/Haversine_formula

Navigation Bar and Layout With Bootstrap

The app uses Bootstrap for responsive design:

Utility Classes: bg-warning, p-3, shadow, and rounded-3 enhance spacing and visual appeal.

Navigation Bar: A seamless, mobile-friendly navbar at the top.

Grid System: Ensures consistent layout with two key columns for the map and form sections.

User Input and State Management:

The app initializes user input, ZIP code state, and prepares the app to fetch tribal data using:

Event listeners for the form.

State updates for user preferences (number of results).

Fetching Tribal Data and User Location

This section fetches tribal location data and converts the user-entered ZIP code into latitude and longitude using the Google Maps Geocoding API.

Rendering and Sorting Results

This section dynamically generates a list of nearby tribal offices, displaying relevant information such as names, leaders, distances, addresses, and emails.

Google Maps Integration with Markers

Text:
The app dynamically places markers on the map for tribal offices. Each marker includes:

Label with tribe name.

Info window with address details, displayed on click.

bootstrap for responsive Layout and Styling

The layout utilizes Bootstrap’s grid system for responsiveness:

Two Columns: One for the map and one for the form.
Utility classes (bg-warning, p-3, shadow) for styling.
Responsive navigation bar for seamless page navigation.

API Integration and Callback

The app dynamically loads the Google Maps JavaScript API and initializes the map, ensuring smooth and responsive integration.

Results Section

Results appear in a dedicated container styled with a yellow background (bg-warning).

The final app experience provides users with:

Accurate, interactive maps.
Clearly formatted tribal data results.
A user-friendly form and visually distinct layout.

React Version Coming Soon

The next iteration of TribeFinder is underway, bringing enhanced functionality and performance through React. This version will feature:

Improved state management with React hooks.
Modular components for a more maintainable and scalable codebase.
Enhanced responsiveness and interactivity.

Stay tuned for a more powerful, modernized version of TribeFinder, showcasing our commitment to continuous improvement and innovation.