@riebeckite/plugin-map 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/README.md +176 -0
- package/README_ja.md +142 -0
- package/dist/client.d.ts +2 -0
- package/dist/client.js +164 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +628 -0
- package/dist/src/hast.d.ts +7 -0
- package/dist/src/init.d.ts +11 -0
- package/dist/src/options.d.ts +30 -0
- package/dist/src/parse.d.ts +35 -0
- package/dist/src/rehype.d.ts +11 -0
- package/dist/src/types.d.ts +159 -0
- package/package.json +62 -0
- package/style.css +107 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
52
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
53
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
54
|
+
means any form of electronic, verbal, or written communication sent
|
|
55
|
+
to the Licensor or its representatives, including but not limited to
|
|
56
|
+
communication on electronic mailing lists, source code control systems,
|
|
57
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
58
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
59
|
+
excluding communication that is conspicuously marked or otherwise
|
|
60
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
61
|
+
|
|
62
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
63
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
64
|
+
subsequently incorporated within the Work.
|
|
65
|
+
|
|
66
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
67
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
68
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
69
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
70
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
71
|
+
Work and such Derivative Works in Source or Object form.
|
|
72
|
+
|
|
73
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
74
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
75
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
76
|
+
(except as stated in this section) patent license to make, have made,
|
|
77
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
78
|
+
where such license applies only to those patent claims licensable
|
|
79
|
+
by such Contributor that are necessarily infringed by their
|
|
80
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
81
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
82
|
+
institute patent litigation against any entity (including a
|
|
83
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
84
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
85
|
+
or contributory patent infringement, then any patent licenses
|
|
86
|
+
granted to You under this License for that Work shall terminate
|
|
87
|
+
as of the date such litigation is filed.
|
|
88
|
+
|
|
89
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
90
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
91
|
+
modifications, and in Source or Object form, provided that You
|
|
92
|
+
meet the following conditions:
|
|
93
|
+
|
|
94
|
+
(a) You must give any other recipients of the Work or
|
|
95
|
+
Derivative Works a copy of this License; and
|
|
96
|
+
|
|
97
|
+
(b) You must cause any modified files to carry prominent notices
|
|
98
|
+
stating that You changed the files; and
|
|
99
|
+
|
|
100
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
101
|
+
that You distribute, all copyright, patent, trademark, and
|
|
102
|
+
attribution notices from the Source form of the Work,
|
|
103
|
+
excluding those notices that do not pertain to any part of
|
|
104
|
+
the Derivative Works; and
|
|
105
|
+
|
|
106
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
107
|
+
distribution, then any Derivative Works that You distribute must
|
|
108
|
+
include a readable copy of the attribution notices contained
|
|
109
|
+
within such NOTICE file, excluding those notices that do not
|
|
110
|
+
pertain to any part of the Derivative Works, in at least one
|
|
111
|
+
of the following places: within a NOTICE text file distributed
|
|
112
|
+
as part of the Derivative Works; within the Source form or
|
|
113
|
+
documentation, if provided along with the Derivative Works; or,
|
|
114
|
+
within a display generated by the Derivative Works, if and
|
|
115
|
+
wherever such third-party notices normally appear. The contents
|
|
116
|
+
of the NOTICE file are for informational purposes only and
|
|
117
|
+
do not modify the License. You may add Your own attribution
|
|
118
|
+
notices within Derivative Works that You distribute, alongside
|
|
119
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
120
|
+
that such additional attribution notices cannot be construed
|
|
121
|
+
as modifying the License.
|
|
122
|
+
|
|
123
|
+
You may add Your own copyright statement to Your modifications and
|
|
124
|
+
may provide additional or different license terms and conditions
|
|
125
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
126
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
127
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
128
|
+
the conditions stated in this License.
|
|
129
|
+
|
|
130
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
131
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
132
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
133
|
+
this License, without any additional terms or conditions.
|
|
134
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
135
|
+
the terms of any separate license agreement you may have executed
|
|
136
|
+
with Licensor regarding such Contributions.
|
|
137
|
+
|
|
138
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
139
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
140
|
+
except as required for reasonable and customary use in describing the
|
|
141
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
142
|
+
|
|
143
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
144
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
145
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
146
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
147
|
+
implied, including, without limitation, any warranties or conditions
|
|
148
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
149
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
150
|
+
appropriateness of using or redistributing the Work and assume any
|
|
151
|
+
risks associated with Your exercise of permissions under this License.
|
|
152
|
+
|
|
153
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
154
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
155
|
+
unless required by applicable law (such as deliberate and grossly
|
|
156
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
157
|
+
liable to You for damages, including any direct, indirect, special,
|
|
158
|
+
incidental, or consequential damages of any character arising as a
|
|
159
|
+
result of this License or out of the use or inability to use the
|
|
160
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
161
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
162
|
+
other commercial damages or losses), even if such Contributor
|
|
163
|
+
has been advised of the possibility of such damages.
|
|
164
|
+
|
|
165
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
166
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
167
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
168
|
+
or other liability obligations and/or rights consistent with this
|
|
169
|
+
License. However, in accepting such obligations, You may act only
|
|
170
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
171
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
172
|
+
defend, and hold each Contributor harmless for any liability
|
|
173
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
174
|
+
of your accepting any such warranty or additional liability.
|
|
175
|
+
|
|
176
|
+
END OF TERMS AND CONDITIONS
|
|
177
|
+
|
|
178
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
179
|
+
|
|
180
|
+
To apply the Apache License to your work, attach the following
|
|
181
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
182
|
+
replaced with your own identifying information. (Don't include
|
|
183
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
184
|
+
comment syntax for the file format. We also recommend that a
|
|
185
|
+
file or class name and description of purpose be included on the
|
|
186
|
+
same "printed page" as the copyright notice for easier
|
|
187
|
+
identification within third-party archives.
|
|
188
|
+
|
|
189
|
+
Copyright Rerurate_514
|
|
190
|
+
|
|
191
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
192
|
+
you may not use this file except in compliance with the License.
|
|
193
|
+
You may obtain a copy of the License at
|
|
194
|
+
|
|
195
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
196
|
+
|
|
197
|
+
Unless required by applicable law or agreed to in writing, software
|
|
198
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
199
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
200
|
+
See the License for the specific language governing permissions and
|
|
201
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
# @riebeckite/plugin-map
|
|
2
|
+
|
|
3
|
+
Turns a ` ```map ` fenced code block and/or frontmatter coordinates into an
|
|
4
|
+
embedded map. The page is rendered with a static fallback first (coordinates,
|
|
5
|
+
place name, OpenStreetMap links, and an optional static image), and upgraded to
|
|
6
|
+
an interactive Leaflet map in the browser only when a map is present.
|
|
7
|
+
|
|
8
|
+
[日本語](./README_ja.md)
|
|
9
|
+
|
|
10
|
+
## Configure
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
import { defineConfig } from "@riebeckite/core";
|
|
14
|
+
import { map } from "@riebeckite/plugin-map";
|
|
15
|
+
|
|
16
|
+
export default defineConfig({
|
|
17
|
+
// ...
|
|
18
|
+
plugins: [
|
|
19
|
+
map({
|
|
20
|
+
zoom: 13,
|
|
21
|
+
height: 320,
|
|
22
|
+
// Keyless default; see "Tiles and attribution" before changing it.
|
|
23
|
+
tileUrl: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
24
|
+
attribution:
|
|
25
|
+
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
26
|
+
}),
|
|
27
|
+
],
|
|
28
|
+
});
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
The plugin runs with `order: -10`.
|
|
32
|
+
|
|
33
|
+
## Syntax
|
|
34
|
+
|
|
35
|
+
### Fenced code block
|
|
36
|
+
|
|
37
|
+
The block body is a small key/value format. A marker list follows `markers:` as
|
|
38
|
+
bullets, and a bare `lat, lng` line is an implicit marker.
|
|
39
|
+
|
|
40
|
+
````markdown
|
|
41
|
+
```map
|
|
42
|
+
center: 35.6812, 139.7671
|
|
43
|
+
zoom: 13
|
|
44
|
+
label: Tokyo Station
|
|
45
|
+
markers:
|
|
46
|
+
- 35.6812, 139.7671 | Tokyo Station
|
|
47
|
+
- 35.6586, 139.7454 | Tokyo Tower | A lattice tower
|
|
48
|
+
```
|
|
49
|
+
````
|
|
50
|
+
|
|
51
|
+
Marker lines use `lat, lng` or `lat, lng | label | description`. The block
|
|
52
|
+
`title` becomes the caption when present.
|
|
53
|
+
|
|
54
|
+
### Frontmatter
|
|
55
|
+
|
|
56
|
+
Coordinates in frontmatter produce one map at the top of the article. The
|
|
57
|
+
property name defaults to `map` and is configurable with `frontmatterKey`.
|
|
58
|
+
|
|
59
|
+
```yaml
|
|
60
|
+
---
|
|
61
|
+
title: A trip
|
|
62
|
+
map:
|
|
63
|
+
lat: 35.6812
|
|
64
|
+
lng: 139.7671
|
|
65
|
+
zoom: 13
|
|
66
|
+
label: Tokyo Station
|
|
67
|
+
markers:
|
|
68
|
+
- 35.6812, 139.7671 | Tokyo Station
|
|
69
|
+
- lat: 35.6586
|
|
70
|
+
lng: 139.7454
|
|
71
|
+
label: Tokyo Tower
|
|
72
|
+
---
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
`lat`/`lng` also accept `latitude`/`longitude`, `coordinates: [lat, lng]` or
|
|
76
|
+
`coordinates: "lat, lng"`, and `label` also accepts `title`/`place`/`name`.
|
|
77
|
+
|
|
78
|
+
## How it renders
|
|
79
|
+
|
|
80
|
+
A block or frontmatter map becomes a `figure.rr-map`:
|
|
81
|
+
|
|
82
|
+
- `figure.rr-map`: carries `data-rr-map="pending"` and
|
|
83
|
+
`data-rr-map-payload` (the resolved map data as JSON)
|
|
84
|
+
- `div.rr-map__canvas [data-rr-map-canvas]`: the element Leaflet renders into
|
|
85
|
+
- `figcaption.rr-map__caption`: the caption, when present
|
|
86
|
+
- `div.rr-map__static`: the always-available fallback, with
|
|
87
|
+
`p.rr-map__place`, `ul.rr-map__markers` → `a.rr-map__link` (OpenStreetMap
|
|
88
|
+
links), an optional `img.rr-map__image`, and `p.rr-map__attribution`
|
|
89
|
+
- `details.rr-map__fallback`: the raw block source, folded away
|
|
90
|
+
|
|
91
|
+
`initMap` finds every `[data-rr-map="pending"]`, loads Leaflet lazily, draws the
|
|
92
|
+
tile layer and markers, and flips the figure to `data-rr-map="rendered"` (the
|
|
93
|
+
static fallback is then hidden). On failure the figure becomes
|
|
94
|
+
`data-rr-map="error"`, the `details` block opens, and the static fallback stays
|
|
95
|
+
visible.
|
|
96
|
+
|
|
97
|
+
A block with no coordinates and no `center` is left as a normal code block, and
|
|
98
|
+
a diagnostic with `source: "@riebeckite/plugin-map"` is emitted.
|
|
99
|
+
|
|
100
|
+
## Options
|
|
101
|
+
|
|
102
|
+
| Option | Default | Description |
|
|
103
|
+
| --- | --- | --- |
|
|
104
|
+
| `language` | `"map"` | Fenced-code language to recognize |
|
|
105
|
+
| `className` | `"rr-map"` | Base class applied to the figure |
|
|
106
|
+
| `height` | `320` | Map height in pixels |
|
|
107
|
+
| `zoom` | `13` | Default zoom level (0–19) |
|
|
108
|
+
| `minZoom` | `1` | Minimum zoom level |
|
|
109
|
+
| `maxZoom` | `19` | Maximum zoom level |
|
|
110
|
+
| `tileUrl` | OpenStreetMap standard tiles | Tile URL template (`{z}`/`{x}`/`{y}`) |
|
|
111
|
+
| `attribution` | OpenStreetMap attribution | Attribution HTML required by the provider |
|
|
112
|
+
| `fallback` | `true` | Render the `<details>` block with the raw source |
|
|
113
|
+
| `staticFallback` | `true` | Render the static fallback block |
|
|
114
|
+
| `staticImageUrl` | — | Static image URL template (`{lat}`/`{lng}`/`{zoom}`/`{width}`/`{height}`) |
|
|
115
|
+
| `frontmatterKey` | `"map"` | Frontmatter property read for coordinates |
|
|
116
|
+
|
|
117
|
+
## Tiles and attribution
|
|
118
|
+
|
|
119
|
+
The default is the keyless
|
|
120
|
+
[OpenStreetMap standard tile layer](https://tile.openstreetmap.org/). It is fine
|
|
121
|
+
for low-traffic sites, but OpenStreetMap's
|
|
122
|
+
[tile usage policy](https://operations.osmfoundation.org/policies/tiles/)
|
|
123
|
+
expects a valid identifying referrer and forbids bulk or heavy use. Sites with
|
|
124
|
+
meaningful traffic should point `tileUrl` at their own tile server or a
|
|
125
|
+
commercial provider.
|
|
126
|
+
|
|
127
|
+
Attribution is not optional. `attribution` is passed to Leaflet and rendered in
|
|
128
|
+
the static fallback (as plain text). Keep the provider's required credit visible.
|
|
129
|
+
|
|
130
|
+
The plugin ships no API keys or credentials. If a provider's tile or static
|
|
131
|
+
image URL needs a key, that key travels to the browser and is therefore public;
|
|
132
|
+
prefer a keyless server or a proxy that keeps the key server-side. Only the
|
|
133
|
+
tile URL, attribution, and zoom bounds are exposed through `publicConfig`; no
|
|
134
|
+
plugin option is copied there implicitly.
|
|
135
|
+
|
|
136
|
+
## Client rendering
|
|
137
|
+
|
|
138
|
+
Leaflet (`leaflet.js` + `leaflet.css`) is fetched from jsDelivr only when at
|
|
139
|
+
least one `[data-rr-map="pending"]` figure exists. Because the library is loaded
|
|
140
|
+
lazily, pages without maps pay nothing, and pages with maps still show the
|
|
141
|
+
static fallback when JavaScript is disabled or the CDN is unreachable.
|
|
142
|
+
|
|
143
|
+
`initMap(options?)` accepts `tileUrl`, `attribution`, `minZoom`, `maxZoom`,
|
|
144
|
+
`leafletScriptUrl`, `leafletStyleUrl`, and a preloaded `runtime` (used by tests
|
|
145
|
+
to inject a fake Leaflet).
|
|
146
|
+
|
|
147
|
+
## Output hooks
|
|
148
|
+
|
|
149
|
+
- `figure[data-rr-map]`: state (`pending` / `rendered` / `error`)
|
|
150
|
+
- `figure[data-rr-map-payload]`: resolved map data as JSON
|
|
151
|
+
- `[data-rr-map-canvas]`: Leaflet render target
|
|
152
|
+
- `[data-rr-map-static]`: static fallback block
|
|
153
|
+
- `details.rr-map__fallback`: raw block source
|
|
154
|
+
|
|
155
|
+
## Main exports
|
|
156
|
+
|
|
157
|
+
- `map(options?)`: create the plugin (`mapPlugin` is an alias)
|
|
158
|
+
- `initMap`: initialize client-side maps
|
|
159
|
+
- `parseMapSource`: parse a fenced block into `MapData`
|
|
160
|
+
- `normalizeMapInput`: normalize frontmatter into `MapData`
|
|
161
|
+
- `describeMap`, `formatCoordinates`, `openStreetMapUrl`
|
|
162
|
+
- Types: `MapOptions`, `MapData`, `MapMarker`, `MapPayload`, `MapClientOptions`
|
|
163
|
+
|
|
164
|
+
## Limitations
|
|
165
|
+
|
|
166
|
+
- Rendering is client-only. Without JavaScript the page shows the static
|
|
167
|
+
fallback (coordinates, place, OpenStreetMap links, optional image) but no
|
|
168
|
+
interactive map.
|
|
169
|
+
- The first interactive render waits on the CDN for Leaflet and the tiles.
|
|
170
|
+
- The tile provider's terms and attribution are the site owner's responsibility.
|
|
171
|
+
- Leaflet is BSD-2-Clause licensed; the default OpenStreetMap tiles are
|
|
172
|
+
© OpenStreetMap contributors (ODbL).
|
|
173
|
+
|
|
174
|
+
## See also
|
|
175
|
+
|
|
176
|
+
- [Plugin system](../../../docs/en/plugin-system.md)
|
package/README_ja.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# @riebeckite/plugin-map
|
|
2
|
+
|
|
3
|
+
` ```map ` コードブロックや frontmatter の座標を、埋め込み地図に変換するプラグインです。まず静的フォールバック(座標・場所名・OpenStreetMap リンク・任意の静的画像)を描画し、地図があるページだけブラウザ側で Leaflet によるインタラクティブ地図に拡張します。
|
|
4
|
+
|
|
5
|
+
[English](./README.md)
|
|
6
|
+
|
|
7
|
+
## 設定する
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { defineConfig } from "@riebeckite/core";
|
|
11
|
+
import { map } from "@riebeckite/plugin-map";
|
|
12
|
+
|
|
13
|
+
export default defineConfig({
|
|
14
|
+
// ...
|
|
15
|
+
plugins: [
|
|
16
|
+
map({
|
|
17
|
+
zoom: 13,
|
|
18
|
+
height: 320,
|
|
19
|
+
// 既定はキー不要の OpenStreetMap。変更前に「タイルと帰属表示」を参照。
|
|
20
|
+
tileUrl: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
21
|
+
attribution:
|
|
22
|
+
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
23
|
+
}),
|
|
24
|
+
],
|
|
25
|
+
});
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
このプラグインは `order: -10` で実行されます。
|
|
29
|
+
|
|
30
|
+
## 記法
|
|
31
|
+
|
|
32
|
+
### コードブロック
|
|
33
|
+
|
|
34
|
+
ブロック本文は小さな key/value 形式です。`markers:` の後に `-` でマーカーを並べ、`lat, lng` だけの行は暗黙のマーカーになります。
|
|
35
|
+
|
|
36
|
+
````markdown
|
|
37
|
+
```map
|
|
38
|
+
center: 35.6812, 139.7671
|
|
39
|
+
zoom: 13
|
|
40
|
+
label: Tokyo Station
|
|
41
|
+
markers:
|
|
42
|
+
- 35.6812, 139.7671 | Tokyo Station
|
|
43
|
+
- 35.6586, 139.7454 | Tokyo Tower | A lattice tower
|
|
44
|
+
```
|
|
45
|
+
````
|
|
46
|
+
|
|
47
|
+
マーカー行は `lat, lng` または `lat, lng | ラベル | 説明` です。コードブロックの `title` がある場合はキャプションになります。
|
|
48
|
+
|
|
49
|
+
### frontmatter
|
|
50
|
+
|
|
51
|
+
frontmatter の座標は、記事の先頭に 1 つの地図を生成します。プロパティ名は既定で `map` で、`frontmatterKey` で変更できます。
|
|
52
|
+
|
|
53
|
+
```yaml
|
|
54
|
+
---
|
|
55
|
+
title: A trip
|
|
56
|
+
map:
|
|
57
|
+
lat: 35.6812
|
|
58
|
+
lng: 139.7671
|
|
59
|
+
zoom: 13
|
|
60
|
+
label: Tokyo Station
|
|
61
|
+
markers:
|
|
62
|
+
- 35.6812, 139.7671 | Tokyo Station
|
|
63
|
+
- lat: 35.6586
|
|
64
|
+
lng: 139.7454
|
|
65
|
+
label: Tokyo Tower
|
|
66
|
+
---
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
`lat`/`lng` は `latitude`/`longitude`、`coordinates: [lat, lng]` または `coordinates: "lat, lng"` も受け付けます。`label` は `title`/`place`/`name` も使えます。
|
|
70
|
+
|
|
71
|
+
## どのように描画されるか
|
|
72
|
+
|
|
73
|
+
コードブロックまたは frontmatter の地図は `figure.rr-map` になります。
|
|
74
|
+
|
|
75
|
+
- `figure.rr-map`: `data-rr-map="pending"` と `data-rr-map-payload`(解決済みの地図データ JSON)を持ちます
|
|
76
|
+
- `div.rr-map__canvas [data-rr-map-canvas]`: Leaflet が描画する領域
|
|
77
|
+
- `figcaption.rr-map__caption`: キャプション(ある場合)
|
|
78
|
+
- `div.rr-map__static`: 常に利用できるフォールバック。`p.rr-map__place`、`ul.rr-map__markers` → `a.rr-map__link`(OpenStreetMap リンク)、任意の `img.rr-map__image`、`p.rr-map__attribution` を含みます
|
|
79
|
+
- `details.rr-map__fallback`: 元のブロック本文を折りたたんで表示
|
|
80
|
+
|
|
81
|
+
`initMap` は `[data-rr-map="pending"]` を探し、Leaflet を遅延して読み込み、タイルレイヤーとマーカーを描画して `data-rr-map="rendered"` にします(このとき静的フォールバックは非表示になります)。失敗した場合は `data-rr-map="error"` になり、`details` を開き、静的フォールバックは表示されたままです。
|
|
82
|
+
|
|
83
|
+
座標も `center` もないブロックは置き換えず、通常のコードブロックのまま残し、`source: "@riebeckite/plugin-map"` を持つ診断を出します。
|
|
84
|
+
|
|
85
|
+
## オプション
|
|
86
|
+
|
|
87
|
+
| 項目 | 既定値 | 説明 |
|
|
88
|
+
| --- | --- | --- |
|
|
89
|
+
| `language` | `"map"` | 対象にするコードブロックの言語 |
|
|
90
|
+
| `className` | `"rr-map"` | figure に付ける基準クラス |
|
|
91
|
+
| `height` | `320` | 地図の高さ(ピクセル) |
|
|
92
|
+
| `zoom` | `13` | 既定のズームレベル(0〜19) |
|
|
93
|
+
| `minZoom` | `1` | 最小ズームレベル |
|
|
94
|
+
| `maxZoom` | `19` | 最大ズームレベル |
|
|
95
|
+
| `tileUrl` | OpenStreetMap 標準タイル | タイル URL テンプレート(`{z}`/`{x}`/`{y}`) |
|
|
96
|
+
| `attribution` | OpenStreetMap の帰属表示 | プロバイダが要求する帰属表示の HTML |
|
|
97
|
+
| `fallback` | `true` | 元の本文を表示する `details` を描画する |
|
|
98
|
+
| `staticFallback` | `true` | 静的フォールバックのブロックを描画する |
|
|
99
|
+
| `staticImageUrl` | — | 静的画像 URL テンプレート(`{lat}`/`{lng}`/`{zoom}`/`{width}`/`{height}`) |
|
|
100
|
+
| `frontmatterKey` | `"map"` | 座標を読む frontmatter プロパティ |
|
|
101
|
+
|
|
102
|
+
## タイルと帰属表示
|
|
103
|
+
|
|
104
|
+
既定はキー不要の [OpenStreetMap 標準タイル](https://tile.openstreetmap.org/) です。小規模なサイトには十分ですが、OpenStreetMap の[タイル利用ポリシー](https://operations.osmfoundation.org/policies/tiles/)は識別可能な referrer を前提とし、大量アクセスを禁止しています。一定のトラフィックがあるサイトは `tileUrl` を自前のタイルサーバーや商用プロバイダに向けてください。
|
|
105
|
+
|
|
106
|
+
帰属表示は省略できません。`attribution` は Leaflet に渡され、静的フォールバックにも(プレーンテキストで)描画されます。プロバイダが要求するクレジットを常に表示してください。
|
|
107
|
+
|
|
108
|
+
このプラグインは API キーや資格情報を同梱しません。タイル URL や静的画像 URL にキーが必要な場合、そのキーはブラウザへ送られるため公開情報になります。キー不要のサーバーか、キーをサーバー側に保持するプロキシを使ってください。`publicConfig` に公開されるのはタイル URL・帰属表示・ズーム範囲だけで、プラグインのオプションが暗黙にコピーされることはありません。
|
|
109
|
+
|
|
110
|
+
## クライアント側の描画
|
|
111
|
+
|
|
112
|
+
Leaflet(`leaflet.js` と `leaflet.css`)は、`[data-rr-map="pending"]` の figure が 1 つ以上あるときだけ jsDelivr から取得します。ライブラリを遅延して読み込むため、地図のないページは何も負担せず、地図のあるページも JavaScript を無効にしていたり CDN に到達できなかったりする場合は静的フォールバックが表示されます。
|
|
113
|
+
|
|
114
|
+
`initMap(options?)` は `tileUrl`、`attribution`、`minZoom`、`maxZoom`、`leafletScriptUrl`、`leafletStyleUrl`、および事前読み込み済みの `runtime`(テストで偽の Leaflet を注入する用途)を受け取ります。
|
|
115
|
+
|
|
116
|
+
## 出力のフック
|
|
117
|
+
|
|
118
|
+
- `figure[data-rr-map]`: 状態(`pending` / `rendered` / `error`)
|
|
119
|
+
- `figure[data-rr-map-payload]`: 解決済みの地図データ JSON
|
|
120
|
+
- `[data-rr-map-canvas]`: Leaflet の描画先
|
|
121
|
+
- `[data-rr-map-static]`: 静的フォールバックのブロック
|
|
122
|
+
- `details.rr-map__fallback`: 元のブロック本文
|
|
123
|
+
|
|
124
|
+
## 主なエクスポート
|
|
125
|
+
|
|
126
|
+
- `map(options?)`: プラグインを作成する(`mapPlugin` は別名)
|
|
127
|
+
- `initMap`: クライアント側の地図を初期化する
|
|
128
|
+
- `parseMapSource`: コードブロックを `MapData` に変換する
|
|
129
|
+
- `normalizeMapInput`: frontmatter を `MapData` に正規化する
|
|
130
|
+
- `describeMap`、`formatCoordinates`、`openStreetMapUrl`
|
|
131
|
+
- 型: `MapOptions`、`MapData`、`MapMarker`、`MapPayload`、`MapClientOptions`
|
|
132
|
+
|
|
133
|
+
## 制限
|
|
134
|
+
|
|
135
|
+
- 描画はクライアント側のみです。JavaScript が無効な環境では、静的フォールバック(座標・場所・OpenStreetMap リンク・任意の画像)は表示されますが、インタラクティブな地図は表示されません
|
|
136
|
+
- 最初の描画は Leaflet とタイルの CDN 取得を待ちます
|
|
137
|
+
- タイルプロバイダの利用規約と帰属表示はサイト運営者の責任です
|
|
138
|
+
- Leaflet は BSD-2-Clause、既定の OpenStreetMap タイルは © OpenStreetMap contributors(ODbL)です
|
|
139
|
+
|
|
140
|
+
## 関連資料
|
|
141
|
+
|
|
142
|
+
- [プラグインシステム](../../../docs/ja/plugin-system.md)
|
package/dist/client.d.ts
ADDED