aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--README.md129
-rw-r--r--src/dumbymap.mjs3
2 files changed, 119 insertions, 13 deletions
diff --git a/README.md b/README.md
index 4bde800..3296bd5 100644
--- a/README.md
+++ b/README.md
@@ -20,20 +20,124 @@ document.body.append(container)
20markdown2HTML(container, '# Heading\n\n```map\nid: foo\nuse: Maplibre\n```\n') 20markdown2HTML(container, '# Heading\n\n```map\nid: foo\nuse: Maplibre\n```\n')
21 21
22// Gernerate maps from code block 22// Gernerate maps from code block
23generateMaps(container) 23const dumbymap = generateMaps(container)
24``` 24```
25 25
26Browser (CDN): 26Browser (CDN):
27- unpkg: https://unpkg.com/dumbymap@latest/dist/dumbymap.mjs 27- unpkg: https://unpkg.com/dumbymap@latest/dist/dumbymap.mjs
28 28
29## Semantic HTML
30
31Dumbymap adds several features by Semantic HTML:
32
33### Code Block for map
34
35Generated from Element fits CSS Selector `:has(.language-map)`
36
37It generates maps by `textContent` in YAML format, done by [`mapclay`](/outdoorsafetylab/mapclay).
38
39For example:
40~~~markdown
41<!-- Markdown Text -->
42```map
43use: Maplibre
44width: 200px
45```
46
47<!-- HTML -->
48<pre><code class="language-map">use: Maplibre
49width: 200px</code></pre>
50~~~
51
52### DocLink
53
54Generated from anchor element which:
551. With has link for [document fragment](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
562. With title starts from `=>`
573. The following text in title would be treated as CSS selector of target element
58
59It shows leader-line to target element on hover, for example:
60
61```markdown
62<!-- Markdown Text -->
63[link](#TEXT "=>.random-class")
64
65<!-- Anchor Element -->
66<a href="#TEXT" title="=>.random-class">link</a>
67```
68
69Generated from anchor element which:
701. With has link for [document fragment](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
712. With title starts from `=>`
723. The following text of title would be treated as CSS selector of target element
73
74Class name `with-leader-line` and `doclink` would be added to element.
75
76It shows leader-line to target element on hover, for example:
77
78```markdown
79<!-- Markdown Text -->
80[link](#TEXT "=>.random-class")
81
82<!-- Anchor Element -->
83<a href="#TEXT" title="=>.random-class">link</a>
84
85
86<!-- Links above is transfered to this -->
87<a class="with-leader-line doclink" href="#TEXT" title="=>.random-class">link</a>
88```
89
90### GeoLink
91
92Generated from anchor element with [geo URI scheme](https://en.wikipedia.org/wiki/Geo_URI_scheme).
93Class name `with-leader-line` and `geolink` would be added to element.
94
95It show leader-line to coordinates in target map elements, for example:
96
97```markdown
98<!-- markdown text -->
99[Taiwan](geo:24,121)
100
101<!-- anchor element -->
102<a href="geo:24,121" title="Here it is!">Taiwan</a>
103
104
105<!-- Links above is transfered to this -->
106<a class="with-leader-line geolink" href="geo:24,121" title="Here it is!">Taiwan</a>
107```
108
109It changes behaviors by query parameters in link:
1101. If `xy` is specified, GeoLink would use its value instead of value in geo URI scheme
1112. If `id` is specified, GeoLink would only points to map with its value. Can use comma to add multiple id
112
113For example:
114```html
115<!-- The following link points to coordinates [274527,2665529] in map element "map1" and "map2"
116<a href="geo:24,121?xy=274527,2665529&id=map1,map2" title="Here it is!">Taiwan</a>
117```
118
29## Structure 119## Structure
30 120
31After `generateMaps()`, the container has the following structure: 121After `generateMaps()`, the container has the following structure:
32 122
33![structure](./assets/structure_1.jpg) 123![structure](./assets/structure_1.jpg)
34 124
125## Layouts
126
127Dumbymap switch layouts by attribute `data-layout` of container. Most of the features are done by pure CSS.
128
129You can add custom layout by options `layouts`:
130
131```js
132generateMaps(container, {
133 layouts: [
134 "LAYOUT-NAME"
135 ]
136})
137```
138
35 139
36## Depandencies 140## Dependencies
37 141
38- [leader-line](https://anseki.github.io/leader-line/) 142- [leader-line](https://anseki.github.io/leader-line/)
39- [plain-draggable](https://anseki.github.io/plain-draggable/) 143- [plain-draggable](https://anseki.github.io/plain-draggable/)
@@ -42,14 +146,15 @@ After `generateMaps()`, the container has the following structure:
42- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) 146- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor)
43 147
44 148
45## TODOs 149## Motivation
150
151* Respect Semantic HTML
152* User Friendly: The target audience includes Hikers, Outdoor Workers
153* Easy to Extend: Can co-work with various of Modern Map Libraries, no one dominates
154* [Designed to Last](https://jeffhuang.com/designed_to_last/)
155
156## See Also
46 157
47- Semantic HTML 158* [obsidian-map-view](https://github.com/esm7/obsidian-map-view)
48 - context menu for add geolinks 159* [odyssey.js](http://cartodb.github.io/odyssey.js/)
49- Editor 160* [StoryMapJS](https://storymap.knightlab.com/)
50 - Reduce fontawesome resources
51 - Better way to edit table in markdown
52- Export
53 - Executable HTML file with data URI
54- Misc
55 - Add favicon
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 744d216..edc1521 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -11,6 +11,7 @@ import * as utils from './dumbyUtils'
11import * as menuItem from './MenuItem' 11import * as menuItem from './MenuItem'
12import PlainModal from 'plain-modal' 12import PlainModal from 'plain-modal'
13 13
14const mapBlockSelector = 'pre:has(.language-map)'
14const docLinkSelector = 'a[href^="#"][title^="=>"]' 15const docLinkSelector = 'a[href^="#"][title^="=>"]'
15const geoLinkSelector = 'a[href^="geo:"]' 16const geoLinkSelector = 'a[href^="geo:"]'
16 17
@@ -408,7 +409,7 @@ export const generateMaps = (container, { delay, mapCallback }) => {
408 409
409 // Render each code block with "language-map" class 410 // Render each code block with "language-map" class
410 const elementsWithMapConfig = Array.from( 411 const elementsWithMapConfig = Array.from(
411 container.querySelectorAll('pre:has(.language-map)') ?? [] 412 container.querySelectorAll(mapBlockSelector) ?? []
412 ) 413 )
413 /** 414 /**
414 * updateAttributeByStep. 415 * updateAttributeByStep.