waibu-maps 1.0.1

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

@@ -0,0 +1,44 @@
+export const opts = {
+  boolTrue: ['antialias', 'hash', 'maplibreLogo'],
+  boolFalse: ['noBoxZoom', 'noDoubleClickZoom', 'noDoubleClickZoom', 'noDragPan', 'noDragRotate',
+    'noInteractive', 'noKeyboard', 'noPitchWithRotate', 'noRenderWorldCopies', 'noScrollZoom',
+    'noTouchPitch', 'noTouchZoomRotate', 'noTrackResize', 'noValidateStyle'],
+  number: ['zoom', 'bearing', 'bearingSnap', 'clickTolerance', 'fadeDuration', 'maxPitch',
+    'maxZoom', 'minPitch', 'minZoom', 'pitch'],
+  array: ['center', 'bounds', 'maxBounds'],
+  string: ['basemap', 'attribution']
+}
+
+async function options (params = {}) {
+  const { camelCase, isString } = this.plugin.app.bajo.lib._
+  const { attrToArray } = this.plugin.app.waibuMpa
+  const { routePath } = this.plugin.app.waibu
+  const mapOpts = this.plugin.app.waibuMaps.getConfig().mapOptions
+  mapOpts.container = params.attr.id
+  const { $ } = this.component
+  for (const key in params.attr) {
+    const val = params.attr[key]
+    if (val === true) {
+      if (opts.boolTrue.includes(key)) mapOpts[key] = true
+      if (opts.boolFalse.includes(key)) mapOpts[camelCase(key.slice(2))] = false
+    } else {
+      if (opts.number.includes(key)) mapOpts[key] = Number(val)
+      else if (opts.array.includes(key)) mapOpts[key] = attrToArray(val).map(v => Number(v))
+      else if (opts.string.includes(key)) mapOpts[key] = val
+    }
+  }
+  if (params.attr.noBasemap) {
+    delete mapOpts.style
+  } else {
+    if (isString(params.attr.basemap)) mapOpts.style = params.attr.basemap
+    else mapOpts.style = 'waibuMaps:/default-style.json'
+    mapOpts.style = routePath(mapOpts.style)
+  }
+  mapOpts.attributionControl = true
+  $(`<div>${params.html}</div>`).find('script[block="control"]:contains(\'AttributionControl\')').each(function () {
+    mapOpts.attributionControl = false
+  })
+  return mapOpts
+}
+
+export default options

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

@@ -0,0 +1,139 @@
+import wmapsBase from '../wmaps-base.js'
+
+import options from './map/options.js'
+
+/*
+const loadResource = `async loadResource (src) {
+  const resp = await fetch(src)
+  if (!resp.ok) throw new Error('Can\\'t load resource: ' + src)
+  return resp.json()
+}`
+*/
+
+async function map () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsMap extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.readBlock()
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { without, omit, isString } = this.plugin.app.bajo.lib._
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { $ } = this.component
+
+      this.params.attr.id = 'map' + (isString(this.params.attr.id) ? this.params.attr.id : generateId('alpha'))
+      this.params.tag = 'div'
+      this.params.attr['x-data'] = this.params.attr.id
+      this.params.attr['@keyup'] = 'onKeyup'
+      const mapOptions = await options.call(this, this.params)
+      this.block.reactive.push(`
+        async windowLoad () {
+          const mapOpts = ${jsonStringify(mapOptions, true)}
+          ${this.block.mapOptions.join('\n')}
+          await this.run(new maplibregl.Map(mapOpts))
+        }
+      `)
+      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
+            ${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 () {
+                ${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.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
+                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>`
+      const html = []
+      $(`<div>${this.params.html}</div>`).find('.childmap').each(function () {
+        html.push($(this).prop('outerHTML'))
+      })
+      this.params.html = html.join('\n')
+      const keys = without(Object.keys(mapOptions), 'style')
+      const omitted = ['noBasemap', ...keys]
+      this.params.attr = omit(this.params.attr, omitted)
+    }
+  }
+}
+
+export default map

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

@@ -0,0 +1,20 @@
+import wmapsBase from '../wmaps-base.js'
+
+async function script () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsScript extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const type = WmapsBase.blockTypes.includes(this.params.attr.type) ? this.params.attr.type : 'run'
+      this.block[type].push(this.params.html)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default script

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

@@ -0,0 +1,10 @@
+import wmapsBase from '../wmaps-base.js'
+
+async function template () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsTemplate extends WmapsBase {
+  }
+}
+
+export default template

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

@@ -0,0 +1,40 @@
+async function wmapsBase () {
+  return class WmapsBase extends this.baseFactory {
+    static scripts = [...super.scripts,
+      'waibuMaps.asset:/js/lib/worker-timers.js',
+      'waibuMaps.virtual:/maplibre/maplibre-gl.js',
+      'waibuMaps:/wmaps.js'
+    ]
+
+    static css = [...super.css,
+      'waibuMaps.virtual:/maplibre/maplibre-gl.css',
+      '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']
+
+    async getWmapsTemplate (html, type, defEmpty = '') {
+      const { trim, isEmpty } = this.plugin.app.bajo.lib._
+      const { minify } = this.plugin.app.waibuMpa
+      const { $ } = this.component
+      let tpl = trim($(`<div>${html}</div>`).find(`wmaps-template[type="${type}"]`).prop('innerHTML'))
+      if (isEmpty(tpl)) {
+        if (defEmpty === 'popup') tpl = '<div class="px-3 py-2">{%= name %}</div>'
+        else tpl = defEmpty
+      }
+      return await minify(tpl)
+    }
+  }
+}
+
+export default wmapsBase

package/waibuMpa/partial/menu.html

@@ -0,0 +1,10 @@
+<c:div dim="height:100" flex="align-items:center justify-content:center" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+  {% if (image !== '') { %}
+  <c:img src="{%= image %}" />
+  {% } else { %}
+  <c:icon oname="{%= icon %}" @click="{%= click %}" />
+  {% } %}
+</c:div>
+<c:div class="dropdown-menu">
+  {%= html %}
+</c:div>

package/waibuMpa/route/default-style.js

@@ -0,0 +1,13 @@
+export const glyphUrl = 'waibuMaps.asset:/font/noto_sans_regular.pbf?s={fontstack}&r={range}'
+
+const wmaps = {
+  url: '/default-style.json',
+  method: 'GET',
+  handler: async function (req, reply) {
+    const { routePath } = this.app.waibu
+    const glyphs = routePath(glyphUrl)
+    return reply.view('waibuMaps.template:/default-style.json', { glyphs })
+  }
+}
+
+export default wmaps

package/waibuMpa/route/wmaps.js

@@ -0,0 +1,13 @@
+import { glyphUrl } from './default-style.js'
+
+const wmaps = {
+  url: '/wmaps.js',
+  method: 'GET',
+  handler: async function (req, reply) {
+    const { routePath } = this.app.waibu
+    const glyphs = routePath(glyphUrl)
+    return reply.view('waibuMaps.template:/wmaps.js', { glyphs })
+  }
+}
+
+export default wmaps

package/waibuMpa/template/default-style.json

@@ -0,0 +1,20 @@
+{
+  "version": 8,
+  "glyphs": "<%= glyphs %>",
+  "sources": {
+    "osm": {
+      "type": "raster",
+      "tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
+      "tileSize": 256,
+      "attribution": "&copy; OpenStreetMap Contributors",
+      "maxzoom": 19
+    }
+  },
+  "layers": [
+    {
+      "id": "osm",
+      "type": "raster",
+      "source": "osm"
+    }
+  ]
+}

package/waibuMpa/template/wmaps.js

@@ -0,0 +1,320 @@
+/* global maplibregl, geolib, _, wmpa, WorkerTimers, turf, Alpine */
+
+class WaibuMaps { // eslint-disable-line no-unused-vars
+  constructor (map, scope) {
+    this.map = map
+    this.scope = scope
+    this.markers = {}
+    this.markersOnScreen = {}
+    this.popup = null
+  }
+
+  async handleClusterClick (layerId, clusterId = 'cluster_id') {
+    this.handlePointer(layerId)
+    this.map.on('click', layerId, async (e) => {
+      const features = this.map.queryRenderedFeatures(e.point, {
+        layers: [layerId]
+      })
+      const id = features[0].properties[clusterId]
+      const layer = this.map.getLayer(layerId)
+      const zoom = await this.map.getSource(layer.source).getClusterExpansionZoom(id)
+      this.map.easeTo({
+        center: features[0].geometry.coordinates,
+        zoom
+      })
+    })
+  }
+
+  async createPopupHtml ({ props, handler, coordinates, layerId }, evt) {
+    let html = _.isString(handler) ? handler : undefined
+    if (_.isFunction(handler)) html = await handler.call(this, { props, coordinates, layerId }, evt)
+    if (!html) html = props.name ?? props.title ?? props.description ?? ''
+    return html
+  }
+
+  getEventCoordinates (evt) {
+    let coordinates = evt.features[0].geometry.coordinates.slice()
+    if (_.isArray(coordinates[0])) {
+      const centroid = turf.centroid(evt.features[0])
+      coordinates = centroid.geometry.coordinates
+    }
+    while (Math.abs(evt.lngLat.lng - coordinates[0]) > 180) {
+      coordinates[0] += evt.lngLat.lng > coordinates[0] ? 360 : -360
+    }
+    return coordinates
+  }
+
+  async extractPopup ({ evt, layerId, handler, props, coordinates }) {
+    props = props ?? evt.features[0].properties
+    coordinates = coordinates ?? this.getEventCoordinates(evt)
+    const html = await this.createPopupHtml({ props, handler, coordinates, layerId }, evt)
+    return { props, coordinates, html }
+  }
+
+  createPopup () {
+    if (!this.popup) {
+      this.popup = new maplibregl.Popup({
+        closeButton: false,
+        closeOnClick: false
+      })
+    }
+    return this.popup
+  }
+
+  async handleNonClusterClick (layerId, handler = 'name') {
+    if (handler === true) handler = 'name'
+    this.handlePointer(layerId)
+    this.map.on('click', layerId, async evt => {
+      const { coordinates, html, props } = await this.extractPopup({ evt, layerId, handler })
+      const popup = this.createPopup()
+      popup._props = props
+      popup._coordinates = coordinates
+      popup
+        .setLngLat(coordinates)
+        .setHTML(html)
+        .addTo(this.map)
+        .addClassName('popup-layer-' + layerId)
+        .addClassName('popup-target-' + props.id + '-' + props.feed)
+    })
+    this.map.on('click', () => {
+      if (this.popup) this.popup.remove()
+    })
+  }
+
+  popup ({ layerId, props, html, coordinates }) {
+    return new maplibregl.Popup({ className: 'popup-layer-' + layerId + ' popup-target-' + props.id })
+      .setLngLat(coordinates)
+      .setHTML(html)
+      .addTo(this.map)
+  }
+
+  updateClusterMarkers ({ sourceId, clusterKey = 'cluster', clusterIdKey = 'clusterId', handler }) {
+    if (!handler) return
+    const newMarkers = {}
+    const features = this.map.querySourceFeatures(sourceId)
+
+    for (let i = 0; i < features.length; i++) {
+      const coords = features[i].geometry.coordinates
+      const props = features[i].properties
+      if (!props[clusterKey]) continue
+      const id = props[clusterIdKey]
+
+      let marker = this.markers[id]
+      if (!marker) {
+        const el = handler(props)
+        marker = this.markers[id] = new maplibregl.Marker({
+          element: el
+        }).setLngLat(coords)
+      }
+      newMarkers[id] = marker
+
+      if (!this.markersOnScreen[id]) marker.addTo(this.map)
+    }
+    for (const id in this.markersOnScreen) {
+      if (!newMarkers[id]) this.markersOnScreen[id].remove()
+    }
+    this.markersOnScreen = newMarkers
+  }
+
+  handlePointer (layerId) {
+    this.map.on('mouseenter', layerId, () => {
+      this.map.getCanvas().style.cursor = 'pointer'
+    })
+    this.map.on('mouseleave', layerId, () => {
+      this.map.getCanvas().style.cursor = ''
+    })
+  }
+
+  closePopup () {
+    if (this.popup) this.popup.remove()
+  }
+
+  async loadImage (src) {
+    if (_.isString(src)) {
+      const [url, id] = src.split(';')
+      src = { url, id }
+    }
+    if (!src.id) src.id = _.last(src.url.split('?')[0].split('#')[0].split('/')).split('.')[0]
+    if (this.map.listImages().includes(src.id)) return
+    const image = await this.map.loadImage(src.url)
+    this.map.addImage(src.id, image.data)
+  }
+
+  async loadImages (sources, fetch = true) {
+    for (const src of sources) {
+      if (fetch) {
+        const data = await wmpa.fetchApi(src)
+        if (_.isEmpty(data)) continue
+        for (const d of data) {
+          this.loadImage(d)
+        }
+      } else await this.loadImage(src)
+    }
+  }
+
+  async createControl (options = {}) {
+    const ctrl = new WaibuMapsControl(options)
+    ctrl.scope = this.scope
+    if (options.builder) {
+      if (_.isArray(options.builder)) ctrl.panels = options.builder
+      else if (_.isString(options.builder)) {
+        ctrl.panels = await wmpa.createComponent(options.builder)
+      } else {
+        const fn = options.builder.bind(ctrl.scope)
+        ctrl.panels = await fn(options.params)
+      }
+    }
+    this.map.addControl(ctrl)
+    if (options.firstCall) options.firstCall.call(ctrl.scope)
+    return ctrl
+  }
+
+  async createControlNative (className, options = {}) {
+    const name = wmpa.pascalCase(className)
+    const ctrl = new maplibregl[name](options)
+    let type = options.classSelector
+    if (!type) {
+      const types = _.kebabCase(className).split('-')
+      types.pop()
+      type = 'maplibregl-ctrl-' + types.join('-')
+    }
+    this.map.addControl(ctrl, options.position)
+    let el = document.querySelector('#' + this.map._container.id + ' .' + type)
+    if (el) {
+      if (options.classGroup) el = el.closest('.maplibregl-ctrl-group')
+      el.setAttribute('oncontextmenu', 'return false')
+      el.setAttribute('x-data', '')
+      el.setAttribute('x-show', '$store.map.ctrl' + name)
+    }
+  }
+}
+
+class WaibuMapsUtil {
+  constructor () {
+    this.defSources = {
+      type: 'raster',
+      tileSize: 256,
+      maxzoom: 19,
+      attribution: 'Waibu Maps'
+    }
+
+    this.defLayer = {
+      type: 'raster'
+    }
+
+    this.defStyle = {
+      version: 8,
+      glyphs: '<%= glyphs %>',
+      sources: {},
+      layers: []
+    }
+  }
+
+  decToDms (decimal, opts = {}) {
+    if (opts === true || opts === false) opts = { isLng: opts }
+    opts.north = opts.north ?? 'N'
+    opts.south = opts.south ?? 'S'
+    opts.east = opts.east ?? 'E'
+    opts.west = opts.west ?? 'W'
+    const result = geolib.decimalToSexagesimal(decimal)
+    if (opts.isLng) return result + ' ' + (decimal >= 0 ? opts.east : opts.west)
+    else return result + ' ' + (decimal >= 0 ? opts.north : opts.south)
+  }
+
+  getSourceId (id, ext) {
+    return 's-' + _.kebabCase(id) + (_.isEmpty(ext) ? '' : ('-' + ext))
+  }
+
+  getLayerId (id, ext = '') {
+    return 'l-' + _.kebabCase(id) + (_.isEmpty(ext) ? '' : ('-' + ext))
+  }
+
+  getSourceLayerIds (id, ext) {
+    return [this.getSourceId(id, ext), this.getLayerId(id, ext)]
+  }
+
+  srcAsStyle (src) {
+    if ((_.isPlainObject(src) && src.version && src.sources)) return src
+    const result = {}
+    if (_.isString(src)) {
+      const url = new URL(src)
+      const ext = _.last(url.pathname.split('.'))
+      if (ext === 'json') return src
+      const domain = _.camelCase(url.hostname)
+      const sources = {}
+      sources[domain] = _.merge({}, this.defSources, { tiles: [src], attribution: url.searchParams.get('attribution') ?? '' })
+      const layers = [_.merge({}, this.defLayer, { id: domain, source: domain })]
+      _.merge(result, this.defStyle, { sources, layers })
+    } else {
+      if (src.type === 'VECTOR') return src.url
+      if (!['RASTER'].includes(src.type)) throw new Error('Invalid source type')
+      const sources = {}
+      const sourceId = this.getSourceId(src.code)
+      const layerId = this.getLayerId(src.code)
+      sources[sourceId] = _.merge({}, this.defSources, { name: src.name, provider: src.provider, tiles: [src.url], attribution: src.attribution, minzoom: src.minZoom ?? 1, maxzoom: src.maxZoom ?? 19 })
+      const layers = [_.merge({}, this.defLayer, { id: layerId, source: sourceId })]
+      _.merge(result, this.defStyle, { sources, layers })
+    }
+    return result
+  }
+}
+
+class WaibuMapsControl { // eslint-disable-line no-unused-vars
+  constructor (options = {}) {
+    this.position = options.position ?? 'top-right'
+    this.class = options.class
+  }
+
+  createControl () {
+    this.container = document.createElement('div')
+    // this.container.setAttribute('oncontextmenu', 'return false')
+    this.container.classList.add('maplibregl-ctrl', 'maplibregl-ctrl-wmaps')
+    if (this.class) {
+      const classes = _.without(this.class.split(' '), '', null, undefined)
+      if (classes.length > 0) {
+        this.container.classList.add(...classes)
+        const ctrlName = 'ctrl' + wmpa.pascalCase(classes[0])
+        if (_.has(Alpine.store('map'), ctrlName)) {
+          this.container.setAttribute('x-show', 'Alpine.store(\'map\')[\'' + ctrlName + '\']') // first class will be used as control switch class
+        }
+      }
+    }
+    if (this.panels) {
+      if (!_.isArray(this.panels)) this.panels = [this.panels]
+      if (this.panels.length > 0) {
+        for (const panel of this.panels) {
+          this.container.appendChild(panel)
+        }
+      }
+    }
+  }
+
+  onAdd (map) {
+    this.map = map
+    this.createControl()
+    return this.container
+  }
+
+  onRemove () {
+    this.container.parentNode.removeChild(this.container)
+    this.map = undefined
+    this.scope = undefined
+  }
+
+  getDefaultPosition () {
+    return this.position
+  }
+}
+
+const wmapsUtil = new WaibuMapsUtil() // eslint-disable-line no-unused-vars
+
+// patch
+window.setInterval = WorkerTimers.setInterval
+window.clearInterval = WorkerTimers.clearInterval
+window.setTimeout = WorkerTimers.setTimeout
+window.clearTimeout = WorkerTimers.clearTimeout
+
+const _warn = console.warn
+console.warn = (...items) => {
+  if (!(items[0] ?? '').includes('could not be loaded. Please make sure you have added the image with')) _warn(...items)
+}

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

@@ -0,0 +1,3 @@
+.maplibregl-ctrl-buttons button i {
+  font-size: 16pt;
+}

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

@@ -0,0 +1,17 @@
+.maplibregl-ctrl-center {
+  z-index: 1000;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.maplibregl-ctrl-center div {
+  width: 50px;
+  height: 50px;
+  background-image: url(../image/center.svg)
+}

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

@@ -0,0 +1,7 @@
+.maplibregl-ctrl-loader {
+  z-index: 1000;
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  pointer-events: none;
+}