@openhistoricalmap/map-styles 0.9.11 → 0.9.13
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/README.md +3 -3
- package/dist/historical/historical.json +1384 -751
- package/dist/japanese_scroll/japanese_scroll.json +88 -106
- package/dist/ohm.styles.js +1806 -1318
- package/dist/railway/railway.json +365 -474
- package/dist/woodblock/woodblock.json +93 -111
- package/historical/historical.json +721 -518
- package/index.css +53 -0
- package/index.html +103 -5
- package/japanese_scroll/japanese_scroll.json +82 -82
- package/package.json +6 -6
- package/railway/railway.json +316 -311
- package/woodblock/woodblock.json +89 -91
package/index.css
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
#map {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height:100%
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
#popup {
|
|
7
|
+
position: absolute;
|
|
8
|
+
display: none;
|
|
9
|
+
background: #fff;
|
|
10
|
+
padding: 10px;
|
|
11
|
+
border-radius: 6px;
|
|
12
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
|
|
13
|
+
z-index: 10;
|
|
14
|
+
max-width: 420px;
|
|
15
|
+
font-family: monospace;
|
|
16
|
+
font-size: 12px
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
pre {
|
|
20
|
+
background: #f6f6f6;
|
|
21
|
+
padding: 6px;
|
|
22
|
+
border-radius: 4px;
|
|
23
|
+
overflow: auto;
|
|
24
|
+
max-height: 140px
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.copy-btn {
|
|
28
|
+
margin-left: 8px;
|
|
29
|
+
border: 0;
|
|
30
|
+
background: #eee;
|
|
31
|
+
padding: 2px 6px;
|
|
32
|
+
border-radius: 4px;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
font-size: 12px
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.layer-title {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
margin-bottom: 6px
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.layer-left {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 8px
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
button.close {
|
|
52
|
+
margin-top: 8px
|
|
53
|
+
}
|
package/index.html
CHANGED
|
@@ -2,9 +2,17 @@
|
|
|
2
2
|
<head>
|
|
3
3
|
<script src="./node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
|
|
4
4
|
<link href="./node_modules/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
|
5
|
+
<link href="./index.css" rel="stylesheet" />
|
|
5
6
|
</head>
|
|
6
7
|
<body>
|
|
7
|
-
<div id="map"
|
|
8
|
+
<div id="map"></div>
|
|
9
|
+
<div id="popup">
|
|
10
|
+
<div><strong>Style:</strong> <span id="s-name"></span></div>
|
|
11
|
+
<div><strong>Style URL:</strong> <span id="s-url"></span></div>
|
|
12
|
+
<hr/>
|
|
13
|
+
<div id="layers"></div>
|
|
14
|
+
<button id="close" class="close">Close</button>
|
|
15
|
+
</div>
|
|
8
16
|
|
|
9
17
|
<script type="module">
|
|
10
18
|
import StyleFlipperControl from "./node_modules/maplibre-gl-style-flipper/index.js";
|
|
@@ -31,7 +39,7 @@
|
|
|
31
39
|
},
|
|
32
40
|
};
|
|
33
41
|
|
|
34
|
-
|
|
42
|
+
let map = new maplibregl.Map({
|
|
35
43
|
container: 'map',
|
|
36
44
|
style: mapStyles["historical"].url,
|
|
37
45
|
center: [-74.033, 40.6259],
|
|
@@ -40,13 +48,103 @@
|
|
|
40
48
|
})
|
|
41
49
|
|
|
42
50
|
// Create an instance of StyleFlipperControl
|
|
43
|
-
const
|
|
51
|
+
const flipper = new StyleFlipperControl(mapStyles);
|
|
44
52
|
|
|
45
53
|
// Set the initial style code
|
|
46
|
-
|
|
54
|
+
flipper.setCurrentStyleCode("historical");
|
|
47
55
|
|
|
48
56
|
// Add the control to the map
|
|
49
|
-
map.addControl(
|
|
57
|
+
map.addControl(flipper, "bottom-right");
|
|
58
|
+
|
|
59
|
+
const
|
|
60
|
+
p = document.getElementById("popup"),
|
|
61
|
+
sName = document.getElementById("s-name"),
|
|
62
|
+
sUrl = document.getElementById("s-url"),
|
|
63
|
+
layersEl = document.getElementById("layers"),
|
|
64
|
+
closeBtn = document.getElementById("close")
|
|
65
|
+
;
|
|
66
|
+
|
|
67
|
+
map.on("load", () => {
|
|
68
|
+
map.on("click", (e) => {
|
|
69
|
+
e.originalEvent.stopPropagation();
|
|
70
|
+
const cur = flipper.currentStyleCode || "historical";
|
|
71
|
+
sName.textContent = cur;
|
|
72
|
+
sUrl.textContent = mapStyles[cur].url || "";
|
|
73
|
+
|
|
74
|
+
layersEl.innerHTML = "";
|
|
75
|
+
const tol = 2;
|
|
76
|
+
const bbox = [[e.point.x - tol, e.point.y - tol], [e.point.x + tol, e.point.y + tol]];
|
|
77
|
+
const features = map.queryRenderedFeatures(bbox);
|
|
78
|
+
|
|
79
|
+
if (!features || features.length === 0) {
|
|
80
|
+
layersEl.textContent = "No rendered features at this point.";
|
|
81
|
+
} else {
|
|
82
|
+
const byLayer = {};
|
|
83
|
+
features.forEach(f => {
|
|
84
|
+
const id = (f.layer && f.layer.id) ? f.layer.id : "(no-layer)";
|
|
85
|
+
(byLayer[id] || (byLayer[id] = [])).push(f);
|
|
86
|
+
});
|
|
87
|
+
for (const lid of Object.keys(byLayer)) {
|
|
88
|
+
const wrapper = document.createElement("div");
|
|
89
|
+
const title = document.createElement("div");
|
|
90
|
+
title.className = "layer-title";
|
|
91
|
+
|
|
92
|
+
const left = document.createElement("div");
|
|
93
|
+
left.className = "layer-left";
|
|
94
|
+
const nameSpan = document.createElement("span");
|
|
95
|
+
nameSpan.textContent = `${lid} — ${byLayer[lid].length} feature(s)`;
|
|
96
|
+
left.appendChild(nameSpan);
|
|
97
|
+
|
|
98
|
+
const copyBtn = document.createElement("button");
|
|
99
|
+
copyBtn.className = "copy-btn";
|
|
100
|
+
copyBtn.type = "button";
|
|
101
|
+
copyBtn.innerText = "📋";
|
|
102
|
+
copyBtn.title = "Copy layer id";
|
|
103
|
+
copyBtn.dataset.layer = lid;
|
|
104
|
+
|
|
105
|
+
// copy handler
|
|
106
|
+
copyBtn.addEventListener("click", async (ev) => {
|
|
107
|
+
ev.stopPropagation(); // avoid closing popup
|
|
108
|
+
try {
|
|
109
|
+
await navigator.clipboard.writeText(lid);
|
|
110
|
+
const prev = copyBtn.innerText;
|
|
111
|
+
copyBtn.innerText = "Copied!";
|
|
112
|
+
setTimeout(() => copyBtn.innerText = prev, 1200);
|
|
113
|
+
} catch (err) {
|
|
114
|
+
copyBtn.innerText = "Err";
|
|
115
|
+
setTimeout(() => copyBtn.innerText = "📋", 1200);
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
left.appendChild(copyBtn);
|
|
120
|
+
title.appendChild(left);
|
|
121
|
+
|
|
122
|
+
// append features props (only properties) below
|
|
123
|
+
const propsDiv = document.createElement("div");
|
|
124
|
+
byLayer[lid].forEach((feat, i) => {
|
|
125
|
+
const pre = document.createElement("pre");
|
|
126
|
+
pre.textContent = `feature ${i} id:${feat.id ?? "n/a"}\n` + JSON.stringify(feat.properties || {}, null, 2);
|
|
127
|
+
propsDiv.appendChild(pre);
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
title.style.marginBottom = "6px";
|
|
131
|
+
wrapper.appendChild(title);
|
|
132
|
+
wrapper.appendChild(propsDiv);
|
|
133
|
+
layersEl.appendChild(wrapper);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
p.style.left = (e.originalEvent.clientX + 10) + "px";
|
|
138
|
+
p.style.top = (e.originalEvent.clientY + 10) + "px";
|
|
139
|
+
p.style.display = "block";
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
// close handling: ignore clicks inside popup
|
|
144
|
+
document.addEventListener("click", (ev) => {
|
|
145
|
+
if (!p.contains(ev.target)) p.style.display = "none";
|
|
146
|
+
});
|
|
147
|
+
closeBtn.addEventListener("click", () => p.style.display = "none");
|
|
50
148
|
|
|
51
149
|
</script>
|
|
52
150
|
|