@kalisio/kdk 2.1.9 → 2.2.1

package/map/client/components/KTimeline.vue

@@ -1,293 +0,0 @@
-<template>
-  <div id="timeline" class="q-pa-xs column k-timeline">
-    <!--
-      Time controls
-     -->
-    <div class="full-width row justify-center items-center k-timeline-control">
-      <q-btn id="timeline-backward" v-if="$q.screen.gt.xs" dense flat round icon='las la-step-backward' size="md" color="primary" @click="onPreviousStepClicked">
-        <q-tooltip>{{$t('KTimeline.PREVIOUS_STEP')}}</q-tooltip>
-      </q-btn>
-      <q-btn id="timeline-date" dense flat round icon='las la-calendar' size="md" color="primary">
-        <q-tooltip>{{$t('KTimeline.SET_DATE')}}</q-tooltip>
-        <q-popup-proxy transition-show="scale" transition-hide="scale">
-          <q-date v-model="date" :mask="calendarDateMask" today-btn minimal />
-        </q-popup-proxy>
-      </q-btn>
-      <q-chip :label="formatTime(time, 'date.long') + ' ' + formatTime(time, 'time.long')" color="primary" text-color="white" :dense="$q.screen.lt.sm" />
-      <q-btn id="timeline-now" dense flat round icon="las la-clock" size="md" color="primary" @click="onNowClicked">
-        <q-tooltip>{{$t('KTimeline.SET_NOW')}}</q-tooltip>
-        <q-badge v-if="Time.realtime" floating transparent color="green">
-          <q-icon name="las la-play" size="10px" color="white'" />
-        </q-badge>
-      </q-btn>
-      <q-btn v-if="$q.screen.gt.xs" id="timeline-forward" dense flat round icon='las la-step-forward' size="md" color="primary" @click="onNextStepClicked">
-        <q-tooltip>{{$t('KTimeline.NEXT_STEP')}}</q-tooltip>
-      </q-btn>
-    </div>
-    <div v-if="!$q.screen.gt.xs" class="full-width row justify-around q-pt-xs">
-      <k-panel id="timeline-actions" :content="actions" mode="mobile" color="primary" />
-    </div>
-    <!--
-      Time bars
-     -->
-    <div v-if="$q.screen.gt.xs" class="q-pt-sm column">
-      <div v-if="minutes.length > 0" class="row justify-center items-center">
-        <template v-for="(minute, index) in minutes" :key="index">
-          <q-chip
-            :id="'timeline-minutes-' + index"
-            dense flat outline :size="$q.screen.gt.sm ? '12px' : '10px'"
-            :color="minute.color"
-            :text-color="minute.textColor"
-            :label="minute.label"
-            clickable @click="onMinutesClicked(index)" />
-        </template>
-      </div>
-      <div v-if="hours.length > 0" class="full-width row justify-center items-center">
-        <q-btn id="timeline-previous-hour" dense flat round icon='las la-angle-left' color="primary" @click="onPreviousHourClicked">
-          <q-tooltip>{{$t('KTimeline.PREVIOUS_HOUR')}}</q-tooltip>
-        </q-btn>
-        <template v-for="(hour, index) in hours" :key="index">
-          <div :id="'timeline-hours-' + index" :class="hour.class"
-            style="height: 25px" @click="onHourClicked(index, hours.length)">
-            {{hour.label}}
-          </div>
-        </template>
-        <q-btn id="timeline-next-hour" flat round icon='las la-angle-right'  color="primary" @click="onNextHourClicked">
-          <q-tooltip>{{$t('KTimeline.NEXT_HOUR')}}</q-tooltip>
-        </q-btn>
-      </div>
-      <div class="row justify-center items-center">
-        <q-btn id="timeline-previous-day" dense flat round icon='las la-calendar-minus' color="primary" @click="onPreviousDayClicked">
-          <q-tooltip>{{$t('KTimeline.PREVIOUS_DAY')}}</q-tooltip>
-        </q-btn>
-        <template v-for="(day, index) in days" :key="index">
-          <q-chip
-            :id="'timeline-days-' + index"
-            dense flat square outline size="md"
-            :color="day.color"
-            :text-color="day.textColor"
-            :label="day.label"
-            clickable @click="onDayClicked(index, days.length)" />
-        </template>
-        <q-btn id="timeline-next-day" dense flat round icon='las la-calendar-plus' color="primary" @click="onNextDayClicked">
-          <q-tooltip>{{$t('KTimeline.NEXT_DAY')}}</q-tooltip>
-        </q-btn>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import logger from 'loglevel'
-import moment from 'moment'
-import { Time } from '../../../core/client/time'
-import { KPanel } from '../../../core/client/components'
-
-export default {
-  name: 'k-timeline',
-  inject: ['kActivity'],
-  components: {
-    KPanel
-  },
-  data () {
-    return {
-      time: moment.utc(),
-      calendarDateMask: 'YYYY-MM-DD',
-      Time: Time.get()
-    }
-  },
-  computed: {
-    minutes () {
-      const minutes = []
-      if (this.Time.step < 60) {
-        const start = moment.utc(this.time).minute(0)
-        const end = moment.utc(this.time).minute(59)
-        for (let m = moment.utc(start); m.isBefore(end); m.add(this.Time.step, 'm')) {
-          minutes.push({
-            label: m.minute().toString().padStart(2, 0),
-            color: m.isSame(this.time, 'minute') ? 'primary' : 'grey-7',
-            textColor: m.isSame(this.time, 'minute') ? 'white' : 'black'
-          })
-        }
-      }
-      return minutes
-    },
-    hours () {
-      const hours = []
-      let size = 0
-      if (this.$q.screen.gt.xs) size = 2
-      if (this.$q.screen.gt.sm) size = 5
-      if (this.$q.screen.gt.md) size = 8
-      if (this.$q.screen.gt.lg) size = 10
-      const start = moment.utc(this.time).subtract(size, 'hour')
-      const end = moment.utc(this.time).add((size + 1), 'hour')
-      for (let h = moment.utc(start); h.isBefore(end); h.add(1, 'h')) {
-        hours.push({
-          label: Time.format(h, 'time.short'),
-          class: 'col k-timeline-hour-frame text-caption ' + (h.isSame(this.time, 'hour') ? 'k-timeline-hour-selected' : '')
-        })
-      }
-      return hours
-    },
-    days () {
-      const days = []
-      let size = 0
-      if (this.$q.screen.gt.xs) size = 1
-      if (this.$q.screen.gt.sm) size = 3
-      if (this.$q.screen.gt.md) size = 5
-      if (this.$q.screen.gt.lg) size = 7
-      const start = moment.utc(this.time).subtract(size, 'day')
-      const end = moment.utc(this.time).add(size + 1, 'day')
-      for (let d = moment.utc(start); d.isBefore(end); d.add(1, 'd')) {
-        days.push({
-          label: Time.format(d, 'date.short'),
-          color: d.isSame(this.time, 'date') ? 'primary' : this.monthColors[d.month()],
-          textColor: d.isSame(this.time, 'date') ? 'white' : 'black'
-        })
-      }
-      return days
-    },
-    date: {
-      get: function () {
-        // Assume locale if timezone not provided
-        return Time.getFormatTimezone()
-          ? moment(this.time).tz(Time.getFormatTimezone()).format(this.calendarDateMask)
-          : moment(this.time).local().format(this.calendarDateMask)
-      },
-      set: function (value) {
-        let time
-        // Assume locale if timezone not provided
-        if (Time.getFormatTimezone()) {
-          time = moment.tz(value, this.calendarDateMask, Time.getFormatTimezone())
-        } else {
-          time = moment(value, this.calendarDateMask)
-        }
-        time.hour(this.time.hour())
-        time.minute(this.time.minute())
-        this.setTime(moment.utc(time))
-      }
-    }
-  },
-  methods: {
-    formatTime (time, format) {
-      return Time.format(time, format)
-    },
-    setTime (time, propagate = true) {
-      if (!time.isValid()) {
-        logger.error('the provided time is invalid')
-        return
-      }
-      if (time.utcOffset() > 0) {
-        logger.error('the provided time should be in UTC')
-        return
-      }
-      this.time = time.clone()
-      this.$events.off('time-current-time-changed', this.onTimeChanged)
-      if (propagate) Time.setCurrentTime(moment.utc(time))
-      this.$events.on('time-current-time-changed', this.onTimeChanged)
-    },
-    onPreviousStepClicked () {
-      let minutesToSubtract = this.Time.step
-      const remainder = (this.time.minute() + this.time.hour() * 60) % this.Time.step
-      if (remainder > 0) {
-        minutesToSubtract = remainder
-      }
-      this.setTime(this.time.subtract(minutesToSubtract, 'minute'))
-    },
-    onNextStepClicked () {
-      let minutesToAdd = this.Time.step
-      const remainder = (this.time.minute() + this.time.hour() * 60) % this.Time.step
-      if (remainder > 0) {
-        minutesToAdd = this.Time.step - remainder
-      }
-      this.setTime(this.time.add(minutesToAdd, 'minute'))
-    },
-    onMinutesClicked (index) {
-      this.setTime(this.time.minute(index * this.Time.step))
-    },
-    onHourClicked (index, length) {
-      this.setTime(this.time.add((index - Math.trunc(length / 2)), 'hour'))
-    },
-    onPreviousHourClicked () {
-      this.setTime(this.time.subtract(1, 'hour'))
-    },
-    onNextHourClicked () {
-      this.setTime(this.time.add(1, 'hour'))
-    },
-    onDayClicked (index, length) {
-      this.setTime(this.time.add((index - Math.trunc(length / 2)), 'day'))
-    },
-    onPreviousDayClicked () {
-      this.setTime(this.time.subtract(1, 'day'))
-    },
-    onNextDayClicked () {
-      this.setTime(this.time.add(1, 'day'))
-    },
-    onNowClicked () {
-      Time.startRealtime()
-    },
-    onTimeChanged (time) {
-      // When updating settings the root time object is sent instead of just the current time
-      this.setTime(time.currentTime || time, false)
-    }
-  },
-  created () {
-    // Define the colors assgigned to the months
-    this.monthColors = ['red', 'purple', 'indigo', 'green', 'orange', 'green', 'pink', 'deep-purple', 'lime', 'teal', 'light-blue', 'amber']
-    // Define the actions
-    this.actions = {
-      mobile: [
-        { id: 'previous-day', icon: 'las la-calendar-minus', tooltip: this.$t('KTimeline.PREVIOUS_DAY'), handler: this.onPreviousDayClicked },
-        { id: 'previous-hour', icon: 'las la-angle-left', tooltip: this.$t('KTimeline.PREVIOUS_HOUR'), handler: this.onPreviousHourClicked },
-        { id: 'previous-step', icon: 'las la-step-backward', tooltip: this.$t('KTimeline.PREVIOUS_STEP'), handler: this.onPreviousStepClicked },
-        { id: 'next-step', icon: 'las la-step-forward', tooltip: this.$t('KTimeline.NEXT_STEP'), handler: this.onNextStepClicked },
-        { id: 'next-hour', icon: 'las la-angle-right', tooltip: this.$t('KTimeline.NEXT_HOUR'), handler: this.onNextHourClicked },
-        { id: 'next-day', icon: 'las la-calendar-plus', tooltip: this.$t('KTimeline.NEXT_DAY'), handler: this.onNextDayClicked }
-      ]
-    }
-  },
-  mounted () {
-    this.$events.on('time-current-time-changed', this.onTimeChanged)
-    // Set the time
-    this.setTime(Time.getCurrentTime(), false)
-  },
-  beforeUnmount () {
-    this.$events.off('time-current-time-changed', this.onTimeChanged)
-  }
-}
-</script>
-
-<style lang="scss">
-  .k-timeline {
-    background: #ffffff;
-    border: solid 1px lightgrey;
-    border-radius: 5px;
-    width: 60vw;
-  }
-  .k-timeline:hover {
-    border: solid 1px $primary;
-    cursor: mouse;
-  }
-  .k-timeline-control {
-    padding: 5px;
-    border-bottom: solid 1px lightgrey;
-  }
-  .k-timeline-hour-frame {
-    border-bottom: solid 5px $grey-5;
-    border-left: solid 1px white;
-    border-right: solid 1px white;
-    text-align: center;
-    vertical-align: middle;
-    user-select: none; /* supported by Chrome and Opera */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-  }
-  .k-timeline-hour-selected {
-    border-bottom: solid 5px $primary;
-  }
-  .k-timeline-hour-frame:hover {
-    border-bottom: solid 5px $primary;
-  }
-</style>

package/map/client/components/KUrlLegend.vue

@@ -1,122 +0,0 @@
-<template>
-  <div v-if="legends.length > 0" class="k-url-legend-container">
-    <div v-for="legend, index in legends" @click="onLegendClick(index)" class="k-url-legend-item text-primary text-caption q-pa-xs q-ma-xs shadow-2">
-      <div v-if="legend.visible">&blacktriangledown;   {{legend.layer}}</div>
-      <img v-if="legend.visible" :src="legend.src"/>
-      <div v-if="!legend.visible">&blacktriangleright;   {{legend.layer}}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import fetch from 'node-fetch'
-import * as wms from '../../common/wms-utils'
-
-export default {
-  name: 'k-url-legend',
-  inject: ['kActivity'],
-  data () {
-    return {
-      legends: []
-    }
-  },
-  methods: {
-    onLegendClick (index) {
-      this.legends[index].visible = !this.legends[index].visible
-    },
-    async getLegend (layer) {
-      let legendUrl = _.get(layer, 'legendUrl')
-      if (!legendUrl) {
-        // no legend on layer, try to fetch legend in case of WMS layer
-        if (_.get(layer, 'leaflet.type') === 'tileLayer.wms') {
-          // leaflet wms layer uses every other options as request extra parameters
-          const leafletOptions = [
-            'type', 'source', 'isVisible', // these are kdk specific
-            'layers', 'styles', 'format', 'transparent', 'version', 'crs', 'uppercase' // these are leaflet specific
-          ]
-          const searchParams = _.omit(layer.leaflet, leafletOptions)
-          // lookup wms parameters on the leaflet layer parameters
-          legendUrl = wms.makeGetLegendGraphic(
-            layer.leaflet.source,
-            _.get(layer.leaflet, 'version', '1.0.0'),
-            layer.leaflet.layers,
-            _.get(layer.leaflet, 'styles'),
-            searchParams)
-        }
-        // TODO: might try in case of WMTS layer too
-      }
-
-      // make sure server answers the request before using it
-      if (legendUrl) {
-        try {
-          const response = await fetch(legendUrl)
-          // additional check for funny servers answering with empty body ...
-          if (response.ok) {
-            const asBlob = await response.blob()
-            if (asBlob.size === 0) legendUrl = null
-          }
-        } catch (error) {
-          legendUrl = null
-        }
-      }
-
-      return legendUrl
-    },
-    async tryAddLegend (layer) {
-      const legendUrl = await this.getLegend(layer)
-      if (legendUrl) {
-        // make sure layer is still visible since it may have been hidden in the meantime ...
-        if (this.kActivity.isLayerVisible(layer.name)) {
-          this.legends.push({
-            src: legendUrl,
-            layer: layer.label || layer.name,
-            visible: true
-          })
-        }
-      }
-    },
-    async tryRemoveLegend (layer) {
-      const legendUrl = await this.getLegend(layer)
-      if (legendUrl) {
-        const index = this.legends.findIndex((legend) => legend.src === legendUrl)
-        this.legends.splice(index, 1)
-      }
-    },
-    onShowLayer (layer, engineLayer) {
-      this.tryAddLegend(layer)
-    },
-    onHideLayer (layer) {
-      this.tryRemoveLegend(layer)
-    }
-  },
-  mounted () {
-    this.kActivity.$engineEvents.on('layer-shown', this.onShowLayer)
-    this.kActivity.$engineEvents.on('layer-hidden', this.onHideLayer)
-
-    // initial scan of already added layers
-    this.kActivity.getLayers().forEach((layer) => {
-      if (this.kActivity.isLayerVisible(layer.name)) {
-        this.tryAddLegend(layer)
-      }
-    })
-  },
-  beforeUnmount () {
-    this.kActivity.$engineEvents.off('layer-shown', this.onShowLayer)
-    this.kActivity.$engineEvents.off('layer-hidden', this.onHideLayer)
-  }
-}
-</script>
-
-<style lang="scss">
-  .k-url-legend-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .k-url-legend-item {
-    text-overflow: ellipsis;
-    cursor: pointer;
-    background-color: rgba(255, 255, 255, 0.5);
-  }
-</style>

package/map/client/leaflet/utils.js

@@ -1,246 +0,0 @@
-import _ from 'lodash'
-import L from 'leaflet'
-import { utils as kdkCoreUtils } from '../../../core/client/index.js'
-
-export const LeafletStyleMappings = {
-  'z-index': 'pane',
-  pane: 'pane',
-  stroke: 'color',
-  'stroke-color': 'color',
-  'stroke-opacity': 'opacity',
-  'stroke-width': 'weight',
-  fill: 'fillColor',
-  'fill-opacity': 'fillOpacity',
-  'fill-color': 'fillColor',
-  weight: 'weight',
-  radius: 'radius',
-  'line-cap': 'lineCap',
-  'line-join': 'lineJoin',
-  'dash-array': 'dashArray',
-  'dash-offset': 'dashOffset',
-  'marker-size': 'icon.options.iconSize',
-  'marker-symbol': 'icon.options.iconUrl',
-  'marker-color': 'icon.options.markerColor',
-  'marker-type': 'type',
-  'icon-color': 'icon.options.iconColor',
-  'icon-size': 'icon.options.iconSize',
-  'icon-anchor': 'icon.options.iconAnchor',
-  'icon-classes': 'icon.options.iconClasses',
-  'icon-html': 'icon.options.html',
-  'icon-class': 'icon.options.className',
-  'icon-x-offset': 'icon.options.iconXOffset',
-  'icon-y-offset': 'icon.options.iconYOffset'
-}
-export const LeafletStyleOptions = _.values(LeafletStyleMappings)
-
-// Get the unique global symbol to store event listeners on a leaflet object
-const LISTENERS_KEY = Symbol.for('leaflet-event-listeners')
-// Bind a set of events on given Leaflet object to a vue component
-export function bindLeafletEvents (object, events, component, options) {
-  object[LISTENERS_KEY] = []
-  events.forEach(eventName => {
-    const listener = (...args) => {
-      if (options) component.$engineEvents.emit(eventName, options, ...args)
-      else component.$engineEvents.emit(eventName, ...args)
-    }
-    object[LISTENERS_KEY].push(listener)
-    object.on(eventName, listener)
-  })
-}
-
-export function unbindLeafletEvents (object, events) {
-  const listeners = object[LISTENERS_KEY]
-  if (listeners) {
-    events.forEach((eventName, index) => {
-      object.off(eventName, object[LISTENERS_KEY][index])
-    })
-    delete object[LISTENERS_KEY]
-  }
-}
-
-export const LeafletEvents = {
-  Map: ['baselayerchange', 'overlayadd', 'overlayremove', 'layeradd', 'layerremove', 'zoomlevelschange',
-    'resize', 'unload', 'viewreset', 'load',
-    'zoomstart', 'boxzoomstart', 'boxselectionstart', 'movestart',
-    'zoom', 'move',
-    'zoomend', 'boxzoomend', 'boxselectionend', 'moveend',
-    'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'contextmenu',
-    'keypress', 'preclick', 'moveend', 'zoomanim', 'fullscreenchange'],
-  Popup: ['add', 'remove'],
-  Tooltip: ['add', 'remove'],
-  Layer: ['add', 'remove', 'popupopen', 'popupclose', 'tooltipopen', 'tooltipclose'],
-  Feature: ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'contextmenu',
-    'dragstart', 'dragend', 'drag', 'movestart', 'moveend', 'move'],
-  Cluster: ['spiderfied', 'unspiderfied']
-}
-
-export function createLeafletMarkerFromStyle (latlng, markerStyle, feature) {
-  if (markerStyle) {
-    let icon = markerStyle.icon
-    // Parse icon options to get icon object if any
-    if (icon) {
-      const iconOptions = icon.options || icon
-      const options = markerStyle.options || markerStyle
-      icon = _.get(L, icon.type)(iconOptions)
-      return _.get(L, markerStyle.type || 'marker')(latlng, Object.assign(_.omit(options, ['icon']), { icon }))
-    } else {
-      const options = markerStyle.options || markerStyle
-      return _.get(L, markerStyle.type || 'marker')(latlng, options)
-    }
-  } else {
-    return L.marker(latlng)
-  }
-}
-
-export function convertToLeafletFromSimpleStyleSpec (style, inPlace) {
-  if (!style) return {}
-  const convertedStyle = (inPlace ? style : {})
-  // Compute flags first because if updating in place options in style spec will be replaced
-  const isHtml = _.has(style, 'icon-html')
-  const hasClass = _.has(style, 'icon-class')
-  const isFontAwesome = _.has(style, 'icon-classes')
-  let isIconSpec = _.has(style, 'icon')
-  // First copy any icon spec as not supported by simple style spec
-  if (isIconSpec) _.set(convertedStyle, 'icon', _.get(style, 'icon'))
-  _.forOwn(style, (value, key) => {
-    if (_.has(LeafletStyleMappings, key)) {
-      const mapping = _.get(LeafletStyleMappings, key)
-      // Specific options
-      switch (key) {
-        case 'icon-size':
-        case 'icon-anchor':
-        case 'marker-size':
-          if (!Array.isArray(value)) value = [value, value]
-          _.set(convertedStyle, mapping, value)
-          break
-        default:
-          _.set(convertedStyle, mapping, value)
-      }
-      if (inPlace) _.unset(style, key)
-      // In this case we have a marker with icon spec
-      if (mapping.startsWith('icon')) isIconSpec = true
-    }
-  })
-  if (isIconSpec) {
-    // Select the right icon type based on options if not already set
-    if (!_.has(style, 'icon.type')) _.set(convertedStyle, 'icon.type', (isFontAwesome ? 'icon.fontAwesome' : isHtml ? 'divIcon' : 'icon'))
-    // Leaflet adds a default background style but we prefer to remove it
-    if (isHtml && !hasClass) _.set(convertedStyle, 'icon.options.className', '')
-    _.set(convertedStyle, 'type', 'marker')
-  }
-  // Manage panes to make z-index work for all types of layers,
-  // pane name can actually be a z-index value
-  if (_.has(convertedStyle, 'pane')) _.set(convertedStyle, 'pane', _.get(convertedStyle, 'pane').toString())
-  if (_.has(convertedStyle, 'shadowPane')) _.set(convertedStyle, 'shadowPane', _.get(convertedStyle, 'shadowPane').toString())
-  return convertedStyle
-}
-
-export function getHtmlTable (properties) {
-  properties = kdkCoreUtils.dotify(properties)
-  properties = _.pickBy(properties, value => !_.isNil(value))
-  const keys = _.keys(properties)
-  let html
-  if (keys.length === 0) return null
-  else if (keys.length === 1) html = _.get(properties, keys[0])
-  else {
-    const borderStyle = ' style="border: 1px solid black; border-collapse: collapse;"'
-    html = '<table' + borderStyle + '>'
-    html += keys
-      .map(key => '<tr' + borderStyle + '><th' +
-        borderStyle + '>' + key + '</th><th>' + _.get(properties, key) + '</th></tr>')
-      .join('')
-    html += '</table>'
-  }
-  return html
-}
-
-export function tile2key (coords) {
-  // JS Number.MAX_SAFE_INTEGER = 2^53 - 1, so 53 bits available
-  // put z value on  5 bits (0 - 32)
-  // put y value on 24 bits (0 - 16777216)
-  // put x value on 24 bits (0 - 16777216)
-  // shift y by 5 bits (* 32)
-  // shift x by 5+24 bits (* 536870912)
-  return (coords.x * 536870912) + (coords.y * 32) + coords.z
-}
-
-export function key2tile (key) {
-  // JS Number.MAX_SAFE_INTEGER = 2^53 - 1, so 53 bits available
-  // put z value on  5 bits (0 - 32)
-  // put y value on 24 bits (0 - 16777216)
-  // put x value on 24 bits (0 - 16777216)
-  // shift y by 5 bits (* 32)
-  // shift x by 5+24 bits (* 536870912)
-  const x = Math.floor(key / 536870912)
-  const y = Math.floor((key - (x * 536870912)) / 32)
-  const p = L.point(x, y)
-  p.z = key - ((x * 536870912) + (y * 32))
-  return p
-}
-
-export function tileSetContainsParent (tileset, coords) {
-  const triplet = {
-    x: coords.x,
-    y: coords.y,
-    z: coords.z
-  }
-
-  while (triplet.z > 1) {
-    const tilekey = tile2key(triplet)
-    if (tileset.has(tilekey)) return true
-
-    triplet.x = Math.floor(triplet.x / 2)
-    triplet.y = Math.floor(triplet.y / 2)
-    triplet.z -= 1
-  }
-
-  return false
-}
-
-export function getParentTileInTileSet (tileset, coords) {
-  const triplet = {
-    x: coords.x,
-    y: coords.y,
-    z: coords.z
-  }
-
-  triplet.x = Math.floor(triplet.x / 2)
-  triplet.y = Math.floor(triplet.y / 2)
-  triplet.z -= 1
-
-  while (triplet.z > 1) {
-    const tilekey = tile2key(triplet)
-    if (tileset.has(tilekey)) return triplet
-
-    triplet.x = Math.floor(triplet.x / 2)
-    triplet.y = Math.floor(triplet.y / 2)
-    triplet.z -= 1
-  }
-
-  return undefined
-}
-
-export function computeIdealMaxNativeZoom (gridLayer, dataSetBounds, dataSetTileSize) {
-  // compute optimal maxNativeZoom value to ensure
-  // the smallest leaflet tile will approximately match a dataset tile
-
-  // compute tile size farthest from equator
-  const nw = dataSetBounds.getNorthWest()
-  let z = 1
-  while (true) {
-    const nwPoint = gridLayer._map.project(nw, z)
-    const coords = nwPoint.unscaleBy(gridLayer.getTileSize())
-    coords.x = Math.floor(coords.x)
-    coords.y = Math.floor(coords.y)
-    coords.z = z
-
-    const tileBounds = gridLayer._tileCoordsToBounds(coords)
-    const tileWidth = tileBounds.getEast() - tileBounds.getWest()
-    const tileHeight = tileBounds.getNorth() - tileBounds.getSouth()
-    if (tileWidth < dataSetTileSize.lng || tileHeight < dataSetTileSize.lat) break
-
-    z += 1
-  }
-
-  return Math.max(1, z - 1)
-}