maplibre-versatiles-styler 1.0.0
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 +24 -0
- package/README.md +78 -0
- package/dist/maplibre-versatiles-styler.d.ts +41 -0
- package/dist/maplibre-versatiles-styler.js +6894 -0
- package/dist/maplibre-versatiles-styler.js.map +1 -0
- package/dist/maplibre-versatiles-styler.umd.cjs +2 -0
- package/dist/maplibre-versatiles-styler.umd.cjs.map +1 -0
- package/package.json +63 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
This is free and unencumbered software released into the public domain.
|
|
2
|
+
|
|
3
|
+
Anyone is free to copy, modify, publish, use, compile, sell, or
|
|
4
|
+
distribute this software, either in source code form or as a compiled
|
|
5
|
+
binary, for any purpose, commercial or non-commercial, and by any
|
|
6
|
+
means.
|
|
7
|
+
|
|
8
|
+
In jurisdictions that recognize copyright laws, the author or authors
|
|
9
|
+
of this software dedicate any and all copyright interest in the
|
|
10
|
+
software to the public domain. We make this dedication for the benefit
|
|
11
|
+
of the public at large and to the detriment of our heirs and
|
|
12
|
+
successors. We intend this dedication to be an overt act of
|
|
13
|
+
relinquishment in perpetuity of all present and future rights to this
|
|
14
|
+
software under copyright law.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
19
|
+
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
|
20
|
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
|
21
|
+
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
|
22
|
+
OTHER DEALINGS IN THE SOFTWARE.
|
|
23
|
+
|
|
24
|
+
For more information, please refer to <https://unlicense.org>
|
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# MapLibre VersaTiles Styler
|
|
2
|
+
[](https://codecov.io/gh/versatiles-org/maplibre-versatiles-styler)
|
|
3
|
+
|
|
4
|
+
A lightweight MapLibre GL JS control that allows users to explore and modify **VersaTiles map styles** directly inside the map.
|
|
5
|
+
It provides a sidebar with editable color palettes, recoloring tools, and style options such as language selection.
|
|
6
|
+
Perfect for data journalism, demos, prototyping, or interactive style exploration.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- ๐ง **Interactive styling UI** directly inside MapLibre
|
|
13
|
+
- ๐จ Edit colors, recoloring rules, and style options
|
|
14
|
+
- ๐ Switch between all available `@versatiles/style` style presets
|
|
15
|
+
- ๐งฉ Works as a standard MapLibre control (`map.addControl`)
|
|
16
|
+
- ๐ฆ Zero dependencies outside MapLibre & VersaTiles Style
|
|
17
|
+
- ๐งช Fully tested (Vitest + jsdom)
|
|
18
|
+
- ๐ Written in TypeScript, bundled with Rollup
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
Include MapLibre GL JS, the VersaTiles Styler bundle, and the CSS in your HTML page.
|
|
25
|
+
|
|
26
|
+
### 1. Load scripts and CSS in HTML
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<!DOCTYPE html>
|
|
30
|
+
<html>
|
|
31
|
+
<head>
|
|
32
|
+
<meta charset="utf-8" />
|
|
33
|
+
<title>MapLibre VersaTiles Styler Demo</title>
|
|
34
|
+
|
|
35
|
+
<!-- MapLibre -->
|
|
36
|
+
<link href="https://tiles.versatiles.org/assets/lib/maplibre-gl/maplibre-gl.css" rel="stylesheet" />
|
|
37
|
+
<script defer src="https://tiles.versatiles.org/assets/lib/maplibre-gl/maplibre-gl.js"></script>
|
|
38
|
+
|
|
39
|
+
<!-- VersaTiles Styler -->
|
|
40
|
+
<script defer src="./maplibre-versatiles-styler.js"></script>
|
|
41
|
+
|
|
42
|
+
<style>
|
|
43
|
+
body, html {
|
|
44
|
+
margin: 0;
|
|
45
|
+
padding: 0;
|
|
46
|
+
height: 100%;
|
|
47
|
+
}
|
|
48
|
+
#map {
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
</head>
|
|
54
|
+
|
|
55
|
+
<body>
|
|
56
|
+
<div id="map"></div>
|
|
57
|
+
|
|
58
|
+
<script defer>
|
|
59
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
60
|
+
const map = new maplibregl.Map({
|
|
61
|
+
container: "map",
|
|
62
|
+
center: [13.4, 52.5],
|
|
63
|
+
zoom: 10,
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
map.addControl(
|
|
67
|
+
new VersaTilesStylerControl({ open: true }),
|
|
68
|
+
"top-right"
|
|
69
|
+
);
|
|
70
|
+
});
|
|
71
|
+
</script>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Notes
|
|
77
|
+
|
|
78
|
+
- When using the UMD build in `<script>` tags, the control is available as the global variable `VersaTilesStylerControl`.
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ControlPosition } from 'maplibre-gl';
|
|
2
|
+
import { IControl } from 'maplibre-gl';
|
|
3
|
+
import { Map as Map_2 } from 'maplibre-gl';
|
|
4
|
+
|
|
5
|
+
export declare interface VersaTilesStylerConfig {
|
|
6
|
+
origin?: string;
|
|
7
|
+
open?: boolean;
|
|
8
|
+
hash?: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* styleControl is a custom control for MapLibre GL JS maps that allows users to switch between different map styles.
|
|
13
|
+
*/
|
|
14
|
+
declare class VersaTilesStylerControl implements IControl {
|
|
15
|
+
readonly config: VersaTilesStylerConfig;
|
|
16
|
+
map?: Map_2;
|
|
17
|
+
private component?;
|
|
18
|
+
/**
|
|
19
|
+
* Initializes a new instance of the styleControl.
|
|
20
|
+
* @param {Object} config Configuration options for the control.
|
|
21
|
+
*/
|
|
22
|
+
constructor(config?: VersaTilesStylerConfig);
|
|
23
|
+
/**
|
|
24
|
+
* Returns the default position for the control on the map.
|
|
25
|
+
* @returns {string} The default position.
|
|
26
|
+
*/
|
|
27
|
+
getDefaultPosition(): ControlPosition;
|
|
28
|
+
/**
|
|
29
|
+
* Called when the control is added to the map.
|
|
30
|
+
* @param {Map} map The MapLibre GL JS map instance.
|
|
31
|
+
* @returns {HTMLElement} The element containing the control.
|
|
32
|
+
*/
|
|
33
|
+
onAdd(map: Map_2): HTMLDivElement;
|
|
34
|
+
/**
|
|
35
|
+
* Called when the control is removed from the map.
|
|
36
|
+
*/
|
|
37
|
+
onRemove(): void;
|
|
38
|
+
}
|
|
39
|
+
export default VersaTilesStylerControl;
|
|
40
|
+
|
|
41
|
+
export { }
|