waibu-maps 1.0.1

package/waibuStatic/asset/css/control-mouse-position.css

@@ -0,0 +1,21 @@
+.maplibregl-ctrl-mouse-position {
+  background-color: #fff;
+  border-radius: 12px;
+  box-sizing: content-box;
+  color: #000;
+  margin: 10px;
+  min-height: 20px;
+  padding: 2px 8px 2px 8px;
+  position: relative;
+}
+
+.maplibregl-ctrl-mouse-position-lat-lng {
+  display: inline-block;
+  width: 80px;
+  white-space: nowrap;
+}
+
+.maplibregl-ctrl-mouse-position-lat-lng.dms {
+  width: 120px;
+}
+

package/waibuStatic/asset/css/control-ruler.css

@@ -0,0 +1,12 @@
+.maplibregl-ctrl-ruler button.active img {
+  background-color: orange;
+}
+
+.maplibregl-ctrl-ruler button.disabled img {
+  background-color: silver;
+}
+
+[data-bs-theme=dark] .maplibregl-ctrl-ruler img {
+  filter: invert(1);
+}
+

package/waibuStatic/asset/css/control-search.css

@@ -0,0 +1,25 @@
+.maplibregl-ctrl-search {
+  z-index: 1000;
+  position: absolute;
+  width: 100%;
+  top: 10px;
+  pointer-events: none;
+}
+
+.maplibregl-ctrl-search input {
+  pointer-events: all;
+  border: none;
+}
+
+.maplibregl-ctrl-search input:focus {
+  outline: none;
+}
+
+.maplibregl-ctrl-search .maplibregl-ctrl {
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+}

package/waibuStatic/asset/css/wmaps.css

@@ -0,0 +1,150 @@
+[data-bs-theme=dark] .maplibregl-ctrl-group,
+[data-bs-theme=dark] .maplibregl-ctrl-attrib,
+[data-bs-theme=dark] .maplibregl-ctrl-scale,
+[data-bs-theme=dark] .maplibregl-popup-content,
+[data-bs-theme=dark] .maplibregl-ctrl-widget,
+[data-bs-theme=dark] .maplibregl-ctrl-mouse-position {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+
+[data-bs-theme=dark] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+[data-bs-theme=dark] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
+[data-bs-theme=dark] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+  border-top-color: var(--bs-body-bg);
+}
+[data-bs-theme=dark] .maplibregl-popup-anchor-left .maplibregl-popup-tip {
+  border-right-color: var(--bs-body-bg);
+}
+[data-bs-theme=dark] .maplibregl-popup-anchor-right .maplibregl-popup-tip  {
+  border-left-color: var(--bs-body-bg);
+}
+[data-bs-theme=dark] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
+[data-bs-theme=dark] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
+[data-bs-theme=dark] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+  border-bottom-color: var(--bs-body-bg);
+}
+
+[data-bs-theme=dark] .maplibregl-ctrl-attrib a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))
+}
+
+[data-bs-theme=dark] .maplibregl-ctrl button .maplibregl-ctrl-icon,
+[data-bs-theme=dark] .maplibregl-ctrl-attrib-button {
+  filter: invert(100%);
+}
+
+[data-bs-theme=dark] .maplibregl-ctrl-group button+button {
+  border-top: 1px solid #5c5c5c;
+}
+
+[data-bs-theme=dark] .maplibregl-ctrl-wmaps.widget {
+  background-color: rgba(33, 37, 41, 0.85) !important;
+}
+
+.maplibregl-ctrl-wmaps.widget {
+  background-color: rgba(255, 255, 255, 0.85) !important;
+}
+
+.maplibregl-ctrl-wmaps.widget .smaller {
+  font-size: smaller;
+}
+
+.maplibregl-ctrl-loader {
+  z-index: 1000;
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  pointer-events: none;
+}
+
+.maplibregl-ctrl-group button.btn {
+  background-color: var(--bs-btn-bg);
+  width: auto;
+  height: auto;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+}
+
+.maplibregl-ctrl-group button.btn:hover {
+  background-color: var(--bs-btn-hover-bg);
+}
+
+.maplibregl-popup {
+  max-width: 300px !important;
+}
+
+.maplibregl-ctrl-attrib {
+  margin: 0px 10px 10px !important;
+}
+
+.maplibregl-ctrl-group > button {
+  width: 35px !important;
+  height: 35px !important;
+}
+
+.maplibregl-ctrl-group > button i {
+  font-size: 16pt;
+}
+
+.maplibregl-ctrl-group button.accordion-button {
+  height: auto !important;
+}
+
+.maplibregl-ctrl-group .accordion-header button {
+  width: 100%;
+  display: flex;
+}
+
+.maplibregl-ctrl-group .accordion-body .form-check-label {
+  white-space: nowrap;;
+}
+
+.maplibregl-ctrl-group .dropdown-menu > div {
+  font-size: smaller;
+}
+
+.maplibregl-popup-content div span {
+  display: inline-block;
+}
+
+.maplibregl-popup-content div span.label {
+  min-width: 80px;
+}
+
+.maplibregl-popup-content .btn-sm {
+  padding: 0.1rem 0.3rem;
+  font-size: small;
+}
+
+.maplibregl-popup-content .nav-link {
+  outline: none !important;
+  padding: 0.3rem 0.5rem;
+}
+
+.maplibregl-popup-content .nav {
+  padding: 0 0.5rem;
+}
+
+.maplibregl-ctrl-group.cmp {
+  width:240px;
+}
+
+.maplibregl-ctrl-group.cgr button img {
+  width: 35px;
+  height: 35px;
+  opacity: 0.75;
+}
+
+.maplibregl-ctrl-group.cgr button img:hover {
+  opacity: 1;
+}
+
+.maplibregl-ctrl-group.cgr button:first-child img {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.maplibregl-ctrl-group.cgr button:last-child img {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}

package/waibuStatic/asset/image/center.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 99.999998 99.999998"
+   xml:space="preserve">
+   <g><circle
+       r="3.9234731"
+       cy="50.21946"
+       cx="50.027821"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+       d="m 4.9734042,54.423642 31.7671398,0 c 2.322349,0 4.204185,-1.881836 4.204185,-4.204185 0,-2.322349 -1.881836,-4.204184 -4.204185,-4.204184 l -31.7671398,0 c -2.3223489,-2.82e-4 -4.20418433,1.881554 -4.20418433,4.204184 0,2.322631 1.88183543,4.204185 4.20418433,4.204185 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+       d="m 54.232003,5.1650429 c 0,-2.3223489 -1.881836,-4.20418433 -4.204184,-4.20418433 -2.322349,0 -4.204185,1.88183543 -4.204185,4.20418433 l 0,31.7671401 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322348,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.7671401 z"
+       style="fill:#000000;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+       d="m 99.287826,50.219457 c 0,-2.322349 -1.881835,-4.204184 -4.204184,-4.204184 l -31.76714,0 c -2.322349,0 -4.204184,1.881835 -4.204184,4.204184 0,2.322349 1.881835,4.204185 4.204184,4.204185 l 31.76714,0 c 2.320658,0 4.204184,-1.881836 4.204184,-4.204185 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+       d="m 45.823352,95.27359 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322349,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.76714 c 0,-2.322349 -1.881835,-4.204185 -4.204184,-4.204185 -2.322349,0 -4.204185,1.881836 -4.204185,4.204185 l 0,31.76714 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /></g></svg>

package/waibuStatic/asset/image/ruler.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 22 12" fill="#505050">
+    <path fill-rule="evenodd" fill="none" d="M-1-6h24v24H-1z"/>
+    <path d="M20 0H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 10H2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v8z"/>
+</svg>

package/waibuStatic/asset/js/control-buttons.js

@@ -0,0 +1,98 @@
+/* global _, wmpa */
+
+class ControlButtons { // eslint-disable-line no-unused-vars
+  constructor (options = {}) {
+    this.position = options.position ?? 'top-left'
+    this.items = options.items ?? []
+    this.scopeId = options.scopeId
+  }
+
+  createButtons () {
+    for (const b of this.items) {
+      const btn = document.createElement('button')
+      btn.setAttribute('type', 'button')
+      if (b.class) btn.classList.add(...b.class.split(' '))
+      for (const attr in b.attrib ?? {}) {
+        btn.setAttribute(_.kebabCase(attr), b.attrib[attr])
+      }
+      if (b.imageUrl) {
+        const img = document.createElement('img')
+        img.src = b.imageUrl
+        btn.appendChild(img)
+      } else if (b.icon) {
+        const icon = document.createElement('i')
+        icon.classList.add('d-flex', 'justify-content-center', 'align-items-center', ...b.icon.split(' '))
+        btn.appendChild(icon)
+      }
+      if (b.dropdown) {
+        const wrapper = this.createDropdown(btn, b)
+        this.container.appendChild(wrapper)
+      } else if (!_.get(b, 'attrib.dataBsTarget')) {
+        if (b.fn) this.buildOnClick(btn, b)
+        else if (b.url && b.newTab) btn.setAttribute('onclick', 'window.open(\'' + b.url + '\', \'_blank\')')
+        else if (b.url) btn.setAttribute('onclick', 'location.href=\'' + b.url + '\'')
+        this.container.appendChild(btn)
+      } else {
+        this.container.appendChild(btn)
+      }
+      if (b.minZoom) {
+        if (this.map.getZoom() < b.minZoom) btn.setAttribute('disabled', '')
+        this.map.on('zoomend', () => {
+          if (this.map.getZoom() < b.minZoom) btn.setAttribute('disabled', '')
+          else btn.removeAttribute('disabled')
+        })
+      }
+    }
+  }
+
+  createDropdown (btn, b) {
+    const wrapper = document.createElement('button')
+    wrapper.setAttribute('id', b.id)
+    this.buildOnClick(wrapper, b)
+    wrapper.classList.add('dropdown')
+    const pos = this.position.split('-')[1] === 'right' ? 'start' : 'end'
+    wrapper.classList.add('drop' + pos)
+    btn.setAttribute('data-bs-toggle', 'dropdown')
+    btn.setAttribute('data-bs-auto-close', 'outside')
+    const menu = document.createElement('div')
+    menu.classList.add('dropdown-menu')
+    wrapper.appendChild(btn)
+    wrapper.appendChild(menu)
+    return wrapper
+  }
+
+  createControl () {
+    this.container = document.createElement('div')
+    this.container.classList.add('maplibregl-ctrl', 'maplibregl-ctrl-group', 'maplibregl-ctrl-buttons')
+    this.createButtons()
+  }
+
+  buildOnClick (btn, opts) {
+    let [ns, method, subMethod] = opts.fn.split('.')
+    if (!method) {
+      method = ns
+      ns = 'window'
+    }
+    if (ns === 'scope') {
+      btn.addEventListener('click', evt => {
+        if (!(this.scopeId && wmpa)) return
+        const fn = wmpa.alpineScopeMethod('#' + this.scopeId, method)
+        if (fn) fn(opts.fnParams)
+      })
+    } else {
+      const params = opts.fnParams ? `'${opts.fnParams}'` : ''
+      btn.setAttribute('onclick', `${ns}['${method}']${subMethod ? `['${subMethod}'` : ''}(${params})`)
+    }
+  }
+
+  onAdd (map) {
+    this.map = map
+    this.createControl()
+    return this.container
+  }
+
+  onRemove () {
+    this.container.parentNode.removeChild(this.container)
+    this.map = undefined
+  }
+}

package/waibuStatic/asset/js/control-center-position.js

@@ -0,0 +1,19 @@
+class ControlCenterPosition { // eslint-disable-line no-unused-vars
+  createControl () {
+    this.container = document.createElement('div')
+    this.container.classList.add('maplibregl-ctrl')
+    this.container.classList.add('maplibregl-ctrl-center')
+    this.icon = document.createElement('div')
+  }
+
+  onAdd (map) {
+    this.map = map
+    this.createControl()
+    return this.container
+  }
+
+  onRemove () {
+    this.container.parentNode.removeChild(this.container)
+    this.map = undefined
+  }
+}

package/waibuStatic/asset/js/control-mouse-position.js

@@ -0,0 +1,47 @@
+/* global maplibregl */
+
+function defaultLabelFormat ({ lng, lat }) {
+  return `Lng: ${lng}, Lat: ${lat}`
+}
+
+class ControlMousePosition { // eslint-disable-line no-unused-vars
+  constructor (options) {
+    this.digits = options.digits || 5
+    this.trackCenter = options.trackCenter || false
+    this.labelFormat = options.labelFormat || defaultLabelFormat
+    this.coord = new maplibregl.LngLat(0, 0)
+  }
+
+  createControl () {
+    this.container = document.createElement('div')
+    this.container.classList.add('maplibregl-ctrl', 'maplibregl-ctrl-mouse-position')
+    this.panel = document.createElement('div')
+    this.panel.classList.add('maplibregl-ctrl-attrib-inner')
+    if (this.trackCenter) this.onMouseMove()
+    else this.panel.innerHTML = this.labelFormat({ lng: '', lat: '', lngLat: null, map: this.map })
+    this.container.appendChild(this.panel)
+  }
+
+  onMouseMove (evt) {
+    if (this.trackCenter) this.coord = this.map.getCenter().wrap()
+    else this.coord = evt.lngLat.wrap()
+    const lng = (this.coord.lng < 0 ? '-' : '') + Math.abs(this.coord.lng).toFixed(this.digits)
+    const lat = (this.coord.lat < 0 ? '-' : '') + Math.abs(this.coord.lat).toFixed(this.digits)
+    this.panel.innerHTML = this.labelFormat({ lng, lat, lngLat: this.coord, map: this.map })
+  }
+
+  onAdd (map) {
+    this.map = map
+    this.createControl()
+    if (this.trackCenter) this.map.on('move', this.onMouseMove.bind(this))
+    else this.map.on('mousemove', this.onMouseMove.bind(this))
+    return this.container
+  }
+
+  onRemove () {
+    if (this.trackCenter) this.map.off('move', this.onMouseMove.bind(this))
+    else this.map.off('mousemove', this.onMouseMove.bind(this))
+    this.container.parentNode.removeChild(this.container)
+    this.map = undefined
+  }
+}

package/waibuStatic/asset/js/control-ruler.js

@@ -0,0 +1,204 @@
+// Based on: https://raw.githubusercontent.com/bravecow/maplibre-gl-controls/master/src/ruler/ruler.js
+/* global maplibregl, geolib */
+
+const LAYER_LINE = 'controls-layer-line'
+const SOURCE_LINE = 'controls-source-line'
+const MAIN_COLOR = '#263238'
+const HALO_COLOR = '#fff'
+const HALO1_COLOR = '#0f0'
+
+function geoLineString (coordinates = []) {
+  return {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates
+    }
+  }
+}
+
+function defaultLabelFormat (delta, sum, units) {
+  return `+ ${delta.toFixed(2)} ${units}<br/>= ${sum.toFixed(2)} ${units}`
+}
+
+class ControlRuler { // eslint-disable-line no-unused-vars
+  constructor (options = {}) {
+    this.isMeasuring = false
+    this.enabled = true
+    this.markers = []
+    this.coordinates = []
+    this.labels = []
+    this.imageUrl = options.imageUrl
+    this.units = options.units || 'km'
+    // this.font = options.font || ['Noto Sans Regular']
+    this.fontSize = options.fontSize || 12
+    this.fontHalo = options.fontHalo || 1
+    this.labelFormat = options.labelFormat || defaultLabelFormat
+    this.mainColor = options.mainColor || MAIN_COLOR
+    this.secondaryColor = options.secondaryColor || HALO_COLOR
+    this.altColor = options.altColor || HALO1_COLOR
+    this.mapClickListener = this.mapClickListener.bind(this)
+    this.styleLoadListener = this.styleLoadListener.bind(this)
+  }
+
+  insertControls () {
+    this.container = document.createElement('div')
+    this.container.classList.add('maplibregl-ctrl')
+    this.container.classList.add('maplibregl-ctrl-group')
+    this.container.classList.add('maplibregl-ctrl-ruler')
+    this.button = document.createElement('button')
+    this.button.setAttribute('type', 'button')
+    const img = document.createElement('img')
+    img.src = this.imageUrl
+    this.button.appendChild(img)
+    this.container.appendChild(this.button)
+  }
+
+  setUnits (units) {
+    this.units = units
+  }
+
+  draw () {
+    this.map.addSource(SOURCE_LINE, {
+      type: 'geojson',
+      data: geoLineString(this.coordinates)
+    })
+
+    this.map.addLayer({
+      id: LAYER_LINE,
+      type: 'line',
+      source: SOURCE_LINE,
+      paint: {
+        'line-color': this.mainColor,
+        'line-width': 2
+      }
+    })
+  }
+
+  measuringOn () {
+    this.isMeasuring = true
+    this.markers = []
+    this.coordinates = []
+    this.labels = []
+    this.map.getCanvas().style.cursor = 'crosshair'
+    this.button.classList.add('active')
+    this.draw()
+    this.map.on('click', this.mapClickListener)
+    this.map.on('style.load', this.styleLoadListener)
+    this.map.fire('ruler.on')
+  }
+
+  measuringOff () {
+    this.isMeasuring = false
+    this.map.getCanvas().style.cursor = ''
+    this.button.classList.remove('active')
+    if (this.map.getLayer(LAYER_LINE)) this.map.removeLayer(LAYER_LINE)
+    if (this.map.getSource(SOURCE_LINE)) this.map.removeSource(SOURCE_LINE)
+    this.markers.forEach((m) => m.remove())
+    this.map.off('click', this.mapClickListener)
+    this.map.off('style.load', this.styleLoadListener)
+    this.map.fire('ruler.off')
+  }
+
+  enable () {
+    this.enabled = true
+    this.button.classList.remove('disabled')
+  }
+
+  disable () {
+    this.enabled = false
+    this.measuringOff()
+    this.button.classList.add('disabled')
+  }
+
+  mapClickListener (event) {
+    const markerNode = document.createElement('div')
+    markerNode.style.width = '12px'
+    markerNode.style.height = '12px'
+    markerNode.style.borderRadius = '50%'
+    markerNode.style.background = this.markers.length === 0 ? this.altColor : this.secondaryColor
+    markerNode.style.boxSizing = 'border-box'
+    markerNode.style.border = `2px solid ${this.mainColor}`
+    const marker = new maplibregl.Marker({
+      element: markerNode,
+      draggable: true
+    })
+      .setLngLat(event.lngLat)
+      .addTo(this.map)
+    this.coordinates.push([event.lngLat.lng, event.lngLat.lat])
+    this.map.getSource(SOURCE_LINE).setData(geoLineString(this.coordinates))
+    this.markers.push(marker)
+    if (this.markers.length > 1) {
+      this.labels = this.coordinatesToLabels()
+      marker.setPopup(new maplibregl.Popup({ closeButton: false, closeOnClick: false }))
+      marker.togglePopup()
+      marker.getPopup().setHTML(this.labels[this.markers.length - 1])
+    }
+    marker.on('drag', () => {
+      const index = this.markers.indexOf(marker)
+      const lngLat = marker.getLngLat()
+      this.coordinates[index] = [lngLat.lng, lngLat.lat]
+      this.recalcPopup()
+      this.map.getSource(SOURCE_LINE).setData(geoLineString(this.coordinates))
+    })
+  }
+
+  recalcPopup () {
+    this.labels = this.coordinatesToLabels()
+    this.labels.forEach((l, i) => {
+      const popup = this.markers[i].getPopup()
+      if (popup) popup.setHTML(l)
+    })
+  }
+
+  coordinatesToLabels () {
+    const { coordinates, units, labelFormat } = this
+    let sum = 0
+    return coordinates.map((coordinate, index) => {
+      if (index === 0) return labelFormat(0, 0, units)
+      let delta = geolib.getDistance({
+        latitude: coordinates[index - 1][1],
+        longitude: coordinates[index - 1][0]
+      }, {
+        latitude: coordinates[index][1],
+        longitude: coordinates[index][0]
+      }) / 1000
+      if (units === 'mi') {
+        delta = delta * 0.621371
+      } else if (units === 'nm') {
+        delta = delta * 0.539957
+      }
+      sum += delta
+      return labelFormat(delta, sum, units)
+    })
+  }
+
+  styleLoadListener () {
+    this.draw()
+  }
+
+  onButtonClick () {
+    if (!this.enabled) return
+    if (this.isMeasuring) this.measuringOff()
+    else this.measuringOn()
+    this.map.fire('ruler.buttonclick', { measuring: this.isMeasuring })
+  }
+
+  onAdd (map) {
+    this.map = map
+    this.insertControls()
+    this.button.addEventListener('click', this.onButtonClick.bind(this))
+    return this.container
+  }
+
+  onRemove () {
+    if (this.isMeasuring) {
+      this.measuringOff()
+    }
+    this.button.removeEventListener('click', this.onButtonClick.bind(this))
+    this.map.off('click', this.mapClickListener)
+    this.container.parentNode.removeChild(this.container)
+    this.map = undefined
+  }
+}

package/waibuStatic/asset/js/donut-chart.js

@@ -0,0 +1,58 @@
+// based on: https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
+
+class DonutCharts {
+  create (props, itemCounts, colors) {
+    const offsets = []
+    const counts = []
+    for (const ic of itemCounts) {
+      counts.push(props[ic])
+    }
+    let total = 0
+    for (const count of counts) {
+      offsets.push(total)
+      total += count
+    }
+    const fontSize = total >= 1000 ? 22 : total >= 100 ? 20 : total >= 10 ? 18 : 16
+    const r = total >= 1000 ? 50 : total >= 100 ? 32 : total >= 10 ? 24 : 18
+    const r0 = Math.round(r * 0.6)
+    const w = r * 2
+
+    let html = `<div><svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}"
+      text-anchor="middle" style="font: ${fontSize}px sans-serif; display: block">`
+    for (let i = 0; i < counts.length; i++) {
+      html += this.donutSegment(
+        offsets[i] / total,
+        (offsets[i] + counts[i]) / total,
+        r,
+        r0,
+        colors[i]
+      )
+    }
+    html += `<circle cx="${r}" cy="${r}" r="${r0}" fill="white" />
+      <text dominant-baseline="central" transform="translate(${r}, ${r})">
+        ${total.toLocaleString()}
+      </text></svg></div>`
+
+    const el = document.createElement('div')
+    el.innerHTML = html
+    return el.firstChild
+  }
+
+  donutSegment (start, end, r, r0, color) {
+    if (end - start === 1) end -= 0.00001
+    const a0 = 2 * Math.PI * (start - 0.25)
+    const a1 = 2 * Math.PI * (end - 0.25)
+    const x0 = Math.cos(a0)
+    const y0 = Math.sin(a0)
+    const x1 = Math.cos(a1)
+    const y1 = Math.sin(a1)
+    const largeArc = end - start > 0.5 ? 1 : 0
+
+    // draw an SVG path
+    return `<path d="M ${r + r0 * x0} ${r + r0 * y0} L ${r + r * x0} ${r + r * y0} A
+      ${r} ${r} 0 ${largeArc} 1 ${r + r * x1} ${r + r * y1} L ${r + r0 * x1} ${r + r0 * y1} A
+      ${r0} ${r0} 0 ${largeArc} 0 ${r + r0 * x0} ${r + r0 * y0}" fill="${color}" />`
+  }
+}
+
+const donutChart = new DonutCharts() // eslint-disable-line no-unused-vars