Parking Spot: Mark & Navigate Back

Introduction

A common “last 200 meters” problem in large campuses, hospitals, airports, shopping centers, and multi-level parking garages is simply remembering where you parked and later finding your way back to that same location

This use case guide shows one recommended approach for implementing a “Mark my parking spot” feature in a MapsIndoors-powered application:

1. The user marks a parking spot on the map (using their live position or a dropped pin)

2. The app saves that spot (typically per-user)

3. Later, the user can request directions back to that exact spot using the same wayfinding experience already in your MapsIndoors app

ParkingManager

A reusable ES Module for parking spot management that integrates with MapsIndoors SDK.

Table of Contents

• Overview

• Summary

• Installation

• Quick Start

• API Reference

• Storage Adapters

• MapsIndoors Integration

• Examples

---

Overview

ParkingManager provides a simple API to save, load, and manage parking spot locations. It's designed to work seamlessly with MapsIndoors SDK location objects and supports configurable storage backends.

MapsIndoors Features

• Way finding

Additional Features

• Save MapsIndoors locations as parking spots

• Persistent storage via localStorage or cookies

• Custom storage adapter support

Saved Data Structure

When a parking spot is saved, ParkingManager stores the following data:

{
  id: string,           // MapsIndoors location ID
  name: string,         // Location name
  description: string,  // Location description
  coordinates: {
    lat: number,        // Latitude
    lng: number         // Longitude
  },
  floorIndex: number,   // Floor level
  savedAt: number       // Unix timestamp (milliseconds)
}

---

Summary

A “Mark & Navigate Back” parking workflow is a compact but high-impact MapsIndoors use case:

• Save a point (usually per user)

• Render it clearly

• Route back using MapsIndoors wayfinding components

Because the pattern is generic (save a coordinate + optional floor + navigate later), you can reuse the same architecture for many other use cases like “Find my desk”, “Return to entrance”, “Meet me here”, or “Remember this place”.

---

Browser Support

ParkingManager requires ES6+ support and works in all modern browsers:

• Chrome 61+

• Firefox 60+

• Safari 11+

• Edge 16+

For localStorage adapter, ensure localStorage is available. For cookie adapter, ensure cookies are enabled.

---

Installation

Include the module in your HTML file with ES module support:

<script type="module" src="script.js"></script>

Import in your JavaScript:

import { ParkingManager, LocalStorageAdapter, CookieStorageAdapter } from './parking.js';

---

Quick Start

import { ParkingManager } from './parking.js';

// Create a ParkingManager instance (uses localStorage by default)
const parking = new ParkingManager();

// Save a MapsIndoors location as parking
parking.saveParkingSpot(mapsIndoorsLocation);

// Check if parking exists
if (parking.hasSavedParking()) {
  // Load the saved parking data
  const savedParking = parking.loadParkingSpot();
  console.log('Parked at:', savedParking.name);
}

// Clear saved parking
parking.clearParkingSpot();

---

API Reference

ParkingManager

Constructor

new ParkingManager(options?)

Option	Type	Default	Description
storageAdapter	Object	LocalStorageAdapter	Storage backend to use
storageKey	string	'savedParkingSpot'	Key used for storage

Methods

saveParkingSpot(mapsIndoorsLocation)

Saves a MapsIndoors location as the parking spot.

parking.saveParkingSpot(location);

Parameter	Type	Description
mapsIndoorsLocation	Object	MapsIndoors location object

Returns: boolean - true if save was successful

loadParkingSpot()

Loads the saved parking spot data.

const savedParking = parking.loadParkingSpot();

Returns: Object | null - Saved parking data or null if none exists

clearParkingSpot()

Clears the saved parking spot.

parking.clearParkingSpot();

Returns: boolean - true if clear was successful

hasSavedParking()

Checks if a parking spot is saved.

if (parking.hasSavedParking()) {
  // Parking spot exists
}

Returns: boolean - true if a parking spot exists

---

Storage Adapters

LocalStorageAdapter (Default)

Uses browser localStorage for persistent storage.

import { ParkingManager, LocalStorageAdapter } from './parking.js';

const parking = new ParkingManager({
  storageAdapter: new LocalStorageAdapter({
    prefix: 'myApp_'  // Optional key prefix
  })
});

Option	Type	Default	Description
prefix	string	''	Prefix for storage keys

CookieStorageAdapter

Uses browser cookies with configurable expiration.

import { ParkingManager, CookieStorageAdapter } from './parking.js';

const parking = new ParkingManager({
  storageAdapter: new CookieStorageAdapter({
    expireDays: 7,      // Cookie expiration in days
    path: '/',          // Cookie path
    secure: false,      // Secure flag (HTTPS only)
    sameSite: 'Lax'     // SameSite policy
  })
});

Option	Type	Default	Description
expireDays	number	7	Days until cookie expires
path	string	'/'	Cookie path
secure	boolean	false	Require HTTPS
sameSite	string	'Lax'	SameSite attribute

Custom Storage Adapter

Create your own adapter by implementing the storage interface:

class MyCustomAdapter {
  get(key) {
    // Return parsed data or null
  }

  set(key, value) {
    // Store data, return true on success
  }

  remove(key) {
    // Remove data, return true on success
  }
}

const parking = new ParkingManager({
  storageAdapter: new MyCustomAdapter()
});

Example: SessionStorage Adapter

class SessionStorageAdapter {
  get(key) {
    try {
      const value = sessionStorage.getItem(key);
      return value ? JSON.parse(value) : null;
    } catch (e) {
      return null;
    }
  }

  set(key, value) {
    try {
      sessionStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (e) {
      return false;
    }
  }

  remove(key) {
    try {
      sessionStorage.removeItem(key);
      return true;
    } catch (e) {
      return false;
    }
  }
}

---

MapsIndoors Integration

Complete Setup Example

import { ParkingManager, CookieStorageAdapter } from './parking.js';

// Initialize ParkingManager
const parkingManager = new ParkingManager({
  storageAdapter: new CookieStorageAdapter({ expireDays: 7 }),
  storageKey: 'venue_parking_spot'
});

// Initialize MapsIndoors
const mapViewOptions = {
  accessToken: 'YOUR_MAPBOX_TOKEN',
  element: document.getElementById('map'),
  center: { lat: 0, lng: 0 },
  zoom: 17
};

const mapView = new mapsindoors.mapView.MapboxV3View(mapViewOptions);
const mapsIndoors = new mapsindoors.MapsIndoors({
  mapView: mapView,
  venue: 'YOUR_VENUE_ID'
});

// Load saved parking on startup
let savedParkingSpot = parkingManager.loadParkingSpot();

// Center map on saved parking when ready
mapsIndoors.addListener('ready', () => {
  if (savedParkingSpot) {
    const map = mapView.getMap();
    map.setCenter({
      lat: savedParkingSpot.coordinates.lat,
      lng: savedParkingSpot.coordinates.lng
    });
    mapsIndoors.setFloor(savedParkingSpot.floorIndex);
  }
});

Saving Parking from Location Click

// Handle location clicks
mapsIndoors.on('click', (location) => {
  if (location && isParkingLocation(location)) {
    showSaveParkingButton(location);
  }
});

// Check if location is a parking spot
function isParkingLocation(location) {
  const type = (location.properties.type || '').toLowerCase();
  const name = (location.properties.name || '').toLowerCase();
  return type.includes('parking') || name.includes('parking');
}

// Save parking button handler
function saveParkingHandler(location) {
  const success = parkingManager.saveParkingSpot(location);

  if (success) {
    savedParkingSpot = parkingManager.loadParkingSpot();
    showSuccessMessage('Parking spot saved!');
    updateParkingUI();
  } else {
    showErrorMessage('Failed to save parking spot');
  }
}

Navigating to Saved Parking

function navigateToParking() {
  const parking = parkingManager.loadParkingSpot();

  if (!parking) {
    showErrorMessage('No parking spot saved');
    return;
  }

  // Center map on parking location
  const map = mapView.getMap();
  map.setCenter({
    lat: parking.coordinates.lat,
    lng: parking.coordinates.lng
  });
  mapsIndoors.setFloor(parking.floorIndex);

  // Create destination for directions
  const destination = {
    lat: parking.coordinates.lat,
    lng: parking.coordinates.lng,
    floor: parking.floorIndex
  };

  // Calculate route from current position
  calculateDirections(currentPosition, destination);
}

Getting Directions to Parking

async function getDirectionsToParking(origin) {
  const parking = parkingManager.loadParkingSpot();

  if (!parking) {
    console.error('No parking spot saved');
    return;
  }

  // Setup directions service
  const externalProvider = new mapsindoors.directions.MapboxProvider('YOUR_MAPBOX_TOKEN');
  const directionsService = new mapsindoors.services.DirectionsService(externalProvider);
  const directionsRenderer = new mapsindoors.directions.DirectionsRenderer({
    mapsIndoors: mapsIndoors
  });

  // Calculate route
  const route = await directionsService.getRoute({
    origin: {
      lat: origin.lat,
      lng: origin.lng,
      floor: origin.floor
    },
    destination: {
      lat: parking.coordinates.lat,
      lng: parking.coordinates.lng,
      floor: parking.floorIndex
    },
    travelMode: 'WALKING'
  });

  // Display route on map
  directionsRenderer.setRoute(route);
}

---

Examples

Example 1: Basic Usage with LocalStorage

import { ParkingManager } from './parking.js';

const parking = new ParkingManager();

// Save when user clicks a parking location
document.getElementById('save-btn').addEventListener('click', () => {
  if (currentLocation) {
    parking.saveParkingSpot(currentLocation);
    alert('Parking saved!');
  }
});

// Load on page load
window.addEventListener('load', () => {
  if (parking.hasSavedParking()) {
    const saved = parking.loadParkingSpot();
    document.getElementById('parking-name').textContent = saved.name;
  }
});

Example 2: Cookie Storage with Custom Key

import { ParkingManager, CookieStorageAdapter } from './parking.js';

const parking = new ParkingManager({
  storageAdapter: new CookieStorageAdapter({
    expireDays: 30,
    secure: true,
    sameSite: 'Strict'
  }),
  storageKey: 'stadium_parking_v1'
});

Example 3: Display Saved Parking Info

function updateParkingDisplay() {
  const parking = parkingManager.loadParkingSpot();
  const container = document.getElementById('parking-info');

  if (parking) {
    // Format time since saved
    const savedDate = new Date(parking.savedAt);
    const minutesAgo = Math.floor((Date.now() - parking.savedAt) / 60000);

    let timeText;
    if (minutesAgo < 1) {
      timeText = 'Just now';
    } else if (minutesAgo < 60) {
      timeText = `${minutesAgo} minute${minutesAgo > 1 ? 's' : ''} ago`;
    } else {
      const hoursAgo = Math.floor(minutesAgo / 60);
      timeText = `${hoursAgo} hour${hoursAgo > 1 ? 's' : ''} ago`;
    }

    container.innerHTML = `
      <h3>${parking.name}</h3>
      <p>Floor: ${parking.floorIndex}</p>
      <p>Saved: ${timeText}</p>
      <button onclick="navigateToParking()">Navigate</button>
      <button onclick="clearParking()">Clear</button>
    `;
  } else {
    container.innerHTML = '<p>No parking spot saved</p>';
  }
}

Example 4: Search and Save Parking

async function searchAndSaveParking(query) {
  // Search for parking locations
  const locations = await mapsindoors.services.LocationsService.getLocations({
    q: query,
    types: ['parking'],
    take: 10
  });

  if (locations.length > 0) {
    // Save the first result
    const parkingLocation = locations[0];
    parkingManager.saveParkingSpot(parkingLocation);

    console.log('Saved parking:', parkingLocation.properties.name);
    return true;
  }

  return false;
}

// Usage
searchAndSaveParking('North Parking Lot');