70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
"use strict";
|
|
|
|
import {Utils} from "../Utils/Utils.ecma.js";
|
|
import {EventModel} from "../Models/EventModel.ecma.js";
|
|
import {DotModel} from "../Models/DotModel.ecma.js";
|
|
import {ScreenModel} from "../Models/ScreenModel.ecma.js";
|
|
|
|
export const MapView = (function(){
|
|
|
|
const MapView = function(routes_marker){
|
|
|
|
const self = this;
|
|
let built = false,
|
|
/** @type {Array.<[number, number]>} */
|
|
dots = [];
|
|
|
|
/** @type {ScreenModel|null} */
|
|
this.screen = null;
|
|
/** @type {EventModel} */
|
|
this.on_dots_change = new EventModel();
|
|
|
|
/** @type {HTMLElement|null} */
|
|
this.box = null;
|
|
/** @type {L.Map|null} */
|
|
this.map = null;
|
|
|
|
const constructor = () => {};
|
|
|
|
this.build = () => {
|
|
if(!built && routes_marker.item_self){
|
|
built = true;
|
|
self.box = Utils.set_html(routes_marker.item_self, [
|
|
["div", {
|
|
id : "routes-maker-map",
|
|
class : "map",
|
|
data_show_markers : true,
|
|
data_show_routes : true
|
|
}]
|
|
])[0];
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom : 19,
|
|
attribution : '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(self.map = L.map("routes-maker-map").setView(routes_marker.get_user_coordenates(), 13));
|
|
(self.screen = new ScreenModel(self.box)).on_change.add((i, x, y, box) => {
|
|
self.map.invalidateSize(true);
|
|
});
|
|
self.map.on("click", event => {
|
|
|
|
const dot = new DotModel(self.map, event.latlng.lng, event.latlng.lat, dots.length, dots);
|
|
|
|
dots.push(dot);
|
|
recalculate_total_distance();
|
|
dot.on_change.add(() => {
|
|
recalculate_total_distance();
|
|
});
|
|
|
|
});
|
|
};
|
|
};
|
|
|
|
const recalculate_total_distance = () => {
|
|
routes_marker.item_self.querySelector(".map-menu [name=distance]").value = dots.reduce((distance, dot) => distance + dot.distance, 0) >> 0;
|
|
};
|
|
|
|
constructor();
|
|
|
|
};
|
|
|
|
return MapView;
|
|
})(); |