Route Optimization for Cleaning Operations

A Use Case Guide for implementing an Optimized Cleaning Route functionality. Learn how to select locations, generate the most efficient route, and navigate cleaning tasks step by step.

This guide currently focuses on displaying the capabilities of the MapsIndoors Web SDK.

Introduction

A common challenge for cleaning staff in large offices, hospitals, and airports is determining an optimized route that allows them to clean all required areas as efficiently as possible.

This use case guide shows one recommended approach for implementing a “Optimized Cleaning Route” feature in a MapsIndoors-powered application:

1. The user chooses a list of locations that needs to be cleaned

2. The app calculates an optimized cleaning route

3. The user later marks the location as Clean and navigates to the next location.

Cleaning Rooms Module

A reusable, data-source agnostic module for managing room cleaning workflows with MapsIndoors integration.

CleaningModule handles all cleaning-related functionality, including:

• Room status management. (clean, needs-cleaning, in progress)

• Interactive room slection and info cards.

• Route planning and navigation.

• UI rendering and updates.

The module uses dependency injection making it compatible with any data source that implements the required interface.

MapsIndoors Features

• Multi-stop Navigation

Additional Features

• Room status management (clean, needs-cleaning, in-progress).

• Route planning with room checklist and selection tools

• Optimized route calculation and step-by-step navigation.

• Configurable start/end points for routes.

---

Get Started

Installation

Import the module in your ES6 application:

JavaScript

import { CleaningModule } from './js/cleaningModule.js';

Dependencies

Required HTML Elements

<!-- Room list container -->
<div id="room-list"></div>

<!-- Info card -->
<div id="info-card">
    <span id="info-card-title"></span>
    <div id="info-card-status"></div>
    <div id="info-card-location"></div>
    <div id="info-card-last-cleaned"></div>
    <div id="info-card-actions"></div>
    <button id="info-card-close">Close</button>
</div>

<!-- Route planning -->
<div id="room-checklist"></div>
<div id="selected-rooms-container"></div>
<button id="calculate-route">Calculate Route</button>

<!-- Route navigation -->
<div id="route-menu">
    <span id="route-room-name"></span>
    <div id="route-room-status"></div>
    <span id="progress-indicator"></span>
    <button id="previous-stop">Previous</button>
    <button id="next-stop">Next</button>
</div>


<!-- Loading overlay -->
<div id="route-loading-overlay" class="route-loading-overlay">
    <div class="route-loading-spinner"></div>
    <div class="route-loading-text">Calculating optimized route...</div>
</div>

<!-- Optional dropdowns -->
<select id="start-point"></select>
<select id="end-point"></select>
<select id="add-room"></select>

Required CSS Classes

.room-card { }
.room-card.selected { }
.room-card.clean { }
.room-card.needs-cleaning { }
.room-card.in-progress { }
.info-card-status { }
.visible { }
.route-loading-overlay { }
.route-loading-overlay.visible { }

---

Quick Start

JavaScript

import { CleaningModule } from './js/cleaningModule.js';
import { roomStore } from './js/roomStore.js';
import { CONFIG } from './js/utils.js';

// Initialize MapsIndoors (see SDK docs)
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView });
const mapboxInstance = mapView.getMap();
const directionsService = new mapsindoors.services.DirectionsService();
const directionsRenderer = new mapsindoors.directions.DirectionsRenderer({
  mapsIndoors: mapsIndoorsInstance
});

// Create the cleaning module
const cleaningModule = new CleaningModule({
  mapsIndoors: mapsIndoorsInstance,
  mapbox: mapboxInstance,
  directionsService,
  directionsRenderer,
  roomStore,
  config: CONFIG
});

// Load room data
roomStore.setRooms(roomsData);

// Initialize UI
cleaningModule.updateRoomDisplayRules();
cleaningModule.renderRoomList();
cleaningModule.populateSelectedRooms();

Room Store Interface

Any room store passed to CleaningModule must implement:

TypeScript

interface RoomStore {
  getById(id: string): Room | undefined;
  getAll(): Room[];
  getRoomsByStatus(status: 'clean' | 'needs-cleaning' | 'in-progress'): Room[];
  getRoomIdsByStatus(status: string): string[];
  updateStatus(id: string, newStatus: string, additionalUpdates?: object): Room | null;
  getSortedByStatusPriority(): Room[];
  has(id: string): boolean;
}

interface Room {
  id: string;
  name: string;
  floor: number;
  location: { lat: number; lng: number };
  status: 'clean' | 'needs-cleaning' | 'in-progress';
  lastCleaned?: Date;
  isSpecial?: boolean;
}

Using the Built-in RoomStore

JavaScript

import { roomStore, RoomStore } from './js/roomStore.js';

// Use the singleton instance
roomStore.setRooms(myRoomsArray);

// Or create a new instance
const customStore = new RoomStore();
customStore.setRooms(myRoomsArray);

Creating a Custom Room Store

JavaScript

// Example: API-backed room store 
class ApiRoomStore { 

constructor(apiClient) { 
    this.api = apiClient; 
    this._cache = new Map(); 
} 

async fetchAndCache() { 
    const rooms = await this.api.getRooms(); 
    this._cache.clear(); 
    rooms.forEach(room => this._cache.set(room.id, room)); 
}
 
getById(id) { 

return this. cache.get(id);

API References

Constructor

Option	Type	Is Required?	Description
mapsIndoors	Object	Yes	MapsIndoors instance
mapbox	Object	Yes	Mapbox GL instance
directionsService	Object	Yes	MapsIndoors DirectionsService
DirectionsRenderer	Object	Yes	MapsIndoors DirectionsRenderer
roomStore	Object	Yes	Room data store implementing required interface
config	Object	Yes	Configuration object

Room Status Methods

updateRoomStatus(roomId, newStatus)

Updates a room's status and refreshes all UI components.

//Practical examples
cleaningModule.updateRoomStatus('room-123', 'in-progress');
cleaningModule.updateRoomStatus('room-123', 'clean'); 

updateRoomDisplayRules()

Applies MapsIndoors display rules based on room statuses (colors polygons on map).

cleaningModule.updateRoomDisplayRules();

UI rendering Methods

renderRoomList()

Renders the room list in the sidebar, sorted by status priority.

cleaningModule.renderRoomList(); 

updateInfoCard(roomId)

Shows and populates the info card for a specific room.

cleaningModule.updateInfoCard('room-123'); 

populateRoomDropdowns()

Populates all room selection drop-downs.

cleaningModule.populateRoomDropdowns(); 

populateSelectedRooms()

Renders the room checklist for route planning.

cleaningModule.populateSelectedRooms(); 

Room Selection Methods

selectRoom(roomId, shouldFlyTo = false)

Selects a room and optionally flies the camera to it.

// Select without camera movement 
cleaningModule.selectRoom('room-123'); 

// Select and fly to room 
cleaningModule.selectRoom('room-123', true); 

closeSelection()

Deselects the current room and hides the info card.

cleaningModule.closeSelection();

Route Planning Methods

addRoomToRoute(roomId)

Adds a room to the cleaning route.

cleaningModule.addRoomToRoute('room-123'); 

removeRoomFromRoute(roomId)

Removes a room from the cleaning route.

cleaningModule.removeRoomFromRoute('room-123'); 

selectRandomRooms(count = 10)

Selects random rooms that need cleaning.

cleaningModule.selectRandomRooms(10); 
cleaningModule.selectRandomRooms(5); 

selectAllRooms()

Selects all rooms that need cleaning.

cleaningModule.selectAllRooms(); 

clearSelectedRooms()

Clears all selected rooms from the route.

cleaningModule.clearSelectedRooms();

Route Navigation Methods

async calculateRoute()

Calculates and displays the optimized cleaning route.

await cleaningModule.calculateRoute(); 

nextStop()

Navigates to the next stop in the route.

cleaningModule.nextStop(); 

previousStop()

Navigates to the previous stop in the route.

cleaningModule.previousStop(); 

clearRoute()

Clears the current route from the map.

cleaningModule.clearRoute(); 

Utility Methods

clearElementCache()

Clears the DOM element cache. Call this if DOM structure changes dynamically.

cleaningModule.clearElementCache(); 

Properties

Property	Type	Description
selectedRoomId	string | null	Currently selected room ID
currentRoute	Object | null	Current route result from directions service
currentLegIndex	number	Current position in route navigation
routeRooms	string[]	Array of room IDs selected for the route

---

Examples

Example 1: Basic Setup with Event Listeners

import { CleaningModule } from './js/cleaningModule.js';
import { roomStore } from './js/roomStore.js';
import { CONFIG } from './js/utils.js';

async function initializeApp() {
    // Setup MapsIndoors...
    const mapsIndoors = new mapsindoors.MapsIndoors({ mapView });
    const mapbox = mapView.getMap();
    const directionsService = new mapsindoors.services.DirectionsService();
    const directionsRenderer = new mapsindoors.directions.DirectionsRenderer({
        mapsIndoors: mapsIndoors,
        fitBounds: true
    });

    // Create module
    const cleaning = new CleaningModule({
        mapsIndoors,
        mapbox,
        directionsService,
        directionsRenderer,
        roomStore,
        config: CONFIG
    });

    // Load data
    const rooms = await fetchRoomsFromAPI();
    roomStore.setRooms(rooms);

    // Initialize UI
    cleaning.updateRoomDisplayRules();
    cleaning.renderRoomList();
    cleaning.populateSelectedRooms();

    // Setup event listeners
    document.getElementById('calculate-route').addEventListener('click', () => {
        cleaning.calculateRoute();
    });

    document.getElementById('next-stop').addEventListener('click', () => {
        cleaning.nextStop();
    });

    document.getElementById('previous-stop').addEventListener('click', () => {
        cleaning.previousStop();
    });

    document.getElementById('cancel-route').addEventListener('click', () => {
        cleaning.clearRoute();
    });

    document.getElementById('info-card-close').addEventListener('click', () => {
        cleaning.closeSelection();
    });

    // Map click handler
    mapsIndoors.addListener('click', (event) => {
        if (event?.id && roomStore.has(event.id)) {
            cleaning.selectRoom(event.id);
        }
    });
}

Example 2: Testing with Mock Store

// Mock room store for testing
class MockRoomStore {
    constructor() {
        this.rooms = new Map([
            ['room-1', { id: 'room-1', name: 'Test Room 1', status: 'needs-cleaning', floor: 1, location: { lat: 0, lng: 0 } }],
            ['room-2', { id: 'room-2', name: 'Test Room 2', status: 'clean', floor: 1, location: { lat: 0, lng: 0 } }],
            ['room-3', { id: 'room-3', name: 'Test Room 3', status: 'in-progress', floor: 2, location: { lat: 0, lng: 0 } }]
        ]);
    }

    getById(id) { return this.rooms.get(id); }
    getAll() { return Array.from(this.rooms.values()); }
    has(id) { return this.rooms.has(id); }

    getRoomsByStatus(status) {
        return this.getAll().filter(r => r.status === status);
    }

    getRoomIdsByStatus(status) {
        return this.getRoomsByStatus(status).map(r => r.id);
    }

    updateStatus(id, newStatus, updates = {}) {
        const room = this.rooms.get(id);
        if (!room) return null;
        room.status = newStatus;
        Object.assign(room, updates);
        return room;
    }

    getSortedByStatusPriority() {
        const priority = { 'needs-cleaning': 0, 'in-progress': 1, 'clean': 2 };
        return this.getAll().sort((a, b) => priority[a.status] - priority[b.status]);
    }
}

// Test
const mockStore = new MockRoomStore();
const testModule = new CleaningModule({
    mapsIndoors: mockMapsIndoors,
    mapbox: mockMapbox,
    directionsService: mockDirectionsService,
    directionsRenderer: mockDirectionsRenderer,
    roomStore: mockStore,
    config: { startEndLocationId: 'test-id' }
});

// Verify behavior
console.assert(mockStore.getById('room-1').status === 'needs-cleaning');
testModule.updateRoomStatus('room-1', 'clean');
console.assert(mockStore.getById('room-1').status === 'clean');

Example 3: Integrating with Backend API

// Sync status changes with backend
class SyncedCleaningModule extends CleaningModule {
    constructor(options, apiClient) {
        super(options);
        this.api = apiClient;
    }

    async updateRoomStatus(roomId, newStatus) {
        try {
            // Update backend first
            await this.api.updateRoomStatus(roomId, newStatus);

            // Then update local state and UI
            super.updateRoomStatus(roomId, newStatus);
        } catch (error) {
            console.error('Failed to sync status:', error);
            alert('Failed to update room status. Please try again.');
        }
    }
}

// Usage
const syncedModule = new SyncedCleaningModule({
    mapsIndoors,
    mapbox,
    directionsService,
    directionsRenderer,
    roomStore,
    config: CONFIG
}, apiClient);

Status Flow

┌─────────────────┐
│  needs-cleaning │
└────────┬────────┘
         │ Start Cleaning
         ▼
┌─────────────────┐
│   in-progress   │
└────────┬────────┘
         │ Mark as Clean
         ▼
┌─────────────────┐
│      clean      │
└────────┬────────┘
         │ Mark as Needs Cleaning
         ▼
┌─────────────────┐
│  needs-cleaning │
└─────────────────┘