DumbyMap – Feature Examples

Each example demonstrates one aspect of src/dumbymap.mjs.

  1. Basic Map Rendering

    Render maps from YAML code blocks using MapLibre, OpenLayers, and Leaflet backends.

  2. GeoLinks

    Auto-detect plain-text coordinates and create clickable geo: links; manual anchor syntax; leader-line hover.

  3. DocLinks

    Link document fragments with leader lines; choose path styles (magnet, straight, grid, fluid).

  4. Layout System

    Switch between Normal, Side-by-Side (draggable splitter), Overlay (floating blocks), and Sticky (floating panel) layouts.

  5. Markers

    Use 25+ predefined marker icons via the type URL parameter or context-menu picker.

  6. Multiple Maps & Navigation

    Manage multiple maps on one page; focus/navigation shortcuts (Tab, N, P, X); target-specific GeoLinks.

  7. Coordinate Reference Systems

    Accept coordinates in projections other than WGS 84 via data-crs; copy coordinates from the map.

  8. Geocoding

    Select text, right-click, and search Nominatim; preview results with animated map flyover.

  9. Drag-to-create GeoLinks

    Hold-drag selected text onto a map to interactively create a GeoLink with a placed marker.

  10. generateMaps() from Semantic HTML

    Use only generateMaps() on hand-written semantic HTML — no markdown2dumbyBlock() required.

  11. Auto Blocks from Plain HTML

    Call only generateMaps() on plain HTML with no manual .dumby-block wrappers; blocks are auto-created from <h1>–<h3> heading boundaries.

  12. Minimal Setup (pure Markdown file)

    Write plain Markdown directly in an HTML file with a single <script src="dumbymap.mjs"> — no boilerplate needed; auto-init detects the empty script body and initialises everything.

Development