Cześć wszystkim, chciałbym się zapytać o rade co można zrobić w skrypcie javascript poniżej korzystającego z Google Map API, żeby był bardziej czytelny i wydajniejszy:)
class Geolocations
{
constructor(radius_circle) {
this.radius_circle = radius_circle;
}
init(options) {
if(!options.location) return;
try {google.maps.event.addDomListener(window, "load", this.makeMap.bind(this)); } catch(e) { return; }
try {google.maps.event.addDomListener(window, "load", this.Listener.bind(this)); } catch(e) { return; }
this.options = options;
this.location = this.options.location;
}
makeMap() {
this.GetAllLocationsOnMap();
var elements=0;
this.elements=elements;
var TableTypeSelectedIcon=[];
this.TableTypeSelectedIcon=TableTypeSelectedIcon;
var TableIfIconSelect=[];
this.TableIfIconSelect=TableIfIconSelect;
var geokoder = new google.maps.Geocoder();
this.geokoder=geokoder;
var loc = this.location.split(","),
pos = new google.maps.LatLng(loc[0], loc[1]);
var mapOptions =new google.maps.Map(document.querySelector("#map"), {
zoom: 13,
center: pos,
disableDefaultUI: false,
scaleControl: true,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions:
{
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
this.mapOptions=mapOptions;
var Map = new google.maps.Map(document.getElementById("map"), mapOptions);
this.Map=Map;
}
GetAllLocationsOnMap(val)
{
var lan="http://localhost:3000/api/connectAll/";
this.SendRequestToDatabase(lan);
}
Listener(){
var markers_on_map = [];
this.markers_on_map=markers_on_map;
var Circle=()=>this.circle;
var CallbackToThisDragListener=()=>this.DragListener();
google.maps.event.addListener(this.Map,'dragstart',function(zdarzenie)
{
Circle().setMap(null);
});
google.maps.event.addListener(this.Map,'dragend',function(zdarzenie)
{
for (var i = 0; i < markers_on_map.length; i++) {
if (markers_on_map[i]) {
markers_on_map[i].setMap(null);
markers_on_map[i] = null;
}
}
CallbackToThisDragListener();
});
}
DragListener()
{
this.CheckAddressValue();
}
CheckAddressValue()
{
var CallbackToThisCreateCircle=()=>this.CreateCircle();
var CallbackToThisAll_locations=this.BringDataFromDatabase.locations;
var CallbackUpdateMarker=(All_locations,iteration)=>this.SaveGlobalLocationsValueInClass(All_locations,iteration);
if(this.address==null)
{
this.address='';
}
if (this.geokoder) {
this.geokoder.geocode({'address': this.address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
CallbackToThisCreateCircle();
for (var iteration = 0; iteration < CallbackToThisAll_locations.length; iteration++) {
CallbackUpdateMarker(CallbackToThisAll_locations[iteration],iteration);
}
}
}
});
}
}
CreateCircle()
{
var mylat=this.Map.getCenter().lat();
this.mylat=mylat;
var mylng=this.Map.getCenter().lng();
this.mylng=mylng;
var circle;
circle = new google.maps.Circle({
map: this.Map,
position: new google.maps.LatLng(mylat, mylng),
radius: this.radius_circle,
strokeColor: '#b2dae8',
strokeOpacity: 0.8,
strokeWeight: 2,
clickable: false,
fillColor: '#b2dae8',
fillOpacity: 0.35
});
this.circle=circle;
circle.bindTo('center', circle, 'position');
}
SaveGlobalLocationsValueInClass(LocationsOnMap,iteration)
{
this.LocationsOnMap=LocationsOnMap;
this.iteration=iteration;
this.SetMarkerLocation(iteration)
}
SetMarkerLocation()
{
var DymekLocations=this.LocationsOnMap;
var Mapka=()=>this.Map;
var InfoWindow = new google.maps.InfoWindow();
var wartosc=this.ComputeDistance();
var marker_lat_lng=wartosc[0];
var distance_from_location=wartosc[1];
if (distance_from_location <= this.radius_circle) {
var new_marker=this.CreatNewMarker(marker_lat_lng);
this.new_marker=new_marker;
this.FiltersMarkers();
google.maps.event.addListener(new_marker, 'mouseover', function () {
InfoWindow = new google.maps.InfoWindow({
content: '<div style="color:black"><strong>'+DymekLocations.name+'</strong><br>'+DymekLocations.street+'<br>'+DymekLocations.phone+'</div>',
size: new google.maps.Size(150,50),
pixelOffset: new google.maps.Size(0, -30),
position: marker_lat_lng,
map: Mapka()
});
google.maps.event.addListener(new_marker, 'mouseout', function () {
if(InfoWindow){
InfoWindow.setMap(null);
InfoWindow = null;
}
});
});
this.markers_on_map.push(new_marker);
}
}
ComputeDistance()
{
var marker_lat_lng = new google.maps.LatLng(this.LocationsOnMap.lat, this.LocationsOnMap.lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(this.mylat, this.mylng), marker_lat_lng);
return [marker_lat_lng, distance_from_location];
}
CreatNewMarker(marker_lat_lng)
{
var new_marker = new google.maps.Marker({
position: marker_lat_lng,
map: this.Map,
title: location.name
});
return new_marker;
}
FiltersMarkers()
{
if(this.BringDataFromDatabase.locations[this.iteration].type.indexOf(this.address) != -1
|| this.BringDataFromDatabase.locations[this.iteration].name.indexOf(this.address) != -1
||this.BringDataFromDatabase.locations[this.iteration].name==this.address
|| this.BringDataFromDatabase.locations[this.iteration].type==this.address)
{
this.new_marker.setVisible(true);
}
else
{
this.new_marker.setVisible(false);
}
this.FiltersMarkersOnTypeSelectedIcon();
}
FiltersMarkersOnTypeSelectedIcon()
{
for(var x=0;x<this.TableTypeSelectedIcon.length;x++)
{
if(this.TableIfIconSelect[x]==true && this.BringDataFromDatabase.locations[this.iteration].type==this.TableTypeSelectedIcon[x])
{
this.new_marker.setVisible(false);
}
}
}
UpdateCircleRadius(rad) {
this.radius_circle=rad;
this.circle.radius=rad;
this.circle.bindTo('center', this.circle, 'position');
this.UpdateNumbersOfMarkers();
}
UpdateNumbersOfMarkers()
{
var All_locations=this.BringDataFromDatabase.locations;
var CallbackUpdateMarker=(All_locations,iteration)=>this.SaveGlobalLocationsValueInClass(All_locations,iteration);
this.CleanMarkersOnMap();
for (var iteration = 0; iteration < All_locations.length; iteration++) {
CallbackUpdateMarker(All_locations[iteration],iteration);
}
}
UncheckedLocation(TypeSelectedIcon,IfIconSelect)
{
if(this.TableTypeSelectedIcon.indexOf(TypeSelectedIcon)>-1)
{
var TheSameElementInArray=this.TableTypeSelectedIcon.indexOf(TypeSelectedIcon);
this.TableIfIconSelect[TheSameElementInArray]=IfIconSelect;
}
else
{
this.TableTypeSelectedIcon[this.elements]=TypeSelectedIcon;
this.TableIfIconSelect[this.elements]=IfIconSelect;
this.elements=this.elements+1;
}
this.UpdateNumbersOfMarkers();
}
UpdateAddressValue(val)
{
this.circle.setMap(null);
this.CleanMarkersOnMap();
this.address=val;
this.CheckAddressValue();
}
CleanMarkersOnMap(){
for (var i = 0; i < this.markers_on_map.length; i++) {
if (this.markers_on_map[i]) {
this.markers_on_map[i].setMap(null);
this.markers_on_map[i] = null;
}
}
}
SendRequestToDatabase(lan)
{
var SaveLocationsFromDatabaseArrowFunction=(BringDataFromDatabase)=>this.BringDataFromDatabase=BringDataFromDatabase;
var xhr = new XMLHttpRequest();
xhr.open("POST",lan);
xhr.onreadystatechange = function(e)
{
if (this.readyState === 4 && this.status === 200) {
var res=xhr.responseText;
var BringDataFromDatabase=JSON.parse(res);
SaveLocationsFromDatabaseArrowFunction(BringDataFromDatabase);
}
};
xhr.send(null);
}
}
var geo=new Geolocations(3000);
geo.init({
location: "51.269262, 22.548271",
});
function sliderChange(val) {
var kolo=val*100;
geo.UpdateCircleRadius(kolo);
}
function IconClick(TypeSelectedIcon,IfIconSelect) {
geo.UncheckedLocation(TypeSelectedIcon,IfIconSelect);
}
var clearSearch;
var WaitForDataFromDatabase;
function InputSearchValue(val){
clearTimeout(clearSearch);
clearTimeout(WaitForDataFromDatabase);
WaitForDataFromDatabase=setTimeout(()=>{
var lan="http://localhost:3000/api/connect/"+val;
geo.SendRequestToDatabase(lan);
},500);
clearSearch=setTimeout(()=>{
geo.UpdateAddressValue(val);
},600);
}