This repository contains the source code for the application presenting the results of the fall 2023 Project NL design-research project of the Berlage Center for Advanced Studies in Architecture and Urban Design of TU Delft.
The application showcases the possiblities of IIIF and Allmaps. See also this repository outlining the introductory workshop in the beginning of the semester.
The following file structure is used for the content (general introduction and individual projects):
- contents
- overview
- about
- about.md # Markdown file containg a general introduction to the app
- annotations # Folder containing georeferencing annotations shown on overview page
- annotation.json
- geojsons # Folder containing vectors loaded on overview page
- locations.geojson # Sheet index used to navigate the projects
- projects
- [project-slug] # Each project has a dedicated folder. Use no spaces or caps for folder name
- annotations # Folder containing georeferencing annotations for project
- annotation.json
- geojsons # Folder containing vectors for project (optional)
- vector.geojson
- slides # Folder with a collection of markdown files used for the slides
- 01.md
- 02.md
Markdown with YAML frontmatter
Markdown is a markup language to add formatting to plain text. See this guide for more information. Each markdown file starts with a metadata block (also called frontmatter) in the YAML format, set between ---
. YAML is a 'human friendly' format to store data, here's a tutorial.
Each slide contains the following frontmatter:
meta: # Slide metadata
heading: Subtitle # Slide heading
viewer: # Viewer settings
bbox: [4.651103, 51.78665, 4.768242, 51.832353] # Viewer bounding box as can be exported from Placemark (Export > BBOX)
rotation: 180 # Degrees
xyz:
url: https://tile.openstreetmap.org/{z}/{x}/{y}.png # XZY url
label: OpenStreetMap # Label for layer
geojson:
- filename: vector-01.geojson # Filename of geojson in the project's geojsons/ folder
label: Building outline # Optional label for vector
allmaps: # List of maps
- label: Map # Label for map
attribution: # Optional attribution
name: Regionaal Archief Dordrecht
url: https://www.regionaalarchiefdordrecht.nl
annotation: annotation-01.json # Georef annotation filename in the project's annotations/ folder
opacity: 100 # 0-100
removeBackground:
color: '#f0dbbc' # Hex color code
threshold: 20 # 0-100
hardness: 20 # 0-100
colorize: '#8c00ff' # Hex color code
GeoJSON
JSON format to store geographic information. It can be exported from Placemark.
Georeferencing Annotations
JSON web annotation used by Allmaps to store the mask and control points of georeferenced maps available with IIIF.
This app uses SvelteKit.
Requirements:
- Node v18.12.1
For development using pnpm
:
pnpm i
to install dependencies
pnpm run dev
to start development server.
Production build:
pnpm run build