@ogis/waymark-js 3.0.3 → 3.0.4
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/package.json +1 -1
- package/readme.md +2 -0
- package/dist/index.html +0 -78
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -7,6 +7,8 @@ Adding _meaning_ to GeoJSON.
|
|
|
7
7
|
|
|
8
8
|
Waymark JS is a JavaScript library for rendering GeoJSON data on a [OpenStreetMap](https://www.openstreetmap.org/) vector basemap.
|
|
9
9
|
|
|
10
|
+
**[View the Demo](https://opengis.github.io/Waymark-JS/)**
|
|
11
|
+
|
|
10
12
|
Built on the shoulders of giants:
|
|
11
13
|
|
|
12
14
|
- [MapLibre GL JS](https://maplibre.org/) for map rendering
|
package/dist/index.html
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
|
|
6
|
-
<link
|
|
7
|
-
rel="icon"
|
|
8
|
-
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 368 368'%3E%3Cg transform='translate(0,368) scale(0.1,-0.1)'%0Afill='%23b42714'%3E%3Cpath d='M343 3186 c-89 -29 -178 -108 -215 -194 -80 -181 21 -408 208 -468%0Al51 -17 238 -781 c131 -430 241 -787 243 -793 3 -10 -21 -13 -99 -14 -57 0%0A-126 -4 -152 -7 l-48 -7 298 -217 c163 -119 299 -216 300 -214 6 6 252 690%0A249 693 -1 2 -59 -33 -129 -77 -70 -43 -128 -76 -130 -72 -2 4 -111 359 -242%0A790 l-239 782 32 33 c17 17 43 59 59 92 23 50 27 74 28 140 0 71 -4 88 -33%0A147 -37 75 -96 133 -170 169 -58 28 -186 36 -249 15z'/%3E%3Cpath d='M1580 2987 l-294 -212 64 -6 c36 -4 105 -7 153 -8 87 -1 88 -1 81%0A-23 -3 -13 -74 -236 -156 -496 l-150 -473 55 -199 c30 -110 62 -206 70 -215%0A19 -18 41 -19 54 -2 5 6 101 303 214 659 112 356 207 648 210 648 3 0 57 -33%0A120 -73 63 -40 120 -76 126 -81 7 -4 -17 78 -53 181 -36 103 -91 261 -122 351%0A-31 89 -61 162 -67 161 -5 0 -143 -96 -305 -212z'/%3E%3Cpath d='M3040 2987 l-294 -212 64 -6 c36 -4 105 -7 153 -8 87 -1 88 -1 81%0A-23 -3 -13 -74 -236 -156 -496 l-150 -473 55 -199 c30 -110 62 -206 70 -215%0A19 -18 41 -19 54 -2 5 6 101 303 214 659 112 356 207 648 210 648 3 0 57 -33%0A120 -73 63 -40 120 -76 126 -81 7 -4 -17 78 -53 181 -36 103 -91 261 -122 351%0A-31 89 -61 162 -67 161 -5 0 -143 -96 -305 -212z'/%3E%3Cpath d='M2161 2342 c-14 -11 -40 -80 -81 -207 -33 -104 -60 -197 -60 -205 0%0A-8 61 -235 135 -504 74 -270 135 -491 135 -493 0 -1 -68 -4 -152 -5 l-152 -3%0A284 -219 c157 -121 290 -223 295 -227 7 -5 58 113 144 332 73 187 131 342 129%0A344 -2 3 -61 -29 -130 -69 l-126 -73 -47 166 c-25 91 -108 390 -183 664 -94%0A338 -143 502 -154 508 -11 6 -23 3 -37 -9z'/%3E%3C/g%3E%3C/svg%3E%0A"
|
|
9
|
-
/>
|
|
10
|
-
<meta
|
|
11
|
-
name="viewport"
|
|
12
|
-
content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"
|
|
13
|
-
/>
|
|
14
|
-
|
|
15
|
-
<title>Waymark JS v3 Demo</title>
|
|
16
|
-
|
|
17
|
-
<style>
|
|
18
|
-
body,
|
|
19
|
-
html {
|
|
20
|
-
height: 100%;
|
|
21
|
-
margin: 0;
|
|
22
|
-
padding: 0;
|
|
23
|
-
}
|
|
24
|
-
.waymark-instance {
|
|
25
|
-
height: 100%;
|
|
26
|
-
width: 100%;
|
|
27
|
-
}
|
|
28
|
-
</style>
|
|
29
|
-
|
|
30
|
-
<link rel="stylesheet" href="./waymark-js.css" />
|
|
31
|
-
</head>
|
|
32
|
-
<body>
|
|
33
|
-
<!-- Load Waymark JS -->
|
|
34
|
-
<script type="module">
|
|
35
|
-
import {
|
|
36
|
-
createInstance,
|
|
37
|
-
createLine,
|
|
38
|
-
createMarker,
|
|
39
|
-
createMap,
|
|
40
|
-
} from "./waymark-js.js";
|
|
41
|
-
|
|
42
|
-
// Demo data
|
|
43
|
-
const urls = [
|
|
44
|
-
"../assets/data/waymark/shape.geojson",
|
|
45
|
-
"../assets/data/waymark/line.geojson",
|
|
46
|
-
"../assets/data/waymark/featureCollection.geojson",
|
|
47
|
-
];
|
|
48
|
-
|
|
49
|
-
// Create Instance
|
|
50
|
-
const instanceOne = createInstance({
|
|
51
|
-
debug: false,
|
|
52
|
-
id: "waymark-one",
|
|
53
|
-
mapOptions: {
|
|
54
|
-
center: [90, 90],
|
|
55
|
-
zoom: 18,
|
|
56
|
-
},
|
|
57
|
-
onLoad: (WaymarkInstance) => {
|
|
58
|
-
// Each URL
|
|
59
|
-
urls.forEach(async (url) => {
|
|
60
|
-
fetch(url).then(async (res) => {
|
|
61
|
-
const geoJSON = await res.json();
|
|
62
|
-
WaymarkInstance.geoJSONStore.addItem(geoJSON);
|
|
63
|
-
|
|
64
|
-
// Fit map to bounds
|
|
65
|
-
WaymarkInstance.mapLibreStore.mapLibreMap.fitBounds(
|
|
66
|
-
WaymarkInstance.geoJSONStore.getBounds(),
|
|
67
|
-
{
|
|
68
|
-
padding: 20,
|
|
69
|
-
duration: 0,
|
|
70
|
-
},
|
|
71
|
-
);
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
},
|
|
75
|
-
});
|
|
76
|
-
</script>
|
|
77
|
-
</body>
|
|
78
|
-
</html>
|