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;