137 lines
3.2 KiB
JavaScript
137 lines
3.2 KiB
JavaScript
"use strict";
|
|
|
|
import $ from "jquery";
|
|
import Events from "../_events";
|
|
|
|
import "../../scss/_components/_ui.map.scss";
|
|
|
|
import CONSTS from "js/_consts";
|
|
|
|
const MapAPI = (($) => {
|
|
// Constants
|
|
const NAME = "jsMapAPI";
|
|
const DATA_KEY = NAME;
|
|
const $BODY = $("body");
|
|
|
|
const MAP_DRIVER = CONSTS["MAP_DRIVER"];
|
|
const W = window;
|
|
|
|
class MapAPI {
|
|
// Constructor
|
|
constructor(el) {
|
|
const ui = this;
|
|
const Drv = new MAP_DRIVER();
|
|
|
|
ui.$el = $(el);
|
|
|
|
const $el = ui.$el;
|
|
const config = $el.data();
|
|
|
|
config["center"] = [
|
|
config["lng"] ? config["lng"] : $BODY.data("default-lng"),
|
|
config["lat"] ? config["lat"] : $BODY.data("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()}...`);
|
|
Drv.init($el, config);
|
|
ui.drv = Drv;
|
|
|
|
$el.on(Events.MAPAPILOADED, (e) => {
|
|
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.data(DATA_KEY, ui);
|
|
$el.addClass(`${NAME}-active`);
|
|
|
|
$el.trigger(Events.MAPLOADED);
|
|
console.log(`${NAME}: Map is loaded`);
|
|
});
|
|
}
|
|
|
|
// Public methods
|
|
getMap() {
|
|
return ui.map;
|
|
}
|
|
|
|
dispose() {
|
|
const ui = this;
|
|
|
|
ui.$el = null;
|
|
$.removeData(ui.$el[0], DATA_KEY);
|
|
|
|
ui.$el.removeClass(`${NAME}-active`);
|
|
}
|
|
|
|
static _jQueryInterface() {
|
|
if (typeof W.localStorage !== "undefined") {
|
|
return this.each(() => {
|
|
// attach functionality to el
|
|
const $el = $(this);
|
|
let data = $el.data(DATA_KEY);
|
|
|
|
if (!data) {
|
|
data = new MapAPI(this);
|
|
$el.data(DATA_KEY, data);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// jQuery interface
|
|
$.fn[NAME] = MapAPI._jQueryInterface;
|
|
$.fn[NAME].Constructor = MapAPI;
|
|
$.fn[NAME].noConflict = () => {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
return MapAPI._jQueryInterface;
|
|
};
|
|
|
|
// auto-apply
|
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
|
$(".mapAPI-map-container").jsMapAPI();
|
|
});
|
|
|
|
return MapAPI;
|
|
})($);
|
|
|
|
export default MapAPI;
|