photobook-tripmap

Embeddable photography trip map widget. Use AI (Claude, ChatGPT) to plan a trip, paste the JSON output, and get an interactive Leaflet map with sidebar, filters, and KML/CSV export.

Quick Start

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/photobook-tripmap/dist/tripmap.css">
<div id="map" style="width: 100%; height: 100vh;"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/photobook-tripmap/dist/tripmap.umd.js"></script>
<script>
  const widget = new PhotobookTripmap.TripMap(document.getElementById('map'), {
    theme: 'dark',
    showInput: true,
  });
</script>

ES Module

import { TripMap } from 'photobook-tripmap';
import 'photobook-tripmap/dist/tripmap.css';

const widget = new TripMap(document.getElementById('map'), {
  theme: 'dark',
  showInput: true,
});

AI Workflow

1. Copy the system prompt from the package:

   import { systemPrompt } from 'photobook-tripmap';
   console.log(systemPrompt); // paste this into Claude.ai or ChatGPT

2. Ask the AI to plan a photography trip
3. Paste the AI's JSON output into the widget (or call widget.loadTrip(json))

API

new TripMap(element, options?)

| Option | Type | Default | Description | |--------|------|---------|-------------| | theme | 'dark' \| 'light' | 'dark' | Color theme | | showInput | boolean | false | Show JSON paste/upload screen | | onExport | function | — | Callback: (format, content) => void |

Methods

| Method | Returns | Description | |--------|---------|-------------| | loadTrip(json) | — | Load trip data (object or JSON string) | | exportKML() | string | Generate KML for Google Maps | | exportCSV() | string | Generate CSV spreadsheet | | getTrip() | object | Get current trip data | | destroy() | — | Clean up and remove widget |

Standalone Exports

import { validateTrip, generateKML, generateCSV, tripSchema, systemPrompt } from 'photobook-tripmap';

const { valid, errors } = validateTrip(data);
const kml = generateKML(data);
const csv = generateCSV(data);

Peer Dependencies

• Leaflet ^1.9.0 — you provide Leaflet + its CSS

License

MIT