WebGIS-React-Native 📱🗺️

A universal mobile-first template for modern WebGIS and interactive mapping apps. Built with React Native, Expo, and OpenStreetMap, this project integrates seamlessly with the WebGIS-Django backend to power full-stack spatial applications on Android and iOS.

---

🚀 Quick Start with the Backend Script

Use the bootstrap.sh script from the backend project to spin up everything at once:

bash <(curl -s https://raw.githubusercontent.com/GeoBradDev/WebGIS-Django/main/scripts/bootstrap.sh)

This will:

• Clone both frontend and backend repositories
• Install required system dependencies
• Set up a PostGIS-enabled PostgreSQL database
• Configure environment variables and virtualenv
• Start both frontend (mobile) and backend development servers

---

🌟 Features

• 🗺️ Interactive Mobile Map – Built with react-native-maps, supports OpenStreetMap tiles, markers, and polylines
• 🧭 Location Search – Integrated with Nominatim for forward/reverse geocoding
• 📦 Zustand State Management – Simple, scalable global state handling
• 🧱 Modular Components – Reusable components and hooks for clean architecture
• 🪶 Expo + React Native – Works on both Android and iOS via Expo Go

---

🛠️ Tech Stack

Technology	Purpose
React Native	Mobile frontend framework
Expo	Rapid development & deployment
react-native-maps	Map rendering using OpenStreetMap
Zustand	Lightweight state management
Nominatim API	Geocoding and reverse geocoding

---

⚡ Manual Setup

Prerequisites

• Node.js (v18+ recommended)
• npm
• Expo CLI: npm install -g expo-cli

Installation

# 1. Clone the repository
git clone https://github.com/GeoBradDev/WebGIS-React-Native.git

# 2. Navigate to the project directory
cd WebGIS-React-Native

# 3. Install dependencies
npm install

# 4. Start the Expo development server
npx expo start

You can run the app on your Android/iOS device using the Expo Go app or in an emulator.

---

📁 Project Structure

WebGIS-React-Native/
├── assets/            # Images, icons, fonts
├── components/        # Reusable UI and map components
├── constants/         # Configuration (e.g., tile URLs, colors)
├── hooks/             # Custom hooks (e.g., useGeolocation, useGeocoder)
├── store/             # Zustand global state
├── screens/           # App screens (e.g., MapScreen)
├── App.tsx            # Main application entry
├── app.config.js      # Expo configuration
└── README.md          # Project documentation

---

🧪 Usage

Map Component

• Built with react-native-maps and UrlTile for OpenStreetMap tiles
• Customize markers, polylines, heatmaps, and more
• Add real-time geolocation tracking and auto-centering

Search

• Search for a location using Nominatim
• Map pans and zooms to the result
• Reverse geocoding supported from tapped map coordinates

State Management

• Zustand is used to manage global app state (e.g., location, search result, layer toggles)

---

🛠 Customization

Tile Source

Update your OpenStreetMap or custom tile layer:

<UrlTile
  urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
  maximumZ={19}
/>

Environment Variables

Create a .env file in the root:

API_URL=http://localhost:8000/api

Then access via process.env.API_URL using expo-constants or another config loader.

Feature Ideas

• 🔥 Add heatmap overlay or segment-based speed visualization
• 📍 Integrate background location tracking
• 🌐 Add multilingual UI
• 🗂️ Sync user layers with backend API

---

🔗 Backend Integration

Designed to work out-of-the-box with:

👉 WebGIS-Django Backend – Featuring Django Ninja, headless Django Allauth, and PostGIS support

---

🤝 Contributing

Pull requests and issues are welcome! Help us improve this template for the next generation of mobile WebGIS apps.

---

📄 License

MIT © GeoBrad.dev

---

🙏 Acknowledgments

• React Native
• Expo
• react-native-maps
• OpenStreetMap / Nominatim