waibu-maps 1.0.1

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

@@ -0,0 +1,78 @@
+import control from './control.js'
+
+const prefix = 'cmp'
+
+async function controlMousePos () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlMousePos extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { jsonStringify, minify } = this.plugin.app.waibuMpa
+      const { has, omit } = this.plugin.app.bajo.lib._
+      const options = omit(this.params.attr, ['octag', 'class', 'style', 'content'])
+      options.class = prefix + ' maplibregl-ctrl-group widget'
+      const id = generateId('alpha')
+      const tpl = await minify(await this.component.buildSentence(`
+        <c:grid-row>
+          <c:grid-col col="6">{%= lng %}</c:grid-col>
+          <c:grid-col col="6">{%= lat %}</c:grid-col>
+        </c:grid-row>
+        <c:grid-row style="font-size:smaller">
+          <c:grid-col col="6" t:content="Longitude" />
+          <c:grid-col col="6" t:content="Latitude" />
+        </c:grid-row>
+      `))
+      this.block.dataInit.push(`
+        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(`
+        ${prefix}Tpl: _.template('${tpl}')
+      `, `
+        ${prefix}Pos: [0, 0]
+      `, `
+        ${prefix}TrackCenter: ${has(this.params.attr, 'trackCenter') ? 'true' : 'false'}
+      `, `
+        ${prefix}Update () {
+          const el = document.querySelector('#${id}')
+          if (!el) return
+          const [lng, lat] = this.${prefix}Pos
+          el.innerHTML = this.${prefix}Tpl({
+            lng: wmpa.format(lng, 'float', { longitude: true }),
+            lat: wmpa.format(lat, 'float', { latitude: true })
+          })
+        }
+      `, `
+        async ${prefix}Builder () {
+          const body = '<c:div id="${id}" margin="x-2 top-1" text="align:center nowrap"/>'
+          return await wmpa.createComponent(body)
+        }
+      `)
+      this.block.run.push(`
+        map.on('mousemove', evt => {
+          if (this.${prefix}TrackCenter) return
+          const coord = evt.lngLat.wrap()
+          this.${prefix}Pos = [coord.lng, coord.lat]
+        })
+        if (this.${prefix}TrackCenter) this.${prefix}Pos = [...this.$store.map.center]
+      `)
+
+      this.block.control.push(`
+        await wmaps.createControl(_.merge(${jsonStringify(options, true)}, { builder: this.${prefix}Builder, firstCall: this.${prefix}Update }))
+      `)
+
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlMousePos

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

@@ -0,0 +1,29 @@
+import control from './control.js'
+
+async function controlNavigation () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlNavigation extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const opts = { showCompass: false }
+      if (this.params.attr.compass) opts.showCompass = true
+      if (this.params.attr.noZoom) opts.showZoom = false
+      if (this.params.attr.visualizePitch) opts.visualizePitch = true
+      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(`
+        await wmaps.createControlNative('NavigationControl', ${jsonStringify(opts, true)})
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlNavigation

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

@@ -0,0 +1,47 @@
+import control from './control.js'
+const storeKey = 'mapControl.ruler'
+
+async function controlRuler () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlRuler extends WmapsControl {
+    static scripts = [
+      ...super.scripts,
+      'bajoSpatial.virtual:/geolib/lib/index.js',
+      'waibuMaps.asset:/js/control-ruler.js'
+    ]
+
+    static css = [
+      ...super.css,
+      'waibuMaps.asset:/css/control-ruler.css'
+    ]
+
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { routePath } = this.plugin.app.waibu
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const pos = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
+      const opts = {
+        imageUrl: routePath('waibuMaps.asset:/image/ruler.svg')
+      }
+      this.block.control.push(`
+        const rulerCtrl = new ControlRuler(${jsonStringify(opts, true)})
+        map.addControl(rulerCtrl${pos ? `, '${pos}'` : ''})
+        if (this.$store.mapControl) {
+          el = document.querySelector('#' + map._container.id + ' .maplibregl-ctrl-ruler')
+          el.setAttribute('x-data', '')
+          el.setAttribute('x-show', '$store.${storeKey}')
+          // TODO: disable measuring first
+          // el.setAttribute('x-init', "$watch('$store.${storeKey}', val => console.log(rulerCtrl))")
+        }
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlRuler

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

@@ -0,0 +1,27 @@
+import control from './control.js'
+
+async function controlScale () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlScale extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { isString } = this.plugin.app.bajo.lib._
+      const opts = {}
+      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(`
+        await wmaps.createControlNative('ScaleControl', ${jsonStringify(opts, true)})
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlScale

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

@@ -0,0 +1,159 @@
+import control from './control.js'
+const prefix = 'csrc'
+
+async function controlSearch () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlSearch extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { isString } = this.plugin.app.bajo.lib._
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const id = isString(this.params.attr.id) ? this.params.attr.id : generateId('alpha')
+      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(`
+        await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder }))
+      `)
+      this.block.dataInit.push(`
+        this.$watch('$store.mapSearch.value', async val => {
+          if (_.isEmpty(val)) return wbs.notify('You need to enter a search phrase first', { type: 'danger' })
+          const html = await ${this.params.attr.method}(val, this.$store.mapSearch.feed)
+          this.$store.mapSearch.recent = html ?? ''
+          this.$store.mapSearch.busy = false
+        })
+        this.$watch('$store.mapSearch.recent', async val => {
+          val = val ?? ''
+          if (val === 'flying' && this.$store.mapSearch.feed === 'latLng:latLng') {
+            wbs.closeModal('${id}')
+            this.$store.mapSearch.recent = ''
+          }
+          wmpa.replaceWithComponentHtml(val, '#${id} .result div', 'div')
+        })
+        this.$watch('$store.mapSearch.feed', async val => {
+          this.$store.mapSearch.recent = ''
+        })
+        this.$watch('$store.mapSearch.busy', async val => {
+          const el = document.querySelector('#${id} .input-group .dropdown-toggle')
+          el.disabled = !!val
+        })
+      `)
+      this.block.mapLoad.push(`
+        await this.${prefix}Populate()
+      `)
+      this.block.reactive.push(`
+        async ${prefix}Builder (params) {
+          const body = [
+            '<c:button dim="height:100" flex="align-items:center justify-content:center" open="${id}">',
+            '<c:icon name="search" />',
+            '</c:button>'
+          ]
+          return [await wmpa.createComponent(body)]
+        },
+        async ${prefix}Populate () {
+          const feeds = await ${this.params.attr.feed}() ?? []
+          feeds.unshift({ code: 'latLng', name: 'Goto Latitude/Longitude', feed: { id: 'latLng', label: 'Latitude/Longitude' } })
+          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 + '\\'"/>')
+          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 ?? ''
+          wmpa.replaceWithComponentHtml(html, '#${id} .result div', 'div')
+        }
+      `)
+      const ui = await this.component.buildSentence(`
+        <div class="childmap maplibregl-ctrl-search">
+          <c:modal id="${id}" size="lg" no-header no-center x-data="{
+            get feedCode () {
+              const [code, feedId] = (this.$store.mapSearch.feed ?? '').split(':')
+              return code
+            },
+            get feedName () {
+              const [code, feedId] = (this.$store.mapSearch.feed ?? '').split(':')
+              const item = _.find(this.$store.mapSearch.feeds, f => f.code === code && f.feed.id === feedId)
+              return item ? item.feed.label : feedId
+            },
+            search () {
+              this.$store.mapSearch.value = this.$refs.input.value
+            },
+            clearHistory () {
+              wmpa.replaceWithComponentHtml('', '#${id} .result div', 'div')
+            },
+            abort () {
+              const endpoint = this.$store.mapSearch.busy
+              const status = _.get(wmpa, 'fetchingApi.' + endpoint + '.status')
+              const controller = _.get(wmpa, 'fetchingApi.' + endpoint + '.abortCtrl')
+              if (!endpoint || status !== 'fetching') return
+              controller.abort()
+            },
+            resetValue () {
+              const el = document.querySelector('#${id} input[type=search]')
+              el.value = ''
+            },
+            select (id) {
+              this.$store.mapSearch.select = id
+              const instance = wbs.getInstance('Modal', '${id}')
+              instance.hide()
+            }
+          }" x-init="$watch('$store.mapSearch.feed', resetValue)">
+            <c:form-input x-ref="input" type="search" dim="width:max" @keyup.enter="search()" :disabled="$store.mapSearch.busy">
+              <c:form-input-addon prepend>
+                <c:dropdown>
+                </c:dropdown>
+              </c:form-input-addon>
+              <c:form-input-addon prepend>
+                <c:span x-show="feedCode === 'latLng'"><c:icon name="arrowEnd"/></c:span>
+                <c:span x-show="feedCode !== 'latLng' && !$store.mapSearch.busy"><c:icon name="search"/></c:span>
+                <c:spinner size="sm" x-show="feedCode !== 'latLng' && $store.mapSearch.busy" text="color:primary" />
+              </c:form-input-addon>
+              <c:form-input-addon append>
+                <c:btn @click="abort" x-show="$store.mapSearch.busy" t:content="Abort" />
+              </c:form-input-addon>
+            </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>
+              </div>
+              <c:btn x-show="feedCode !== 'latLng'" size="sm" color="link" t:content="Clear History" @click="clearHistory()" />
+            </c:div>
+            <c:div margin="top-3" class="result"><div></div></c:div>
+          </c:modal>
+        </div>
+      `)
+      this.block.dataInit.push(`
+        this.$watch('$store.mapSearch.select', async val => {
+          if (_.isEmpty(val)) return
+          const [source, feedId] = (this.$store.mapSearch.feed ?? '').split(':')
+          const feed = _.find(this.$store.mapSearch.feeds, item => {
+            return item.code === source && item.feed.id === feedId
+          })
+          this.$store.mapSearch.select = null
+          const scope = wmpa.alpineScope()
+          const fn = scope[feed.feed.prefix + 'FindTarget']
+          if (fn) await fn.call(scope, val, feedId)
+        })
+      `)
+      this.block.initializing.push(`
+        Alpine.store('mapSearch', {
+          feed: Alpine.$persist('latLng:latLng').as('mapSearchFeed'),
+          recent: Alpine.$persist('').as('mapSearchRecent'),
+          feeds: [],
+          select: null,
+          value: null,
+          busy: false
+        })
+      `)
+
+      this.params.html = [this.writeBlock(), ui].join('\n')
+    }
+  }
+}
+
+export default controlSearch

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

@@ -0,0 +1,70 @@
+import control from './control.js'
+
+const prefix = 'czbp'
+
+async function controlZbp () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlZbp extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { jsonStringify, minify } = this.plugin.app.waibuMpa
+      const { omit } = this.plugin.app.bajo.lib._
+      const options = omit(this.params.attr, ['octag', 'class', 'style', 'content'])
+      options.class = prefix + ' maplibregl-ctrl-group widget'
+      const id = generateId('alpha')
+      const tpl = await minify(await this.component.buildSentence(`
+        <c:grid-row font="size:5">
+          <c:grid-col col="4">{%= zoom %}</c:grid-col>
+          <c:grid-col col="4">{%= bearing %}</c:grid-col>
+          <c:grid-col col="4">{%= pitch %}</c:grid-col>
+        </c:grid-row>
+        <c:grid-row style="font-size:smaller">
+          <c:grid-col col="4" t:content="Zoom" />
+          <c:grid-col style="cursor:pointer" @click="reset" col="4" t:content="Bearing" />
+          <c:grid-col style="cursor:pointer" @click="reset" col="4" t:content="Pitch" />
+        </c:grid-row>
+      `))
+      this.block.dataInit.push(`
+        this.$watch('$store.map.zoom, $store.map.bearing, $store.map.pitch', this.${prefix}Update.bind(this))
+      `)
+      this.block.reactive.push(`
+        ${prefix}Tpl: _.template('${tpl}')
+      `, `
+        ${prefix}Update () {
+          const el = document.querySelector('#${id}')
+          if (!el) return
+          el.innerHTML = this.${prefix}Tpl({
+            zoom: wmpa.format(this.$store.map.zoom, 'integer'),
+            bearing: wmpa.format(this.$store.map.bearing, 'integer'),
+            pitch: wmpa.format(this.$store.map.pitch, 'integer')
+          })
+        }
+      `, `
+        async ${prefix}Builder () {
+          const body = ['<c:div id="${id}" margin="x-2 top-1" text="align:center" ',
+            'x-data="{',
+            ' reset () {',
+            '   wmpa.alpineScopeMethod(\\'getMap.flyTo\\')({ bearing: 0, pitch: 0 }) ',
+            ' }',
+            '}" />'
+          ]
+          return await wmpa.createComponent(body)
+        }
+      `)
+
+      this.block.control.push(`
+        await wmaps.createControl(_.merge(${jsonStringify(options, true)}, { builder: this.${prefix}Builder, firstCall: this.${prefix}Update }))
+      `)
+
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlZbp

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

@@ -0,0 +1,42 @@
+import wmapsBase from '../wmaps-base.js'
+
+async function control () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsControl extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.ctrlPos = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { $ } = this.component
+      const html = []
+      $(`<div>${this.params.html}</div>`).find('.childmap').each(function () {
+        html.push($(this).prop('outerHTML'))
+      })
+      this.readBlock()
+      // persisting
+      if (this.params.attr.persist) {
+        this.block.initializing.push(`
+          Alpine.store('mapControl', {
+            attrib: Alpine.$persist(true).as('mapControlAttrib'),
+            centerPos: Alpine.$persist(true).as('mapControlCenterPos'),
+            fullscreen: Alpine.$persist(true).as('mapControlFullscreen'),
+            mousePos: Alpine.$persist(true).as('mapControlMousePos'),
+            nav: Alpine.$persist(true).as('mapControlNav'),
+            scale: Alpine.$persist(true).as('mapControlScale'),
+            geolocate: Alpine.$persist(true).as('mapControlGeolocate'),
+            ruler: Alpine.$persist(true).as('mapControlRuler'),
+            search: Alpine.$persist(true).as('mapControlSearch')
+          })
+        `)
+      }
+      this.params.html = this.writeBlock()
+      if (html.length > 0) this.params.html += '\n' + html.join('\n')
+    }
+  }
+}
+
+export default control

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

@@ -0,0 +1,103 @@
+import wmapsBase from '../wmaps-base.js'
+
+export function buildLayers (params) {
+  const { isString, map } = this.plugin.app.bajo.lib._
+  const { routePath } = this.plugin.app.waibu
+  const { attrToArray, jsonStringify } = this.plugin.app.waibuMpa
+
+  if (!isString(params.attr.layer)) return ''
+  const items = map(attrToArray(params.attr.layer), item => routePath(item))
+  return `
+    for (const l of ${jsonStringify(items, true)}) {
+      const layer = await this.loadResource(l)
+      layer.source = '${params.attr.name}'
+      map.addLayer(layer)
+    }
+  `
+}
+
+export function buildImage (params) {
+  const { isString, map } = this.plugin.app.bajo.lib._
+  const { routePath } = this.plugin.app.waibu
+  const { attrToArray, jsonStringify } = this.plugin.app.waibuMpa
+
+  if (!isString(params.attr.image)) return ''
+  const items = map(attrToArray(params.attr.image), item => routePath(item))
+  return `
+    for (const l of ${jsonStringify(items, true)}) {
+      let [item, name] = l.split(';')
+      if (!name) name = _.last(l.split('?')[0].split('#')[0].split('/')).split('.')[0]
+      if (map.listImages().includes(name)) continue
+      const resp = await map.loadImage(l)
+      map.addImage(name, resp.data)
+    }
+  `
+}
+
+export async function buildSrcImages (params) {
+  const { isString } = this.plugin.app.bajo.lib._
+  const { routePath, fetch } = this.plugin.app.waibu
+
+  if (!isString(params.attr.srcImages)) return
+  params.attr.srcImages = routePath(params.attr.srcImages)
+  const items = await fetch(params.attr.srcImages)
+  const lines = []
+  for (const key in items) {
+    lines.push(`${items[key]};${key}`)
+  }
+  params.attr.image = lines.join(' ')
+  return buildImage.call(this, params)
+}
+
+export function buildSource (params, extra = []) {
+  const { routePath } = this.plugin.app.waibu
+  params.attr.src = routePath(params.attr.src)
+  return `
+    const rsc = await this.loadResource('${params.attr.src}')
+    let data = {}
+    if (rsc.type === 'geojson' && rsc.data) data = rsc
+    else {
+      data.type = 'geojson'
+      data.data = rsc
+    }
+    ${params.attr.lineGradient ? 'data.lineMetrics = true' : ''}
+    ${extra.join('\n')}
+    map.addSource('${params.attr.name}', data)
+  `
+}
+
+async function layerGeojson () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsLayerGeojson extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { isString } = this.plugin.app.bajo.lib._
+      const { groupAttrs } = this.plugin.app.waibuMpa
+      this.params.noTag = true
+      if (!this.params.attr.src) return
+      this.params.attr.name = this.params.attr.name ?? generateId('alpha')
+      const group = groupAttrs(this.params.attr, ['cluster'])
+      const cluster = []
+      if (group.cluster) {
+        cluster.push('data.cluster = true')
+        if (isString(group.cluster.radius)) cluster.push('data.clusterRadius = ' + Number(group.cluster.radius))
+        if (isString(group.cluster.maxZoom)) cluster.push('data.clusterMaxZoom = ' + Number(group.cluster.maxZoom))
+      }
+
+      this.block.mapLoad.push(`
+        ${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)}
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default layerGeojson

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

@@ -0,0 +1,124 @@
+import wmapsBase from '../wmaps-base.js'
+
+import { buildSource } from './layer-geojson.js'
+
+function createLayerLabel (params) {
+  return `{
+    id: '${params.attr.name}_label',
+    type: 'symbol',
+    source: '${params.attr.name}',
+    filter: ['!=', '${params.attr.clusterKey}', true],
+    layout: {
+      'text-field': [
+        'number-format',
+        ['get', '${params.attr.valueKey}'],
+        {'min-fraction-digits': 1, 'max-fraction-digits': 1}
+      ],
+      'text-font': ['Open Sans Bold'],
+      'text-size': 10
+    },
+    paint: {
+      'text-color': [
+        'case',
+        ['<', ['get', '${params.attr.valueKey}'], 3],
+        'black',
+        'white'
+      ]
+    }
+  }`
+}
+
+function createLayerCircle (params, filters) {
+  const circle = [`{
+    id: '${params.attr.name}_circle',
+    type: 'circle',
+    source: '${params.attr.name}',
+    filter: ['!=', '${params.attr.clusterKey}', true],
+    paint: {
+      'circle-color': [
+        'case',
+  `]
+  let i = 0
+  const keys = Object.keys(filters)
+  for (const key of keys) {
+    circle.push(`this.filter.${key},`, `this.colors[${i}],`)
+    i++
+    if (i >= keys.length - 1) break
+  }
+  circle.push(`this.colors[${i}]`, '],\'circle-opacity\': 0.6, \'circle-radius\': 12 }}')
+  return circle.join('\n')
+}
+
+async function layerHtmlCluster () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsLayerHtmlCluster extends WmapsBase {
+    static scripts = [
+      ...super.scripts,
+      'waibuMaps.asset:/js/donut-chart.js'
+    ]
+
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { attrToArray, jsonStringify } = this.plugin.app.waibuMpa
+      const { fetch, routePath } = this.plugin.app.waibu
+      const { isString } = this.plugin.app.bajo.lib._
+      if (!this.params.attr.src) return
+      this.params.attr.name = this.params.attr.name ?? generateId('alpha')
+      this.params.attr.valueKey = this.params.attr.valueKey ?? ''
+      this.params.attr.clusterKey = this.params.attr.clusterKey ?? 'cluster'
+      this.params.attr.clusterIdKey = this.params.attr.clusterIdKey ?? 'clusterId'
+      const colors = attrToArray(this.params.attr.color ?? '#fed976 #feb24c #fd8d3c #fc4e2a #e31a1c')
+      this.params.attr.filter = routePath(this.params.attr.filter)
+      const filters = await fetch(this.params.attr.filter)
+      const extra = [
+        'data.cluster = true',
+        `data.clusterRadius = ${isString(this.params.attr.clusterRadius) ? Number(this.params.attr.clusterRadius) : 80}`,
+        'data.clusterProperties = {'
+      ]
+      for (const key in filters) {
+        extra.push(`${key}: ['+', ['case', this.filter.${key}, 1, 0]],`)
+      }
+      extra.push('}')
+      this.block.mapLoad.push(`
+        ${buildSource.call(this, this.params, extra)}
+        map.addLayer(
+          ${createLayerCircle.call(this, this.params, filters)}
+        )
+        map.addLayer(
+          ${createLayerLabel.call(this, this.params)}
+        )
+        map.on('data', e => {
+          if (e.sourceId !== '${this.params.attr.name}' || !e.isSourceLoaded) return
+          map.on('move', () => { this.updateMarkers() })
+          map.on('moveend', () => { this.updateMarkers() })
+          updateMarkers()
+        })
+      `)
+      this.block.reactive.push(
+        `colors: ${jsonStringify(colors, true)}`,
+        `filter: ${jsonStringify(filters, true)}`,
+        `updateMarkers () {
+          const filter = Alpine.raw(this.filter)
+          const colors = Alpine.raw(this.colors)
+          wmaps.updateClusterMarkers({
+            sourceId: '${this.params.attr.name}',
+            clusterKey: '${this.params.attr.clusterKey}',
+            clusterIdKey: '${this.params.attr.clusterIdKey}',
+            handler: function (props) {
+              return donutChart.create(props, Object.keys(filter), colors)
+            }
+          })
+        }`
+      )
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default layerHtmlCluster