webpack-bootstrap-ui-kit/src/js/ui/map.api.js

'use strict'

import Events from '../_events'
import Consts from 'js/_consts'

const MapAPI = ((window) => {
  // Constants
  const NAME = 'js-mapapi'
  const MAP_DRIVER = Consts.MAP_DRIVER

  class MapAPI {
    // Constructor
    constructor (el) {
      const ui = this
      const Drv = new MAP_DRIVER()
      const BODY = document.querySelector('body')
      const config = el.dataset
      config.center = [
        config.lng ? config.lng : BODY.dataset['default-lng'],
        config.lat ? config.lat : BODY.dataset['default-lat'],
      ]

      /* config['style'] = config['style'] ?
                                  jQuery.parseJSON(config['style']) :
                                  null;

                              config['font-family'] = $BODY.css('font-family'); */

      if (!config.icon) {
        config.icon = '<i class="fas fa-map-marker-alt"></i>'
      }

      console.log(`${NAME}: init ${Drv.getName()}...`)
      ui.drv = Drv
      ui.el = el
      ui.config = config

      Drv.init(el, config)

      el.addEventListener(Events.MAPAPILOADED, () => {
        ui.addMarkers()
      })
    }

    // Public methods
    getMap () {
      return ui.map
    }

    dispose () {
      const ui = this

      ui.el = null
      ui.el.classList.remove(`${NAME}-active`)
    }

    addMarkers () {
      console.log(`${NAME}: addMarkers`)
      const ui = this
      const el = ui.el
      const Drv = ui.drv
      const config = ui.config

      ui.map = Drv.getMap()

      if (config.geojson) {
        console.log(`${NAME}: setting up geocode data`)
        Drv.addGeoJson(config)
      } else if (config.address) {
        console.log(config.address)
        console.log(`${NAME}: setting up address marker`)
        Drv.geocode(config.address, (results) => {
          console.log(results)

          const lat = results[0].geometry.location.lat()
          const lng = results[0].geometry.location.lng()

          console.log(
            `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
          )

          Drv.addMarker([lng, lat], config)
          ui.map.setCenter({
            lat,
            lng,
          })
        })
      } else if (config.lat && config.lng) {
        const lat = config.lat
        const lng = config.lng

        console.log(
          `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
        )

        Drv.addMarker([lng, lat], config)
      }

      el.classList.add(`${NAME}-active`)

      el.dispatchEvent(new Event(Events.MAPLOADED))
      console.log(`${NAME}: Map is loaded`)
    }
  }

  const init = () => {
    console.log(`${NAME}: init`)
    document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
      const map = new MapAPI(el)
    })
  }

  // auto-apply
  window.addEventListener(`${Events.LODEDANDREADY}`, init)
  window.addEventListener(`${Events.AJAX}`, init)

  return MapAPI
})(window)

export default MapAPI