diff options
-rw-r--r-- | README.md | 25 |
1 files changed, 18 insertions, 7 deletions
@@ -1,6 +1,6 @@ | |||
1 | # Dumbymap | 1 | # Dumbymap |
2 | 2 | ||
3 | This library generate web maps from Semantic HTML, play around with [demo page](https://outdoorsafetylab.github.io/dumbymap/) | 3 | This library generate web maps from [Semantic HTML], play around with [demo page](https://outdoorsafetylab.github.io/dumbymap/) |
4 | 4 | ||
5 | > [!CAUTION] | 5 | > [!CAUTION] |
6 | > API of DumbyMap is not stable now, use it carefully | 6 | > API of DumbyMap is not stable now, use it carefully |
@@ -32,11 +32,11 @@ Browser (CDN): | |||
32 | 32 | ||
33 | ## Semantic HTML | 33 | ## Semantic HTML |
34 | 34 | ||
35 | Dumbymap adds several features by Semantic HTML: | 35 | Dumbymap adds several features from contents of Semantic HTML: |
36 | 36 | ||
37 | ### Code Block for map | 37 | ### Code Block for map |
38 | 38 | ||
39 | Generated from Element fits CSS Selector `:has(.language-map)` | 39 | Generated from Element fits CSS Selector `:has(.language-map)` (by default) |
40 | 40 | ||
41 | It generates maps by `textContent` in YAML format, done by [mapclay] | 41 | It generates maps by `textContent` in YAML format, done by [mapclay] |
42 | 42 | ||
@@ -103,21 +103,31 @@ It show leader-line to coordinates in target map elements, for example: | |||
103 | [Taiwan](geo:24,121) | 103 | [Taiwan](geo:24,121) |
104 | 104 | ||
105 | <!-- anchor element --> | 105 | <!-- anchor element --> |
106 | <a href="geo:24,121" title="Here it is!">Taiwan</a> | 106 | <a href="geo:24,121">Taiwan</a> |
107 | 107 | ||
108 | 108 | ||
109 | <!-- Links above is transfered to this --> | 109 | <!-- Links above is transfered to this --> |
110 | <a class="with-leader-line geolink" href="geo:24,121" title="Here it is!">Taiwan</a> | 110 | <a class="with-leader-line geolink" href="geo:24,121">Taiwan</a> |
111 | ``` | 111 | ``` |
112 | 112 | ||
113 | It changes behaviors by query parameters in link: | 113 | It changes behaviors by query parameters in link: |
114 | 1. If `xy` is specified, GeoLink would use its value instead of value in geo URI scheme | 114 | 1. If `xy` is specified, GeoLink would use its value instead of value in geo URI scheme |
115 | 2. If `id` is specified, GeoLink would only points to map with its value. Can use comma to add multiple id | 115 | 1. If `id` is specified, GeoLink would only points to map with its value. Can use comma to add multiple id |
116 | 1. If `type` is specified, anchor on map changes appearance (now only support `type=circle`) | ||
116 | 117 | ||
117 | For example: | 118 | For example: |
118 | ```html | 119 | ```html |
119 | <!-- The following link points to coordinates [274527,2665529] in map element "map1" and "map2" | 120 | <!-- The following link points to coordinates [274527,2665529] in map element "map1" and "map2" |
120 | <a href="geo:24,121?xy=274527,2665529&id=map1,map2" title="Here it is!">Taiwan</a> | 121 | <a href="geo:24,121?xy=274527,2665529&id=map1,map2">Taiwan</a> |
122 | ``` | ||
123 | |||
124 | If `title` of element is specified, leader-line use it as label, for example: | ||
125 | ```markdown | ||
126 | <!-- markdown text --> | ||
127 | [Taiwan](geo:24,121 "Here it is!") | ||
128 | |||
129 | <!-- anchor element --> | ||
130 | <a href="geo:24,121" title="Here it is!">Taiwan</a> | ||
121 | ``` | 131 | ``` |
122 | 132 | ||
123 | ## Structure | 133 | ## Structure |
@@ -189,3 +199,4 @@ generateMaps(container, { layouts: "sticky" }) | |||
189 | * [StoryMapJS](https://storymap.knightlab.com/) | 199 | * [StoryMapJS](https://storymap.knightlab.com/) |
190 | 200 | ||
191 | [mapclay]: https://github.com/outdoorsafetylab/mapclay | 201 | [mapclay]: https://github.com/outdoorsafetylab/mapclay |
202 | [Semantic HTML]: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html | ||