navigator/scripts/custom-layers.mjs

/**
 * Custom Layers Configuration
 * ===========================
 * Define your own map layers here — **zones** (polygons/areas),
 * **points of interest** (POIs), and **paths/routes** (LineStrings like GPX
 * tracks & trails). These are bundled into the static build alongside the
 * Overpass OSM data.
 *
 * This file is meant to be edited by hand. To add features, just append
 * to the `features` array of an existing layer, or add a whole new layer.
 *
 * Each layer needs:
 *   - id          unique slug (used for the output filename)
 *   - name        human-readable name shown in the UI
 *   - layerType   'poi' | 'zone' | 'path'
 *   - color       hex color used for the marker/fill/line
 *   - features    array of feature objects (see below)
 *
 * Feature format (by layerType):
 *   POI (point):
 *     { name, desc?, address?, bearing?, fov?, lon, lat }
 *
 *   Zone (polygon — list the corner points; it is closed automatically):
 *     { name, desc?, polygon: [[lon,lat], [lon,lat], ...] }
 *
 *   Path / route (LineString — an ordered list of points, like a track):
 *     { name, desc?, line: [[lon,lat], [lon,lat], ...] }
 *
 * Coordinates are [longitude, latitude] (lon first, like GeoJSON).
 * All fields except the geometry (`lon`/`lat`, `polygon`, or `line`) and
 * `name` are optional.
 *
 * Optional POI fields:
 *   - address   street address / place description
 *   - bearing   compass direction the POI faces. Accepts a compass point
 *               ('N','NNE','NE',...) OR a numeric bearing in degrees (0-360,
 *               0 = north, 90 = east) OR a 16-point rose ('NE-by-N', etc).
 *   - fov       field of view in degrees (how wide the view / coverage is).
 */

export const CUSTOM_LAYERS = [
  // -------------------------------------------------------------------------
  // EXAMPLE — Points of Interest
  // A few spots around downtown Tulsa. Replace / extend as you like.
  // -------------------------------------------------------------------------
  {
    id: 'my-places',
    name: 'My Places',
    layerType: 'poi',
    color: '#e11d48',
    features: [
      {
        name: 'BOK Center',
        desc: 'Arena & events',
        address: '100 W 5th St, Tulsa, OK 74103',
        lon: -95.9966,
        lat: 36.1498
      },
      {
        name: 'Philbrook Museum',
        desc: 'Art museum & gardens',
        address: '2727 S Rockford Rd, Tulsa, OK 74114',
        lon: -95.9747,
        lat: 36.1258
      },
      {
        name: 'Gathering Place',
        desc: 'Riverside park',
        address: '2650 S John Williams Way E, Tulsa, OK 74114',
        bearing: 'SE',      // bearing + fov optional
        fov: 140,
        lon: -95.9791,
        lat: 36.1098
      },
      {
        name: 'Woodward Park',
        desc: 'Rose garden',
        address: '2435 S Peoria Ave, Tulsa, OK 74114',
        bearing: 10,        // numeric bearing also accepted (degrees)
        lon: -95.9792,
        lat: 36.1334
      }
    ]
  },

  // -------------------------------------------------------------------------
  // EXAMPLE — Zones
  // A few neighborhood / district boundaries. Add your own as polygons.
  // -------------------------------------------------------------------------
  {
    id: 'districts',
    name: 'Districts',
    layerType: 'zone',
    color: '#0ea5e9',
    features: [
      {
        name: 'Downtown Tulsa',
        desc: 'Rough downtown core',
        polygon: [
          [-96.0000, 36.1300],
          [-95.9900, 36.1300],
          [-95.9900, 36.1600],
          [-96.0000, 36.1600]
        ]
      },
      {
        name: 'Cherry Street',
        desc: 'Shopping & dining district',
        polygon: [
          [-95.9850, 36.1200],
          [-95.9750, 36.1200],
          [-95.9750, 36.1280],
          [-95.9850, 36.1280]
        ]
      }
    ]
  },

  // -------------------------------------------------------------------------
  // EXAMPLE — Path / route
  // A LineString track, like a GPX route or trail. Each feature uses `line`.
  // -------------------------------------------------------------------------
  {
    id: 'trails',
    name: 'Trails & Routes',
    layerType: 'path',
    color: '#22c55e',
    features: [
      {
        name: 'Claremore Lake Loop',
        desc: 'Example walking route around the lake',
        line: [
          [-95.5649, 36.3415],
          [-95.5700, 36.3430],
          [-95.5750, 36.3420],
          [-95.5720, 36.3360],
          [-95.5660, 36.3365]
        ]
      }
    ]
  },

  // -------------------------------------------------------------------------
  // EXAMPLE — Rogers County local layer
  // Real places around your area (coordinates via Nominatim). Add your own
  // home / property / haunts here.
  // -------------------------------------------------------------------------
  {
    id: 'rogers-county',
    name: 'Rogers County',
    layerType: 'poi',
    color: '#f59e0b',
    features: [
      {
        name: 'Claremore Museum of History',
        desc: 'Local museum',
        address: '121 N Weenonah Ave, Claremore, OK 74017',
        lon: -95.6112936,
        lat: 36.3114856
      },
      {
        name: 'Rogers County Courthouse',
        desc: 'County seat',
        lon: -95.6164140,
        lat: 36.3110143
      },
      {
        name: 'Claremore Indian Hospital',
        desc: 'Health center',
        lon: -95.6292597,
        lat: 36.3162771
      },
      {
        name: 'Rogers State University',
        desc: 'University',
        address: '1701 W Will Rogers Blvd, Claremore, OK 74017',
        lon: -95.6361137,
        lat: 36.3186099
      },
      {
        name: 'Lake Claremore',
        lon: -95.5649169,
        lat: 36.3414586
      },
      {
        name: 'Oologah',
        desc: 'Town',
        lon: -95.7083151,
        lat: 36.4470387
      },
      {
        name: 'Verdigris',
        desc: 'Town',
        lon: -95.6910927,
        lat: 36.2348197
      }
    ]
  },

  // -------------------------------------------------------------------------
  // TEMPLATE — copy this block to add a new layer
  // -------------------------------------------------------------------------
  // {
  //   id: 'your-layer',
  //   name: 'Your Layer',
  //   layerType: 'poi',            // or 'zone' | 'path'
  //   color: '#22c55e',
  //   features: [
  //     { name: 'Example point', desc: '...', address: '1 Main St',
  //       bearing: 'N', fov: 90, lon: -95.7, lat: 36.1 },
  //     { name: 'Example zone', desc: '...', polygon: [[-95.7, 36.1], [-95.6, 36.1], [-95.6, 36.2], [-95.7, 36.2]] },
  //     { name: 'Example path', desc: '...', line: [[-95.7, 36.1], [-95.6, 36.1], [-95.6, 36.2]] }
  //   ]
  // }
];