@map4d/web-components 0.0.1

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.
Files changed (5) hide show
  1. package/README.md +1 -0
  2. package/index.html +36 -0
  3. package/jsr.json +5 -0
  4. package/map4d-web-components.js +142 -0
  5. package/package.json +23 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # Map4D Web Components
package/index.html ADDED
@@ -0,0 +1,36 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Map4D Web Components</title>
9
+ <meta name="description" content="Website description">
10
+ <meta name="keywords" content="Website">
11
+ <style>
12
+ html,
13
+ body {
14
+ height: 100%;
15
+ margin: 0;
16
+ padding: 0;
17
+ }
18
+
19
+ body {
20
+ display: flex;
21
+ }
22
+
23
+ map4d-map {
24
+ display: block;
25
+ flex: 1;
26
+ }
27
+ </style>
28
+ </head>
29
+
30
+ <body>
31
+ <map4d-loader key="YOUR_API_KEY" version="3.1"></map4d-loader>
32
+ <map4d-map center="21.312167,106.769575" zoom="7"></map4d-map>
33
+ <script type="module" src="/map4d-web-components.js"></script>
34
+ </body>
35
+
36
+ </html>
package/jsr.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "@map4d/web-components",
3
+ "version": "0.0.1",
4
+ "exports": "./map4d-web-components.js"
5
+ }
package/map4d-web-components.js ADDED
@@ -0,0 +1,142 @@
1
+ import { LitElement } from "lit"
2
+
3
+ let map4dPromise
4
+
5
+ function loadMap4DScript({ key: key, version }) {
6
+ if (map4dPromise) {
7
+ console.warn('Map4D script is already loading or loaded')
8
+ return map4dPromise
9
+ }
10
+
11
+ map4dPromise = new Promise((resolve) => {
12
+ if (window.map4d) {
13
+ resolve(window.map4d)
14
+ return
15
+ }
16
+
17
+ window.map4dLoaded = () => {
18
+ resolve(window.map4d);
19
+ delete window.map4dLoaded;
20
+ };
21
+
22
+ const script = document.createElement('script')
23
+ script.src = `https://api.map4d.vn/sdk/map/js?key=${key}&version=${version}&callback=map4dLoaded`
24
+ script.async = true
25
+ script.defer = true
26
+ script.onerror = () => {
27
+ console.error('Failed to load Map4D script')
28
+ }
29
+
30
+ document.head.appendChild(script)
31
+ })
32
+
33
+ return map4dPromise
34
+ }
35
+
36
+ class Map4DLoader extends LitElement {
37
+ static get properties() {
38
+ return {
39
+ key: String,
40
+ version: String,
41
+ }
42
+ }
43
+
44
+ constructor() {
45
+ super()
46
+ }
47
+
48
+ connectedCallback() {
49
+ super.connectedCallback()
50
+ if (this.isValid()) {
51
+ loadMap4DScript({
52
+ key: this.key,
53
+ version: this.version,
54
+ }).then((map4d) => {
55
+ // console.log('Map4D is ready:', map4d)
56
+
57
+ // this.dispatchEvent(
58
+ // new CustomEvent('map4d-ready', {
59
+ // detail: map4d,
60
+ // bubbles: true,
61
+ // composed: true,
62
+ // })
63
+ // )
64
+ })
65
+ }
66
+ }
67
+
68
+ isValid() {
69
+ if (!this.key) {
70
+ console.error('map4d-loader: api key is required')
71
+ return false
72
+ }
73
+
74
+ if (!this.version) {
75
+ console.error('map4d-loader: version is required')
76
+ return false
77
+ }
78
+
79
+ return true
80
+ }
81
+ }
82
+
83
+ customElements.define("map4d-loader", Map4DLoader)
84
+
85
+ class Map4DMap extends LitElement {
86
+ static get properties() {
87
+ return {
88
+ center: String,
89
+ zoom: String,
90
+ }
91
+ }
92
+
93
+ constructor() {
94
+ super()
95
+ }
96
+
97
+ connectedCallback() {
98
+ // super.connectedCallback()
99
+ const mapElement = document.createElement('div')
100
+ mapElement.style.height = '100%'
101
+ this.appendChild(mapElement)
102
+
103
+ const options = this.getMapOptions()
104
+ this.createMap(mapElement, options)
105
+ }
106
+
107
+ getMapOptions() {
108
+ let zoom = 3
109
+ let center = { lat: 16, lng: 108 }
110
+
111
+ if (this.center) {
112
+ const parts = this.center.split(',')
113
+ if (parts.length === 2) {
114
+ center = { lat: parseFloat(parts[0]), lng: parseFloat(parts[1]) }
115
+ }
116
+ }
117
+
118
+ if (this.zoom) {
119
+ let z = parseInt(this.zoom)
120
+ if (!isNaN(z)) {
121
+ zoom = z
122
+ }
123
+ }
124
+
125
+ return {
126
+ center: center,
127
+ zoom: zoom,
128
+ controls: true
129
+ }
130
+ }
131
+
132
+ async createMap(element, options) {
133
+ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
134
+ while (!window['map4d']) {
135
+ await sleep(300)
136
+ }
137
+
138
+ new map4d.Map(element, options)
139
+ }
140
+ }
141
+
142
+ customElements.define("map4d-map", Map4DMap)
package/package.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "@map4d/web-components",
3
+ "version": "0.0.1",
4
+ "description": "Web Components for Map4D",
5
+ "author": "IOTLink",
6
+ "license": "Copyright (c) 2025 IOTLink",
7
+ "homepage": "https://map4d.vn",
8
+ "type": "module",
9
+ "main": "map4d-web-components.js",
10
+ "module": "map4d-web-components.js",
11
+ "scripts": {
12
+ "test": "echo \"Error: no test specified\" && exit 1",
13
+ "dev": "vite",
14
+ "build": "vite build",
15
+ "serve": "vite preview"
16
+ },
17
+ "dependencies": {
18
+ "lit": "^3.3.2"
19
+ },
20
+ "devDependencies": {
21
+ "vite": "^6.4.1"
22
+ }
23
+ }