waibu-maps 1.1.4 → 1.1.6

package/bajo/intl/en-US.json

@@ -4,6 +4,12 @@
   "dirN": "N",
   "dirS": "S",
   "maps": "Maps",
+  "latLng": "latitude/Longitude",
+  "gotoLatLng": "Goto latitude/longitude",
+  "goto": "Goto",
+  "searchIn": "Search in",
+  "clearHistory": "Clear History",
+  "enterPhrase": "You need to enter a search phrase first",
   "mapControl": {
     "csrc": "Search",
     "navigation-control": "Navigation",

package/bajo/intl/id.json

@@ -6,16 +6,22 @@
   "dirN": "U",
   "dirS": "S",
   "maps": "Peta",
+  "latLng": "Lintang/Bujur",
+  "gotoLatLng": "Ke lintang/bujur",
+  "goto": "Pergi ke",
+  "searchIn": "Cari di",
+  "clearHistory": "Hapus Jejak",
+  "enterPhrase": "Anda harus memasukkan frase pencarian terlebih dahulu",
   "mapControl": {
-    "csrc": "Search",
-    "navigation-control": "Navigation",
-    "crlr": "Measurement",
-    "scale-control": "Map Scale",
-    "attribution-control": "Attribution",
-    "fullscreen-control": "Fullscreen",
-    "geolocate-control": "Geolocate",
+    "csrc": "Cari",
+    "navigation-control": "Navigasi",
+    "crlr": "Pengukuran",
+    "scale-control": "Skala Peta",
+    "attribution-control": "Atribusi",
+    "fullscreen-control": "Layar Penuh",
+    "geolocate-control": "Geolokasi",
     "globe-control": "Bola Dunia",
     "czbp": "Zoom/Bearing/Pitch",
-    "cmp": "Mouse Position"
+    "cmp": "Posisi Tetikus"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waibu-maps",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Maps for Waibu MPA",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,6 @@
   },
   "homepage": "https://github.com/ardhi/waibu-maps#readme",
   "dependencies": {
-    "@watergis/maplibre-gl-terradraw": "^1.3.8",
     "maplibre-gl": "^5.3.1"
   }
 }

package/waibuBootstrap/theme/component/factory/control-attribution.js

@@ -18,7 +18,7 @@ async function controlAttribution () {
       if (isString(this.params.attr.text)) opts.customAttribution = this.params.attr.text
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
       opts.classSelector = 'maplibregl-ctrl-attrib'
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControlNative('AttributionControl', ${jsonStringify(opts, true)})
       `)
       this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-buttons.js

@@ -55,7 +55,7 @@ async function controlButtons () {
       })
       this.params.html = ''
       if (!isEmpty(items)) {
-        this.block.control.push(`
+        this.addBlock('control', `
           map.addControl(new ControlButtons(_.merge(${jsonStringify({ items, position: pos }, true)}, { scopeId: this.$store.map.id }))${pos ? `, '${pos}'` : ''})
         `)
         this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-fullscreen.js

@@ -15,7 +15,7 @@ async function controlFullscreen () {
       const opts = {}
       if (isString(this.params.attr.container)) opts.container = this.params.attr.container
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControlNative('FullscreenControl', ${jsonStringify(opts, true)})
       `)
       this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-geolocate.js

@@ -16,7 +16,7 @@ async function controlGeolocate () {
       if (this.params.attr.highAccuracy) set(opts, 'positionOptions.enableHighAccuracy', true)
       if (this.params.attr.trackUserLocation) opts.trackUserLocation = true
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControlNative('GeolocateControl', ${jsonStringify(opts, true)})
       `)
       this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-globe.js

@@ -15,7 +15,7 @@ async function controlGlobe () {
       const opts = {}
       if (isString(this.params.attr.container)) opts.container = this.params.attr.container
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
-      this.block.mapStyle.push(`
+      this.addBlock('mapStyle', `
         await wmaps.createControlNative('GlobeControl', ${jsonStringify(opts, true)})
       `)
       this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-group.js

@@ -45,7 +45,7 @@ async function controlGroup () {
         items[idx] = await minify(items[idx])
       }
       this.readBlock()
-      this.block.reactive.push(`
+      this.addBlock('reactive', [`
         ${prefix}MenuTpl: _.template('${tpl}')
       `, `
         async ${prefix}Trigger (evt) {
@@ -77,8 +77,8 @@ async function controlGroup () {
           }
           return items
         }
-      `)
-      this.block.control.push({
+      `])
+      this.addBlock('control', {
         id,
         group: true,
         content: `

package/waibuBootstrap/theme/component/factory/control-image.js

@@ -22,7 +22,7 @@ async function controlImage () {
       const url = isString(this.params.attr.url) ? routePath(this.params.attr.url) : null
       let animate = '@mouseenter="$el.style.opacity = 1" @mouseleave="$el.style.opacity = 0.3" '
       if (this.params.attr.noAnimate) animate = ''
-      this.block.reactive.push(`
+      this.addBlock('reactive', `
         async ${prefix}Builder () {
           const body = ['<c:${url ? `a url="${url}"` : 'div'}><c:img ${attribsStringify(img)} ']
           body.push('${animate}')
@@ -31,7 +31,7 @@ async function controlImage () {
         }
       `)
 
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder }))
       `)
 

package/waibuBootstrap/theme/component/factory/control-logo.js

@@ -39,7 +39,7 @@ async function controlLogo () {
         img.style = img.style ?? {}
         img.style.opacity = img.opacity
       }
-      this.block.reactive.push(`
+      this.addBlock('reactive', `
         async ${prefix}Builder () {
           const body = ['<c:a href="#" @click="wbs.appLauncher(\\'fullscreen darkmode language\\', \\'${this.params.attr.menu}\\')">']
           body.push('<c:img ${attribsStringify(img)} ${animate} />')
@@ -48,7 +48,7 @@ async function controlLogo () {
         }
       `)
 
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder }))
       `)
 

package/waibuBootstrap/theme/component/factory/control-mouse-pos.js

@@ -28,14 +28,14 @@ async function controlMousePos () {
           <c:grid-col col="6" t:content="Latitude" />
         </c:grid-row>
       `))
-      this.block.dataInit.push(`
+      this.addBlock('dataInit', `
         this.$watch('$store.map.center', val => {
           if (!this.${prefix}TrackCenter) return
           this.${prefix}Pos = [...val]
         })
         this.$watch('${prefix}Pos', this.${prefix}Update.bind(this))
       `)
-      this.block.reactive.push(`
+      this.addBlock('reactive', [`
         ${prefix}Tpl: _.template('${tpl}')
       `, `
         ${prefix}Pos: [0, 0]
@@ -58,8 +58,8 @@ async function controlMousePos () {
           const body = '<c:div id="${id}" margin="x-2 top-1" text="align:center nowrap"/>'
           return await wmpa.createComponent(body)
         }
-      `)
-      this.block.run.push(`
+      `])
+      this.addBlock('run', `
         map.on('mousemove', evt => {
           if (this.${prefix}TrackCenter) return
           const coord = evt.lngLat.wrap()
@@ -68,7 +68,7 @@ async function controlMousePos () {
         if (this.${prefix}TrackCenter && this.$store.map.center) this.${prefix}Pos = [...this.$store.map.center]
       `)
 
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControl(_.merge(${jsonStringify(options, true)}, { builder: this.${prefix}Builder, firstCall: this.${prefix}Update }))
       `)
 

package/waibuBootstrap/theme/component/factory/control-navigation.js

@@ -18,7 +18,7 @@ async function controlNavigation () {
       opts.classSelector = 'maplibregl-ctrl-zoom-in'
       opts.classGroup = true
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControlNative('NavigationControl', ${jsonStringify(opts, true)})
       `)
       this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-ruler.js

@@ -27,7 +27,7 @@ async function controlRuler () {
       const opts = {
         imageUrl: routePath('waibuMaps.asset:/image/ruler.svg')
       }
-      this.block.control.push(`
+      this.addBlock('control', `
         const rulerCtrl = new ControlRuler(${jsonStringify(opts, true)})
         map.addControl(rulerCtrl${pos ? `, '${pos}'` : ''})
         if (this.$store.mapControl) {

package/waibuBootstrap/theme/component/factory/control-scale.js

@@ -16,7 +16,7 @@ async function controlScale () {
       if (['imperial', 'metric', 'nautical'].includes(this.params.attr.unit)) opts.unit = this.params.attr.unit
       if (isString(this.params.attr.maxWidth) && Number(this.params.attr.maxWidth)) opts.maxWidth = Number(this.params.attr.maxWidth)
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-left'
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControlNative('ScaleControl', ${jsonStringify(opts, true)})
       `)
       this.params.html = this.writeBlock()

package/waibuBootstrap/theme/component/factory/control-search.js

@@ -18,12 +18,12 @@ async function controlSearch () {
       const opts = {}
       opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-left'
       opts.class = prefix + ' maplibregl-ctrl-group'
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder }))
       `)
-      this.block.dataInit.push(`
+      this.addBlock('dataInit', `
         this.$watch('$store.mapSearch.value', async val => {
-          if (_.isEmpty(val)) return wbs.notify('You need to enter a search phrase first', { type: 'danger' })
+          if (_.isEmpty(val)) return wbs.notify('enterPhrase', { type: 'danger' })
           const html = await ${this.params.attr.method}(val, this.$store.mapSearch.feed)
           this.$store.mapSearch.recent = html ?? ''
           this.$store.mapSearch.busy = false
@@ -44,10 +44,10 @@ async function controlSearch () {
           el.disabled = !!val
         })
       `)
-      this.block.mapLoad.push(`
+      this.addBlock('mapLoad', `
         await this.${prefix}Populate()
       `)
-      this.block.reactive.push(`
+      this.addBlock('reactive', `
         async ${prefix}Builder (params) {
           const body = [
             '<c:button dim="height:100" flex="align-items:center justify-content:center" open="${id}">',
@@ -58,9 +58,9 @@ async function controlSearch () {
         },
         async ${prefix}Populate () {
           const feeds = await ${this.params.attr.feed}() ?? []
-          feeds.unshift({ code: 'latLng', name: 'Goto Latitude/Longitude', feed: { id: 'latLng', label: 'Latitude/Longitude' } })
+          feeds.unshift({ code: 'latLng', name: 'gotoLatLng', feed: { id: 'latLng', label: 'latLng' } })
           this.$store.mapSearch.feeds = feeds
-          const body = feeds.map(feed => '<c:dropdown-item :class="$store.mapSearch.feed === $el.getAttribute(\\'data-code-feedid\\') ? \\'active\\' : \\'\\'" data-code-feedid="' + feed.code + ':' + feed.feed.id + '" content="' + feed.feed.label + '" @click="$store.mapSearch.feed = \\'' + feed.code + ':' + feed.feed.id + '\\'"/>')
+          const body = feeds.map(feed => '<c:dropdown-item :class="$store.mapSearch.feed === $el.getAttribute(\\'data-code-feedid\\') ? \\'active\\' : \\'\\'" data-code-feedid="' + feed.code + ':' + feed.feed.id + '" t:content="' + feed.feed.label + '" @click="$store.mapSearch.feed = \\'' + feed.code + ':' + feed.feed.id + '\\'"/>')
           await wmpa.addComponent(body, '#${id} .input-group .dropdown-menu', 'div')
           if (!this.$store.mapSearch.feed) this.$store.mapSearch.feed = feeds[0].code + ':' + feeds[0].feed.id
           const html = this.$store.mapSearch.recent ?? ''
@@ -118,16 +118,16 @@ async function controlSearch () {
             </c:form-input>
             <c:div margin="top-2" flex="justify-content:between">
               <div>
-                <template x-if="feedCode !== 'latLng'"><span><c:t>Search in:</c:t> <strong><span x-html="feedName" /></strong></span></template>
-                <template x-if="feedCode === 'latLng'"><span><c:t>Goto:</c:t> <strong><span><c:t>Latitude/Longitude</c:t></span></strong></span></template>
+                <template x-if="feedCode !== 'latLng'"><span><c:t>searchIn</c:t>: <strong><span x-html="feedName" /></strong></span></template>
+                <template x-if="feedCode === 'latLng'"><span><c:t>goto</c:t>: <strong><span><c:t>latLng</c:t></span></strong></span></template>
               </div>
-              <c:btn x-show="feedCode !== 'latLng'" size="sm" color="link" t:content="Clear History" @click="clearHistory()" />
+              <c:btn x-show="feedCode !== 'latLng'" size="sm" color="link" t:content="clearHistory" @click="clearHistory()" />
             </c:div>
             <c:div margin="top-3" class="result"><div></div></c:div>
           </c:modal>
         </div>
       `)
-      this.block.dataInit.push(`
+      this.addBlock('dataInit', `
         this.$watch('$store.mapSearch.select', async val => {
           if (_.isEmpty(val)) return
           const [source, feedId] = (this.$store.mapSearch.feed ?? '').split(':')
@@ -140,7 +140,7 @@ async function controlSearch () {
           if (fn) await fn.call(scope, val, feedId)
         })
       `)
-      this.block.initializing.push(`
+      this.component.addScriptBlock('alpineInitializing', `
         Alpine.store('mapSearch', {
           feed: Alpine.$persist('latLng:latLng').as('mapSearchFeed'),
           recent: Alpine.$persist('').as('mapSearchRecent'),

package/waibuBootstrap/theme/component/factory/control-zbp.js

@@ -30,10 +30,10 @@ async function controlZbp () {
           <c:grid-col style="cursor:pointer" @click="reset" col="4" t:content="Pitch" />
         </c:grid-row>
       `))
-      this.block.dataInit.push(`
+      this.addBlock('dataInit', `
         this.$watch('$store.map.zoom, $store.map.bearing, $store.map.pitch', this.${prefix}Update.bind(this))
       `)
-      this.block.reactive.push(`
+      this.addBlock('reactive', [`
         ${prefix}Tpl: _.template('${tpl}')
       `, `
         ${prefix}Update () {
@@ -56,9 +56,9 @@ async function controlZbp () {
           ]
           return await wmpa.createComponent(body)
         }
-      `)
+      `])
 
-      this.block.control.push(`
+      this.addBlock('control', `
         await wmaps.createControl(_.merge(${jsonStringify(options, true)}, { builder: this.${prefix}Builder, firstCall: this.${prefix}Update }))
       `)
 

package/waibuBootstrap/theme/component/factory/control.js

@@ -19,7 +19,7 @@ async function control () {
       this.readBlock()
       // persisting
       if (this.params.attr.persist) {
-        this.block.initializing.push(`
+        this.component.addScriptBlock('alpineInitializing', `
           Alpine.store('mapControl', {
             attrib: Alpine.$persist(true).as('mapControlAttrib'),
             centerPos: Alpine.$persist(true).as('mapControlCenterPos'),

package/waibuBootstrap/theme/component/factory/layer-geojson.js

@@ -90,7 +90,7 @@ async function layerGeojson () {
         if (isString(group.cluster.maxZoom)) cluster.push('data.clusterMaxZoom = ' + Number(group.cluster.maxZoom))
       }
 
-      this.block.mapLoad.push(`
+      this.addBlock('mapLoad', `
         ${this.params.attr.srcImages ? (await buildSrcImages.call(this, this.params)) : buildImage.call(this, this.params)}
         ${buildSource.call(this, this.params, cluster)}
         ${buildLayers.call(this, this.params)}

package/waibuBootstrap/theme/component/factory/layer-html-cluster.js

@@ -85,7 +85,7 @@ async function layerHtmlCluster () {
         extra.push(`${key}: ['+', ['case', this.filter.${key}, 1, 0]],`)
       }
       extra.push('}')
-      this.block.mapLoad.push(`
+      this.addBlock('mapLoad', `
         ${buildSource.call(this, this.params, extra)}
         map.addLayer(
           ${createLayerCircle.call(this, this.params, filters)}
@@ -100,7 +100,7 @@ async function layerHtmlCluster () {
           updateMarkers()
         })
       `)
-      this.block.reactive.push(
+      this.addBlock('reactive', [
         `colors: ${jsonStringify(colors, true)}`,
         `filter: ${jsonStringify(filters, true)}`,
         `updateMarkers () {
@@ -115,7 +115,7 @@ async function layerHtmlCluster () {
             }
           })
         }`
-      )
+      ])
       this.params.html = this.writeBlock()
     }
   }

package/waibuBootstrap/theme/component/factory/map.js

@@ -32,7 +32,7 @@ async function map () {
       this.params.attr['@keyup'] = 'onKeyup'
       const mapOptions = await options.call(this, this.params)
       const projection = this.params.attr.projection ?? 'mercator'
-      this.block.reactive.push(`
+      this.addBlock('reactive', `
         async windowLoad () {
           const mapOpts = ${jsonStringify(mapOptions, true)}
           ${this.block.mapOptions.join('\n')}
@@ -40,95 +40,91 @@ async function map () {
         }
       `)
       this.params.attr['@load.window'] = 'await windowLoad()'
-      this.params.append = `<script>
-        document.addEventListener('alpine:init', () => {
-          Alpine.data('${this.params.attr.id}', () => {
-            let map
-            let wmaps
-            let projection = { type: '${projection}' }
-            ${this.block.nonReactive.join('\n')}
-            return {
-              init () {
-                ${this.block.dataInit.join('\n')}
-                this.$watch('$store.wmpa.reqAborted', val => {
-                  if (!val) return
-                  const text = _.get(wmpa, 'fetchingApi.' + val + '.status')
-                  if (text.startsWith('abort:')) {
-                    const [, msg] = text.split(':')
-                    wbs.notify(msg, { type: 'warning' }).then()
-                  }
-                })
-              },
-              ${this.block.reactive.join(',\n')},
-              async onMapLoad (evt) {
-                ${this.block.mapLoad.join('\n')}
-                this.onMapStyle()
-              },
-              async onMapStyle () {
-                map.setProjection(projection)
-                ${this.block.mapStyle.join('\n')}
-              },
-              async onMissingImage (evt) {
-                ${this.block.missingImage.join('\n')}
-              },
-              onLayerVisibility (layerId, shown) {
-                if (!shown) {
-                  if (wmaps.popup) {
-                    const el = wmaps.popup.getElement()
-                    if (el && el.classList.contains('popup-layer-' + layerId)) wmaps.popup.remove()
-                  }
+      this.component.addScriptBlock('alpineInit', `
+        Alpine.data('${this.params.attr.id}', () => {
+          let map
+          let wmaps
+          let projection = { type: '${projection}' }
+          ${(this.block.nonReactive ?? []).join('\n')}
+          return {
+            init () {
+              ${(this.block.dataInit ?? []).join('\n')}
+              this.$watch('$store.wmpa.reqAborted', val => {
+                if (!val) return
+                const text = _.get(wmpa, 'fetchingApi.' + val + '.status')
+                if (text.startsWith('abort:')) {
+                  const [, msg] = text.split(':')
+                  wbs.notify(msg, { type: 'warning' }).then()
                 }
-                ${this.block.layerVisibility.join('\n')}
-              },
-              async onKeyup (evt) {
-                if (evt.key === 'Escape') {
-                  if (wmaps.popup) wmaps.popup.remove()
+              })
+            },
+            ${(this.block.reactive ?? []).join(',\n')},
+            async onMapLoad (evt) {
+              ${(this.block.mapLoad ?? []).join('\n')}
+              this.onMapStyle()
+            },
+            async onMapStyle () {
+              map.setProjection(projection)
+              ${(this.block.mapStyle ?? []).join('\n')}
+            },
+            async onMissingImage (evt) {
+              ${(this.block.missingImage ?? []).join('\n')}
+            },
+            onLayerVisibility (layerId, shown) {
+              if (!shown) {
+                if (wmaps.popup) {
+                  const el = wmaps.popup.getElement()
+                  if (el && el.classList.contains('popup-layer-' + layerId)) wmaps.popup.remove()
                 }
-                ${this.block.keyup.join('\n')}
-              },
-              async run (instance) {
-                map = instance
-                wmapsUtil.setMap(map, projection)
-                wmaps = new WaibuMaps(instance, this)
-                map.on('moveend', evt => {
-                  Alpine.store('map').center = evt.target.getCenter().toArray()
-                  Alpine.store('map').zoom = evt.target.getZoom()
-                  Alpine.store('map').bearing = evt.target.getBearing()
-                  Alpine.store('map').pitch = evt.target.getPitch()
-                })
-                ${this.block.mapExtend.join('\n')}
-                ${this.block.control.join('\n')}
-                ${this.block.run.join('\n')}
-                map.on('styledataloading', () => {
-                  map.once('styledata', this.onMapStyle.bind(this))
-                })
-                map.on('styleimagemissing', this.onMissingImage.bind(this))
-                map.on('load', this.onMapLoad.bind(this))
               }
+              ${(this.block.layerVisibility ?? []).join('\n')}
+            },
+            async onKeyup (evt) {
+              if (evt.key === 'Escape') {
+                if (wmaps.popup) wmaps.popup.remove()
+              }
+              ${(this.block.keyup ?? []).join('\n')}
+            },
+            async run (instance) {
+              map = instance
+              wmapsUtil.setMap(map, projection)
+              wmaps = new WaibuMaps(instance, this)
+              map.on('moveend', evt => {
+                Alpine.store('map').center = evt.target.getCenter().toArray()
+                Alpine.store('map').zoom = evt.target.getZoom()
+                Alpine.store('map').bearing = evt.target.getBearing()
+                Alpine.store('map').pitch = evt.target.getPitch()
+              })
+              ${(this.block.mapExtend ?? []).join('\n')}
+              ${(this.block.control ?? []).join('\n')}
+              ${(this.block.run ?? []).join('\n')}
+              map.on('styledataloading', () => {
+                map.once('styledata', this.onMapStyle.bind(this))
+              })
+              map.on('styleimagemissing', this.onMissingImage.bind(this))
+              map.on('load', this.onMapLoad.bind(this))
             }
-          })
-          ${this.block.init.join('\n')}
-        })
-        document.addEventListener('alpine:initializing', () => {
-          const props = {
-            id: '${this.params.attr.id}',
-            degree: Alpine.$persist('DMS').as('mapDegree'),
-            measure: Alpine.$persist('nautical').as('mapMeasure'),
-            zoomScrollCenter: Alpine.$persist(false).as('mapZoomScrollCenter'),
-            noMapRotate: Alpine.$persist(false).as('mapNoMapRotate'),
-            center: Alpine.$persist(null).as('mapCenter'),
-            zoom: Alpine.$persist(null).as('mapZoom'),
-            bearing: Alpine.$persist(null).as('mapBearing'),
-            pitch: Alpine.$persist(null).as('mapPitch')
           }
-          for (const ctrl of ${jsonStringify(WmapsBase.controls, true)}) {
-            const name = 'ctrl' + wmpa.pascalCase(ctrl)
-            props[name] = Alpine.$persist(true).as('map' + _.upperFirst(name))
-          }
-          Alpine.store('map', props)
-          ${this.block.initializing.join('\n')}
         })
-      </script>`
+      `)
+      this.component.addScriptBlock('alpineInitializing', `
+        const props = {
+          id: '${this.params.attr.id}',
+          degree: Alpine.$persist('DMS').as('mapDegree'),
+          measure: Alpine.$persist('nautical').as('mapMeasure'),
+          zoomScrollCenter: Alpine.$persist(false).as('mapZoomScrollCenter'),
+          noMapRotate: Alpine.$persist(false).as('mapNoMapRotate'),
+          center: Alpine.$persist(null).as('mapCenter'),
+          zoom: Alpine.$persist(null).as('mapZoom'),
+          bearing: Alpine.$persist(null).as('mapBearing'),
+          pitch: Alpine.$persist(null).as('mapPitch')
+        }
+        for (const ctrl of ${jsonStringify(WmapsBase.controls, true)}) {
+          const name = 'ctrl' + wmpa.pascalCase(ctrl)
+          props[name] = Alpine.$persist(true).as('map' + _.upperFirst(name))
+        }
+        Alpine.store('map', props)
+      `)
       const html = []
       $(`<div>${this.params.html}</div>`).find('.childmap').each(function () {
         html.push($(this).prop('outerHTML'))

package/waibuBootstrap/theme/component/factory/script.js

@@ -10,8 +10,8 @@ async function script () {
     }
 
     build = async () => {
-      const type = WmapsBase.blockTypes.includes(this.params.attr.type) ? this.params.attr.type : 'run'
-      this.block[type].push(this.params.html)
+      const type = this.params.attr.type ?? 'run'
+      this.addBlock(type, this.params.html)
       this.params.html = this.writeBlock()
     }
   }

package/waibuBootstrap/theme/component/wmaps-base.js

@@ -12,15 +12,6 @@ async function wmapsBase () {
       'waibuMaps.asset:/css/wmaps.css'
     ]
 
-    constructor (options) {
-      super(options)
-      this.blockTypes = [...this.blockTypes,
-        'mapLoad', 'control', 'mapOptions', 'mapStyle', 'layerVisibility', 'missingImage',
-        'mapExtend'
-      ]
-      this.init()
-    }
-
     static controls = ['csrc', 'navigation-control', 'crlr', 'scale-control', 'attribution-control',
       // 'fullscreen-control', 'geolocate-control', 'czbp', 'cmp', 'globe-control']
       'fullscreen-control', 'geolocate-control', 'czbp', 'cmp']

package/waibuStatic/virtual.json

@@ -1,7 +1,4 @@
 [{
   "prefix": "maplibre",
   "root": "maplibre-gl:/dist"
-}, {
-  "prefix": "draw-ctrl",
-  "root": "@watergis/maplibre-gl-terradraw:/dist"
 }]

package/waibuBootstrap/theme/component/factory/control-draw.js

@@ -1,44 +0,0 @@
-import control from './control.js'
-
-async function controlDraw () {
-  const WmapsControl = await control.call(this)
-
-  return class WmapsControlDraw extends WmapsControl {
-    static scripts = [
-      ...super.scripts,
-      'waibuMaps.virtual:/draw-ctrl/maplibre-gl-terradraw.umd.js'
-    ]
-
-    static css = [
-      ...super.css,
-      'waibuMaps.virtual:/draw-ctrl/maplibre-gl-terradraw.css'
-    ]
-
-    constructor (options) {
-      super(options)
-      this.params.noTag = true
-    }
-
-    build = async () => {
-      const { jsonStringify, attrToArray } = this.plugin.app.waibuMpa
-      const opts = {}
-      if (['imperial', 'metric', 'nautical'].includes(this.params.attr.unit)) opts.unit = this.params.attr.unit
-      const pos = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-left'
-      let modes = ['point', 'linestring', 'polygon', 'rectangle', 'circle', 'freehand', 'angled-rectangle', 'sensor', 'sector', 'select', 'delete-selection', 'delete', 'render', 'download']
-      if (this.params.attr.modes) modes = attrToArray(this.params.attr.modes)
-      this.block.control.push(`
-        draw = new MaplibreTerradrawControl.MaplibreTerradrawControl({
-          modes: ${jsonStringify(modes, true)},
-          open: true,
-        })
-        map.addControl(draw, '${pos}')
-      `)
-      this.block.nonReactive.push(`
-        let draw
-      `)
-      this.params.html = this.writeBlock()
-    }
-  }
-}
-
-export default controlDraw