hermes-explorigin
347e9b2a0a
- scripts/custom-layers.mjs: hand-authored, self-documenting config for custom zones (polygons) and points of interest, shipped with example Tulsa POIs and district zones plus a copy-paste template - osm-data.mjs: merges custom layers into static/data/custom/<id>.geojson and includes them in the _index.json manifest with category, layerType, and color metadata - MapView.svelte: renders each manifest entry as an independent toggleable Leaflet layer with per-layer styling and an on-map legend panel - +page.svelte: loads all data sources (OSM + custom) from the manifest
93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
/**
|
|
* Custom Layers Configuration
|
|
* ===========================
|
|
* Define your own map layers here — **zones** (polygons/areas) and
|
|
* **points of interest** (POIs). 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 'zone' or 'poi'
|
|
* - color hex color used for the marker/fill
|
|
* - features array of feature objects (see below)
|
|
*
|
|
* Feature format (by layerType):
|
|
* POI (point):
|
|
* { name: 'Label', desc: 'optional description', lon: -95.7, lat: 36.1 }
|
|
*
|
|
* Zone (polygon — list the corner points; it is closed automatically):
|
|
* { name: 'Label', desc: '...', polygon: [[lon,lat], [lon,lat], ...] }
|
|
*
|
|
* Coordinates are [longitude, latitude] (lon first, like GeoJSON).
|
|
*/
|
|
|
|
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', lon: -95.9966, lat: 36.1498 },
|
|
{ name: 'Philbrook Museum', desc: 'Art museum & gardens', lon: -95.9747, lat: 36.1258 },
|
|
{ name: 'Gathering Place', desc: 'Riverside park', lon: -95.9791, lat: 36.1098 },
|
|
{ name: 'Woodward Park', desc: 'Rose garden', 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]
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
// -------------------------------------------------------------------------
|
|
// TEMPLATE — copy this block to add a new layer
|
|
// -------------------------------------------------------------------------
|
|
// {
|
|
// id: 'your-layer',
|
|
// name: 'Your Layer',
|
|
// layerType: 'poi', // or 'zone'
|
|
// color: '#22c55e',
|
|
// features: [
|
|
// { name: 'Example point', desc: '...', 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]] }
|
|
// ]
|
|
// }
|
|
];
|