🗺️ UI Modernisation Lab - Maximo Real Estate & Facilities

An interactive web application that visualizes IBM TRIRIGA location data on an interactive map with advanced filtering and statistics. Part of the IBM UI Modernisation Lab initiative.

📋 Overview

This project demonstrates modern UI/UX principles applied to IBM Maximo Real Estate & Facilities (TRIRIGA) data visualization. It provides an intuitive, interactive map interface for exploring facility locations across the United States.

Key Features

• 🗺️ Interactive Map - Leaflet-based map with OpenStreetMap tiles
• 📍 Smart Markers - Color-coded pins with clustering for better visualization
• 🔍 Advanced Filtering - Filter by state, city, and location type
• 📊 Live Statistics - Real-time counts and breakdowns
• 🎨 Collapsible Panel - Clean UI with expandable controls
• 📥 Data Export - Export filtered results to CSV
• 🇺🇸 US Focus - Optimized for United States locations
• 🚫 No CORS Issues - File-based approach bypasses API restrictions

🚀 Quick Start

Prerequisites

• Python 3.10 or higher
• Access to IBM TRIRIGA instance
• Valid TRIRIGA credentials

Installation

1. Clone the repository

   git clone https://github.com/ibm-self-serve-assets/UI-Modernisation-Lab-MREF.git
   cd UI-Modernisation-Lab-MREF

2. Configure TRIRIGA credentials

   Edit fetch_tririga_locations.py (lines 21-23):

   TRIRIGA_BASE_URL = "https://your-tririga-instance.com"
   TRIRIGA_USERNAME = "your_username"
   TRIRIGA_PASSWORD = "your_password"

3. Fetch location data from TRIRIGA

   python3 fetch_tririga_locations.py

   This creates:

   • tririga_locations.json - All locations
   • tririga_us_locations.json - US locations with coordinates
   • tririga_locations.csv - CSV export

4. Start the web server

   python3 -m http.server 8000

5. Open in browser

   http://localhost:8000/tririga_us_map.html
   

One-Click Start (macOS)

Double-click VIEW_US_MAP.command to automatically start the server and open the map.

📁 Project Structure

UI-Modernisation-Lab-MREF/
├── README.md                          # This file
├── LICENSE                            # MIT License
├── .gitignore                         # Git ignore rules
├── CONTRIBUTING.md                    # Contribution guidelines
│
├── assets/                            # Screenshots and images
│   ├── screenshot-map.png
│   ├── screenshot-controls.png
│   └── screenshot-table.png
│
├── fetch_tririga_locations.py         # Data fetcher script
├── tririga_us_map.html               # Main map application
├── tririga_location_table.html       # Table view of locations
│
├── VIEW_US_MAP.command               # macOS startup script
│
└── docs/                             # Additional documentation
    ├── SETUP.md
    ├── API.md
    └── CUSTOMIZATION.md

🎯 Usage

Map View

1. Load Data: Automatically loads on page open
2. Filter: Use dropdowns to filter by state, city, or type
3. Explore: Click markers to see location details
4. Reset: Click "🔍 Reset View" to reset filters and zoom

Collapsible Controls

• Click the blue "📊 Controls & Statistics" header to collapse/expand
• Saves screen space for better map viewing

Table View

Open tririga_location_table.html for a searchable table with:

• Search functionality
• Pagination (50 items per page)
• CSV export
• All location details

🔧 Configuration

TRIRIGA Connection

The script uses JSESSIONID-based authentication:

1. POST to /p/websignon/signon with credentials
2. Extract JSESSIONID from response
3. Use session cookie for API calls

Data Fields

Fetches these fields from TRIRIGA:

• triGisLatitudeNU - Latitude (GIS field)
• triGisLongitudeNU - Longitude (GIS field)
• triNameTX - Location name
• triCityTX - City
• triStateProvTX - State/Province
• triCountryTX - Country
• triAddressTX - Address
• triLocationTypeCL - Location type

Filtering Logic

• Coordinates: Excludes zero or empty coordinates
• Country: Filters for "United States" (configurable)
• Valid Data: Only includes valid lat/lng values

🎨 Customization

Change Marker Colors

Edit tririga_us_map.html:

const getMarkerColor = (locationType) => {
    const type = (locationType || '').toLowerCase();
    if (type.includes('building')) return '#c30b82';  // Pink
    if (type.includes('office')) return '#0066cc';    // Blue
    return '#4caf50';                                  // Green
};

Change Map Center

const map = L.map('map').setView([39.8283, -98.5795], 4);
// [latitude, longitude], zoom_level

Filter Different Country

Edit fetch_tririga_locations.py:

us_locations = [loc for loc in locations_with_coords 
                if loc['country'] == 'Your Country']

📊 Example Output

Total locations fetched: 272
Valid locations parsed: 272
Locations with coordinates: 271
United States locations: 80

🔍 Troubleshooting

No locations appear

1. Check tririga_us_locations.json exists
2. Verify coordinates are not all zeros
3. Check browser console (F12)
4. Ensure server is running on port 8000

Authentication fails

1. Verify credentials in fetch_tririga_locations.py
2. Check TRIRIGA URL (no trailing /app/tririga)
3. Ensure proper permissions
4. Test TRIRIGA access in browser

Timeout errors

1. Script has 120-second timeout with 3 retries
2. Large datasets may take time
3. Check network connectivity
4. Try during off-peak hours

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see LICENSE file for details.

🙏 Acknowledgments

• IBM TRIRIGA - Facilities management platform
• Leaflet.js - Interactive map library
• OpenStreetMap - Map tiles
• Leaflet.markercluster - Marker clustering

📞 Support

• Issues: GitHub Issues
• Email: ssnarasi@in.ibm.com
• Organization: IBM

🗺️ Screenshots

Interactive Map View

Collapsible Control Panel

Table View

📈 Roadmap

• Add heatmap visualization
• Support for multiple countries
• Real-time data refresh
• Export to GeoJSON
• Mobile app version
• Dark mode theme
• Advanced search with autocomplete

🔐 Security

• Never commit credentials to version control
• Use environment variables for sensitive data
• Data files are gitignored
• Consider OAuth for production

---

Part of IBM UI Modernisation Lab Initiative

Version: 1.0.0
Last Updated: 2026-06-24
Status: ✅ Production Ready
Maintainer: Satish Narasimhan (ssnarasi@in.ibm.com)
Organization: IBM