diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-10-09 23:50:51 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-10-09 23:51:36 +0800 |
| commit | de6b5a44549a53adc4d06ef005aa5cab81d5668f (patch) | |
| tree | 53952f5def39210ed36ca4a77a76a91b637257a1 | |
| parent | 7457b4dfdadde0b0e0eb6b13b9239cce48f37c15 (diff) | |
docs: update README
| -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 | ||