Overview
The editor developed here is a web-based tool for recording and managing arbitrary coordinates on IIIF-compatible high-resolution images. It is designed as a general-purpose coordinate recording tool that can specify images via URL parameters and can be used in various research projects.
Key Technology Stack
- OpenSeadragon: IIIF image viewer library (v4.1)
- SVG overlay: For marker display
- localStorage: Data persistence
- Vanilla JavaScript: Framework-free implementation
Technical Features
1. Image Specification via URL Parameters
The tool’s main feature is the ability to specify any IIIF image via URL parameters:
Usage example:
Simply pass a URL-encoded image URL via the ?u= parameter to open any image.
2. Data Separation Per Image URL
By including the image URL in the localStorage key, independent data is managed for each image:
By Base64-encoding the image URL as part of the key, multiple image projects can be managed simultaneously.
3. Automatic IIIF Image Loading
Automatically generates the IIIF info.json URL from the image URL:
Automatically handles extensions like .tif and .jpg, requesting info.json compliant with IIIF Image API 2.0.
4. Coordinate Transformation System
OpenSeadragon uses three coordinate systems:
- Pixel coordinates: Display position in the browser
- Viewport coordinates: Normalized coordinates (0 to 1)
- Image coordinates: Actual image pixel coordinates
This tool performs the conversion as follows:
5. Dynamic Marker Display with SVG Overlay
Implements markers that follow zoom and pan operations:
Auto-updates on viewport change events:
6. Auto-Navigation Feature
To maximize user work efficiency, the tool predicts the next intersection position and automatically moves the view.
Basic Algorithm
Distance Change Detection and Warning
When an abnormal movement distance is detected, the user is asked for confirmation:
This enables detection of user misclicks or pattern changes.
7. Data Persistence and Backup
Auto-save via localStorage
Auto-save is performed in an independent data space tied to each image URL.
Export Features
CSV format:
0
JSON format:
1
The JSON export also includes the image URL, allowing you to verify which image the data belongs to later.
8. Switching Between Edit and View Modes
2
In view mode, adding and editing notes is still possible, but adding new points or deleting is disabled.
9. Point Move Feature
For when reordering is needed:
3
10. Keyboard Shortcuts
- Delete: Delete the selected point
- Up/Down arrows: Navigate between points
4
User Interface Design
Responsive Layout
5
The viewer and sidebar are placed with fixed height, achieving a scrollable list area.
Visual Feedback
- Normal point: Red circle marker + number label
- Predicted point: Blue dashed circle + crosshair
- Selected: Green background
- Move mode: Orange background
Performance Optimization
1. Marker Update Optimization
When the viewport changes, all markers are recalculated, but the DOM is not regenerated – only the transform attribute is updated:
6
2. Event Delegation
Instead of setting event listeners on individual markers, clicks are handled at the parent element:
7
Data Format
Internal Data Structure
8
localStorage Format
9
Usage Examples
Basic Workflow
- Specify image via URL parameter (or use the default image)
0 2. Saved data is automatically loaded when the page opens 3. Click on coordinates on the image to record them 4. Automatically navigate to the next predicted position 5. Add notes as needed 6. Export in CSV/JSON format
Managing Multiple Image Projects
When working on multiple projects with different images in parallel:
- Create dedicated URL bookmarks for each image
- Each image’s data is saved independently in localStorage
- No worry about data mixing between images
- JSON export includes the image URL
Processing Large Amounts of Data
When recording hundreds to thousands of coordinates:
- Enable auto-navigation for efficiency
- Periodically back up in JSON format
- Use the move feature to correct ordering if there are errors
- After completion, export in CSV format for analysis
Security Considerations
XSS Protection
Memo input values are escaped during CSV export:
1
Data Validation
Structure is validated during JSON import (maintaining compatibility with old formats):
2
Future Improvements
- Undo/Redo feature: Implementing operation history
- Export format expansion: Support for GeoJSON, Allmaps formats
- Collaborative editing: Real-time sharing via WebSocket
- Precision improvement: Sub-pixel precision coordinate recording
- AI assist: Automatic intersection detection
Summary
This tool combines flexible image specification via URL parameters, data separation per image, IIIF image display capabilities, and auto-navigation to achieve a general-purpose system for efficiently recording large amounts of coordinate data.
References
Created: October 2025 Version: 1.0