343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
import { Global } from "../../Core/Globals"
|
|
import { EventManager } from "../../Core/Events"
|
|
import * as Events from "../../Core/EventDefinitions"
|
|
import { LocalizationManager } from "../../Core/Localization"
|
|
import { Slider } from "@syncfusion/ej2-inputs";
|
|
import { Ui } from "../../Core/Ui"
|
|
import * as L from "leaflet"
|
|
import "leaflet.markercluster"
|
|
|
|
|
|
class ShowMapModule {
|
|
private _moduleName = "ShowMapModule";
|
|
private _component = "#showMapContainer";
|
|
private _global: Global;
|
|
private _eventManager: EventManager;
|
|
private _uiManager: Ui;
|
|
private _localizationMananger: LocalizationManager;
|
|
|
|
private _map : L.Map;
|
|
private _markers: L.MarkerClusterGroup;
|
|
private _plotlayers = [];
|
|
private _featureGroup: L.FeatureGroup;
|
|
|
|
private _minll: L.LatLng;
|
|
private _maxll: L.LatLng;
|
|
private _selectedPosition: L.LatLng;
|
|
|
|
private _radiusSlider: Slider;
|
|
private _radius: number;
|
|
|
|
constructor() {
|
|
this._global = Global.getInstance();
|
|
this._eventManager = EventManager.getInstance();
|
|
this._localizationMananger = LocalizationManager.getInstance();
|
|
this._uiManager = Ui.getInstance();
|
|
this._selectedPosition = null;
|
|
this._radius = 50;
|
|
}
|
|
|
|
/**
|
|
* Stellt einen Prefix vor einen Selektor
|
|
* @param selector
|
|
*/
|
|
private prefix(selector: string): string {
|
|
const self = this;
|
|
if ($(`${self._component} ${selector}`).length > 0)
|
|
return `${self._component} ${selector}`;
|
|
return `html ${selector}`;
|
|
}
|
|
|
|
private initMap(): void {
|
|
var self = this;
|
|
|
|
self._map = L.map("mapContainer");
|
|
self._map.setMaxBounds([[-90, -180], [90, 180]]);
|
|
|
|
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
|
|
var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 18, attribution: osmAttrib });
|
|
|
|
self._map.setView([47.6091, 13.7844], 7);
|
|
self._map.addLayer(osm);
|
|
self._markers = window.L.markerClusterGroup({});
|
|
self._featureGroup = L.featureGroup().addTo(self._map);
|
|
|
|
var bounds = self._map.getBounds();
|
|
var minll = bounds.getSouthWest();
|
|
var maxll = bounds.getNorthEast();
|
|
|
|
self._minll = minll;
|
|
self._maxll = maxll;
|
|
}
|
|
|
|
/**Map-Marker entfernen */
|
|
private removeMarkers(): void {
|
|
var self = this;
|
|
|
|
self._markers.clearLayers();
|
|
self._plotlayers = [];
|
|
}
|
|
|
|
/**Zeichnen des Radius, zentrieren und Suche nach Händlern starten */
|
|
private centerMapDrawCircle(): void {
|
|
var self = showMapModule;
|
|
|
|
self._featureGroup.clearLayers();
|
|
var circle = L.circle(self._selectedPosition, self._radius * 1000).addTo(self._featureGroup);
|
|
var circleBounds = circle.getBounds();
|
|
self._map.fitBounds(circleBounds);
|
|
|
|
var minll = circleBounds.getSouthWest();
|
|
var maxll = circleBounds.getNorthEast();
|
|
}
|
|
|
|
/**Aktuelle Position via Browser holen */
|
|
private setCurrentPoisition(): void {
|
|
var self = this;
|
|
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition((position: any) => {
|
|
self._selectedPosition = new L.LatLng(position.coords.latitude, position.coords.longitude);
|
|
self.setMarker();
|
|
self.centerMapDrawCircle();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Geo-Codes der Adresse suchen
|
|
*/
|
|
private geoLookup(address:string): void {
|
|
var self = showMapModule;
|
|
|
|
self._uiManager.blockMainUi();
|
|
$.ajax({
|
|
url: <string>$(self.prefix("#jsLookupGeoCodeUrl")).val(),
|
|
data: <any>{ model: address },
|
|
dataType: "JSON",
|
|
type: "POST",
|
|
success(result) {
|
|
if (result.success) {
|
|
var geoResult = JSON.parse(result.data);
|
|
self._selectedPosition = new L.LatLng(geoResult.latitude, geoResult.longitude);
|
|
self.setMarker();
|
|
self.centerMapDrawCircle();
|
|
} else {
|
|
self._uiManager.showErrorMessage(result.errorMessage);
|
|
}
|
|
},
|
|
error() {
|
|
|
|
},
|
|
complete() {
|
|
self._uiManager.unblockMainUi();
|
|
}
|
|
});
|
|
}
|
|
|
|
private handleSelectButton(): void {
|
|
var self = this;
|
|
|
|
if (self._selectedPosition === null) {
|
|
$(self.prefix("#btnSelect")).prop("disabled", "disabled");
|
|
} else {
|
|
$(self.prefix("#btnSelect")).prop("disabled", "");
|
|
}
|
|
}
|
|
|
|
private setMarker(): void {
|
|
var self = showMapModule;
|
|
|
|
self.removeMarkers();
|
|
var iconSize = L.point(25, 38);
|
|
var iconUrl = `/images/marker-icon.png`;
|
|
var dpawIcon = L.icon({ iconUrl: iconUrl, iconSize: iconSize });
|
|
|
|
var marker = L.marker(self._selectedPosition, { icon: dpawIcon });
|
|
self._markers.addLayer(marker);
|
|
self._map.addLayer(this._markers);
|
|
self.handleSelectButton();
|
|
}
|
|
|
|
/**
|
|
* Bindungen erstellen
|
|
*/
|
|
private setupBindings(): void {
|
|
var self = this;
|
|
|
|
$(self.prefix("#btnMyLocation")).off("click").on("click", function () {
|
|
self.setCurrentPoisition();
|
|
});
|
|
|
|
$(self.prefix("#btnSearch")).off("click").on("click", function () {
|
|
var address = <string>$(self.prefix("#location")).val();
|
|
if (address !== undefined && address.length > 0) {
|
|
self.geoLookup(address);
|
|
}
|
|
});
|
|
|
|
$(self.prefix("#btnSelect")).off("click").on("click", function () {
|
|
self._uiManager.pageTitleClear(self._component);
|
|
self._eventManager.unSubscribeAll(self._moduleName);
|
|
var location = {lat: self._selectedPosition.lat, lng: self._selectedPosition.lng, radius: self._radius};
|
|
self._eventManager.publish(Events.Map.select, location);
|
|
});
|
|
|
|
$(self.prefix("#btnClose")).off("click").on("click", function () {
|
|
self._uiManager.pageTitleClear(self._component);
|
|
self._eventManager.unSubscribeAll(self._moduleName);
|
|
self._eventManager.publish(Events.Map.back);
|
|
});
|
|
|
|
|
|
self._radiusSlider = new Slider({
|
|
min: 0.0,
|
|
max: 500.0,
|
|
step: 0.1,
|
|
value: self._radius,
|
|
enableAnimation: true,
|
|
ticks: { smallStep: 10, largeStep: 100, placement: "Before", showSmallTicks: true },
|
|
tooltip: { isVisible: true, placement: "Before", showOn: "Focus" },
|
|
type: "MinRange",
|
|
changed(args: any) {
|
|
self._radius = args.value;
|
|
if (self._selectedPosition !== null) {
|
|
self.centerMapDrawCircle();
|
|
}
|
|
}
|
|
});
|
|
self._radiusSlider.appendTo(self.prefix("#radiusSlider"));
|
|
|
|
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
}
|
|
|
|
/**
|
|
* Aktivieren des Moduls
|
|
*/
|
|
public activate(): void {
|
|
var self = this;
|
|
$.setupValidator();
|
|
$.reinitializeValidator();
|
|
this.setupBindings();
|
|
|
|
self.initMap();
|
|
|
|
$.randomAutocompleteValue();
|
|
|
|
//self._map.on("move", self.loadVendors);
|
|
self._map.on("moveend",
|
|
function () {
|
|
var bounds = self._map.getBounds();
|
|
var minll = bounds.getSouthWest();
|
|
var maxll = bounds.getNorthEast();
|
|
|
|
var reload = false;
|
|
if (minll.lat < self._minll.lat || minll.lng < self._minll.lng) {
|
|
if (minll.lat < self._minll.lat) {
|
|
self._minll.lat = minll.lat;
|
|
}
|
|
if (minll.lng < self._minll.lng) {
|
|
self._minll.lng = minll.lng;
|
|
}
|
|
|
|
if (self._minll.lat < -90) self._minll.lat = -90;
|
|
if (self._minll.lat > 90) self._minll.lat = 90;
|
|
if (self._minll.lng < -180) self._minll.lng = -180;
|
|
if (self._minll.lng > 180) self._minll.lng = 180;
|
|
|
|
reload = true;
|
|
}
|
|
if (maxll.lat > self._maxll.lat || maxll.lng > self._maxll.lng) {
|
|
if (maxll.lat > self._maxll.lat) {
|
|
self._maxll.lat = maxll.lat;
|
|
}
|
|
if (maxll.lng > self._maxll.lng) {
|
|
self._maxll.lng = maxll.lng;
|
|
}
|
|
|
|
if (self._maxll.lat < -90) self._maxll.lat = -90;
|
|
if (self._maxll.lat > 90) self._maxll.lat = 90;
|
|
if (self._maxll.lng < -180) self._maxll.lng = -180;
|
|
if (self._maxll.lng > 180) self._maxll.lng = 180;
|
|
|
|
reload = true;
|
|
}
|
|
if (reload) {
|
|
//console.log(`RELOAD --> ${self._minll.lat} | ${self._minll.lng} | ${self._maxll.lat} | ${self._maxll.lng}`);
|
|
|
|
} else {
|
|
//console.log(`${self._minll.lat} | ${self._minll.lng} | ${self._maxll.lat} | ${self._maxll.lng}`);
|
|
}
|
|
|
|
});
|
|
self._map.on("zoomend",
|
|
function () {
|
|
var bounds = self._map.getBounds();
|
|
var minll = bounds.getSouthWest();
|
|
var maxll = bounds.getNorthEast();
|
|
|
|
var reload = false;
|
|
if (minll.lat < self._minll.lat || minll.lng < self._minll.lng) {
|
|
if (minll.lat < self._minll.lat) {
|
|
self._minll.lat = minll.lat;
|
|
}
|
|
if (minll.lng < self._minll.lng) {
|
|
self._minll.lng = minll.lng;
|
|
}
|
|
|
|
if (self._minll.lat < -90) self._minll.lat = -90;
|
|
if (self._minll.lat > 90) self._minll.lat = 90;
|
|
if (self._minll.lng < -180) self._minll.lng = -180;
|
|
if (self._minll.lng > 180) self._minll.lng = 180;
|
|
|
|
reload = true;
|
|
}
|
|
if (maxll.lat > self._maxll.lat || maxll.lng > self._maxll.lng) {
|
|
if (maxll.lat > self._maxll.lat) {
|
|
self._maxll.lat = maxll.lat;
|
|
}
|
|
if (maxll.lng > self._maxll.lng) {
|
|
self._maxll.lng = maxll.lng;
|
|
}
|
|
|
|
if (self._maxll.lat < -90) self._maxll.lat = -90;
|
|
if (self._maxll.lat > 90) self._maxll.lat = 90;
|
|
if (self._maxll.lng < -180) self._maxll.lng = -180;
|
|
if (self._maxll.lng > 180) self._maxll.lng = 180;
|
|
|
|
reload = true;
|
|
}
|
|
if (reload) {
|
|
//console.log(`RELOAD --> ${self._minll.lat} | ${self._minll.lng} | ${self._maxll.lat} | ${self._maxll.lng}`);
|
|
|
|
} else {
|
|
//console.log(`${self._minll.lat} | ${self._minll.lng} | ${self._maxll.lat} | ${self._maxll.lng}`);
|
|
}
|
|
|
|
});
|
|
self._map.on("click",
|
|
(e: any) => {
|
|
self._selectedPosition = e.latlng;
|
|
self.setMarker();
|
|
self.handleSelectButton();
|
|
self.centerMapDrawCircle();
|
|
});
|
|
self.handleSelectButton();
|
|
}
|
|
|
|
/**
|
|
* Initialisieren des Moduls
|
|
*/
|
|
public init(): void {
|
|
if (this._global.appInitialized) {
|
|
showMapModule.activate();
|
|
} else {
|
|
setTimeout(() => { this.init() }, 10);
|
|
}
|
|
}
|
|
}
|
|
|
|
let showMapModule = new ShowMapModule();
|
|
showMapModule.init(); |