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;