400 lines
12 KiB
JavaScript
400 lines
12 KiB
JavaScript
// map variables
|
|
var mapZoom = getWidth() < 508 ? 5 : 6;
|
|
var mapUrl = `https://rmsmap.rmto.ir/141map/`;
|
|
var map;
|
|
var mapStartMarker = null;
|
|
var isSetMapStartMarker = false;
|
|
var mapEndMarker = null;
|
|
var isSetMapEndMarker = false;
|
|
var routeControls = [];
|
|
var routeControlsPath = [];
|
|
var popupArrays = [];
|
|
var popupArraysPath = [];
|
|
var sourceLat, sourceLng, destLat, destLng = "";
|
|
var bounds = [
|
|
[42.9130026312, 75.6166317076],
|
|
[20.5782370061, 35.5092252948],
|
|
];
|
|
var trafficLayer = L.tileLayer(
|
|
"https://rmssatmap.rmto.ir/sat/{z}/{x}/{y}.jpg",
|
|
{
|
|
maxBounds: bounds,
|
|
zoomControl: false,
|
|
attributionControl: false,
|
|
attribution: "© rendered by Witel",
|
|
}
|
|
);
|
|
var iranLayer = L.tileLayer(
|
|
"https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png",
|
|
{}
|
|
);
|
|
//// map markers
|
|
var mapStartIcon = L.divIcon({
|
|
html: `
|
|
<div id="pin-marker-start" class="pin-marker">
|
|
<div class="map-pin-marker">
|
|
<div class="pin-main-circle"></div>
|
|
<div class="pin-white-circle"></div>
|
|
<div class="pin-title-circle">
|
|
<span class="title-circle-text">شروع</span>
|
|
</div>
|
|
<div class="pin-main-line"></div>
|
|
</div>
|
|
<div class="pin-main-shadow">
|
|
<div class="shadow-dot">
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
iconSize: [55, 75],
|
|
iconAnchor: [33, 64],
|
|
});
|
|
var mapEndIcon = L.divIcon({
|
|
html: `
|
|
<div id="pin-marker-end" class="pin-marker">
|
|
<div class="map-pin-marker">
|
|
<div class="pin-main-circle"></div>
|
|
<div class="pin-white-circle"></div>
|
|
<div class="pin-title-circle">
|
|
<span class="title-circle-text">پایان</span>
|
|
</div>
|
|
<div class="pin-main-line"></div>
|
|
</div>
|
|
<div class="pin-main-shadow">
|
|
<div class="shadow-dot">
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
iconSize: [55, 75],
|
|
iconAnchor: [33, 64],
|
|
});
|
|
//// map markers
|
|
//end map variables
|
|
|
|
// loader
|
|
function showLoaderScreen() {
|
|
$(".divloader").css("display", "flex").hide().fadeIn();
|
|
}
|
|
function hideLoaderScreen() {
|
|
$(".divloader").fadeOut();
|
|
}
|
|
// end loader
|
|
|
|
// resize func
|
|
function getWidth() {
|
|
return Math.max(
|
|
document.body.scrollWidth,
|
|
document.documentElement.scrollWidth,
|
|
document.body.offsetWidth,
|
|
document.documentElement.offsetWidth,
|
|
document.documentElement.clientWidth
|
|
);
|
|
}
|
|
// end resize func
|
|
|
|
// build map
|
|
map = L.map("map").setView([32.62, 53.471], mapZoom);
|
|
map.addLayer(iranLayer);
|
|
map.invalidateSize();
|
|
mapStartMarker = new L.marker(map.getCenter(), {
|
|
icon: mapStartIcon,
|
|
draggable: true,
|
|
}).addTo(map);
|
|
mapEndMarker = new L.marker(map.getCenter(), {
|
|
icon: mapEndIcon,
|
|
draggable: true,
|
|
});
|
|
// end build map
|
|
|
|
// ready
|
|
$(() => {
|
|
getWidth() < 508 ? '' : $('[data-toggle="tooltip"]').tooltip();
|
|
// $("#phoneNumber_modal").modal({backdrop: 'static', keyboard: false}, "show");
|
|
});
|
|
// end ready
|
|
|
|
// map movement
|
|
map.on("move", function () {
|
|
if (!isSetMapStartMarker && !isSetMapEndMarker) {
|
|
mapStartMarker.setLatLng(L.latLng(map.getCenter()));
|
|
$("#pin-marker-start").removeClass("pin-set").addClass("pin-move");
|
|
}
|
|
|
|
if (isSetMapStartMarker && !isSetMapEndMarker) {
|
|
mapEndMarker.setLatLng(L.latLng(map.getCenter()));
|
|
$("#pin-marker-end").removeClass("pin-set").addClass("pin-move");
|
|
}
|
|
});
|
|
|
|
map.on("moveend", function () {
|
|
if (!isSetMapStartMarker && !isSetMapEndMarker) {
|
|
mapStartMarker.setLatLng(L.latLng(map.getCenter()));
|
|
$("#pin-marker-start").removeClass("pin-move pin-set");
|
|
}
|
|
|
|
if (isSetMapStartMarker && !isSetMapEndMarker) {
|
|
mapEndMarker.setLatLng(L.latLng(map.getCenter()));
|
|
$("#pin-marker-end").removeClass("pin-move pin-set");
|
|
}
|
|
});
|
|
// end map movement
|
|
|
|
// marker movement [start]
|
|
mapStartMarker.on("click", function () {
|
|
sourceLat = map.getCenter().lat;
|
|
sourceLng = map.getCenter().lng;
|
|
if (!isSetMapStartMarker) {
|
|
mapStartMarker.setLatLng(L.latLng(map.getCenter()));
|
|
isSetMapStartMarker = true;
|
|
$("#pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
|
|
}
|
|
addSourceMarker(1);
|
|
mapEndMarker.setLatLng(mapStartMarker.getLatLng()).addTo(map);
|
|
$("#pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
|
|
});
|
|
|
|
mapStartMarker.on("drag", function () {
|
|
$("#pin-marker-start").addClass("pin-move");
|
|
});
|
|
|
|
mapStartMarker.on("dragend", function () {
|
|
$("#pin-marker-start").removeClass("pin-move");
|
|
if ($("#pin-marker-start").hasClass("pin-set") || isSetMapStartMarker) {
|
|
$("#pin-marker-start").addClass("pin-set");
|
|
checkMarkersAndDrawPath();
|
|
} else {
|
|
map.setView(mapStartMarker.getLatLng());
|
|
}
|
|
});
|
|
|
|
function addSourceMarker(type) {
|
|
let sourceCoordinates = null;
|
|
if (type == 1) {
|
|
sourceCoordinates = L.latLng(map.getCenter());
|
|
} else if (type == 2) {
|
|
sourceCoordinates = [sourceLat, sourceLng];
|
|
}
|
|
}
|
|
// end marker movement
|
|
|
|
// marker movement [end]
|
|
mapEndMarker.on("click", function () {
|
|
$("#pin-marker-end").removeClass("pin-move pin-warn").addClass("pin-set");
|
|
});
|
|
mapEndMarker.on("click", function () {
|
|
destLat = map.getCenter().lat;
|
|
destLng = map.getCenter().lng;
|
|
addDestinationMarker(1);
|
|
if (!isSetMapEndMarker) {
|
|
mapEndMarker.setLatLng(L.latLng(map.getCenter()));
|
|
isSetMapEndMarker = true;
|
|
$("#pin-marker-end").removeClass("pin-move").addClass("pin-set");
|
|
}
|
|
checkMarkersAndDrawPath();
|
|
});
|
|
mapEndMarker.on("drag", function () {
|
|
$("#pin-marker-end").addClass("pin-move");
|
|
checkMarkersAndDrawPath();
|
|
});
|
|
|
|
mapEndMarker.on("dragend", function () {
|
|
$("#pin-marker-end").removeClass("pin-move");
|
|
|
|
if ($("#pin-marker-end").hasClass("pin-set") || isSetMapEndMarker) {
|
|
$("#pin-marker-end").addClass("pin-set");
|
|
checkMarkersAndDrawPath();
|
|
} else {
|
|
map.setView(mapEndMarker.getLatLng());
|
|
}
|
|
});
|
|
function addDestinationMarker(type) {
|
|
let destinationCoordinates = null;
|
|
if (type == 1) {
|
|
destinationCoordinates = L.latLng(map.getCenter());
|
|
} else if (type == 2) {
|
|
destinationCoordinates = [destLat, destLng];
|
|
}
|
|
}
|
|
// end marker movement
|
|
|
|
function checkMarkersAndDrawPath() {
|
|
setTimeout(() => {
|
|
if (
|
|
$("#pin-marker-start").hasClass("pin-set") &&
|
|
!$("#pin-marker-start").hasClass("pin-move") &&
|
|
$("#pin-marker-end").hasClass("pin-set") &&
|
|
!$("#pin-marker-end").hasClass("pin-move")
|
|
) {
|
|
drawPath();
|
|
} else {
|
|
if (routeControls.length) {
|
|
$(routeControls).each(function (index, control) {
|
|
map.removeControl(control);
|
|
routeControls.splice(routeControls.indexOf(index), 1);
|
|
});
|
|
}
|
|
}
|
|
}, 20);
|
|
}
|
|
function drawPath() {
|
|
if (routeControls.length) {
|
|
$(routeControls).each(function (index, control) {
|
|
map.removeControl(control);
|
|
routeControls.splice(routeControls.indexOf(index), 1);
|
|
});
|
|
}
|
|
routeControls.push(
|
|
L.Routing.control({
|
|
waypoints: [
|
|
L.latLng(
|
|
parseFloat(mapStartMarker.getLatLng().lat),
|
|
parseFloat(mapStartMarker.getLatLng().lng)
|
|
),
|
|
L.latLng(
|
|
parseFloat(mapEndMarker.getLatLng().lat),
|
|
parseFloat(mapEndMarker.getLatLng().lng)
|
|
),
|
|
],
|
|
fitSelectedRoutes: false,
|
|
draggableWaypoints: true,
|
|
createMarker: function () {
|
|
return null;
|
|
},
|
|
lineOptions: {
|
|
addWaypoints: false,
|
|
styles: [{
|
|
color: "#28a745",
|
|
opacity: 0.8,
|
|
weight: 5,
|
|
},],
|
|
},
|
|
}).on("routesfound", function (e) {
|
|
var divideBy = 2;
|
|
for (let index = 0; index < popupArrays.length; index++) {
|
|
map.removeLayer(popupArrays[index]);
|
|
}
|
|
var customOptions = {
|
|
maxWidth: "300",
|
|
maxHeight: "150",
|
|
className: "customRouteEstimate",
|
|
};
|
|
var popup = new L.Popup(customOptions);
|
|
var popupLocation = new L.LatLng(
|
|
e.routes[0].coordinates[
|
|
parseInt(e.routes[0].coordinates.length / divideBy)
|
|
].lat,
|
|
e.routes[0].coordinates[
|
|
parseInt(e.routes[0].coordinates.length / divideBy)
|
|
].lng
|
|
);
|
|
var popupContent =
|
|
'<span style="color:#FF5630; font-size:11px; font-family: IRANSansFaNum;">مسافت: </span>' +
|
|
parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) +
|
|
" کیلومتر";
|
|
saveTotalDistance = parseFloat(
|
|
parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2)
|
|
);
|
|
popup.setLatLng(popupLocation);
|
|
popup.setContent(popupContent);
|
|
popupArrays.push(popup);
|
|
map.addLayer(popup);
|
|
// item will show here [one of places]
|
|
}).addTo(map)
|
|
);
|
|
$(".leaflet-control-container").css("display", "none");
|
|
$(".leaflet-routing-container-hide").css("display", "none");
|
|
}
|
|
|
|
// confirmation user
|
|
$(document).on("click", "#send_conf_code_cta", function() {
|
|
const modal = $(this).parents(".modal");
|
|
$("#acceptCode_modal").find(".input-text-cleaner").val("");
|
|
modal.find('.phone-is-correct').each(function(index) { if($(this).val().length != 11) { $(this).addClass("validation-style") }});
|
|
if (modal.find(".validation-style").length != 0) {
|
|
Swal.fire({
|
|
icon: "error",
|
|
title: "خطا",
|
|
text: "شماره تلفن خود را وارد کنید",
|
|
cancelButtonText: "بستن",
|
|
showConfirmButton: false,
|
|
showCancelButton: true,
|
|
});
|
|
}else {
|
|
// here ajax start and in success next modal will be open
|
|
modal.modal("hide");
|
|
modal.find(".perv-number").text($("#accept_number").val());
|
|
$("#acceptCode_modal").modal({backdrop: 'static', keyboard: false}, "show");
|
|
}
|
|
});
|
|
// end confirmation user
|
|
|
|
// phone validation
|
|
function phone_checker(item) {
|
|
const modal = item.parents(".modal");
|
|
if (modal.find(".phone-is-correct").val().length == 11) {
|
|
item.removeClass("validation-style")
|
|
modal.find(".attent-num").fadeOut("100");
|
|
} else {
|
|
item.addClass("validation-style");
|
|
modal.find(".attent-num").fadeIn("100");
|
|
}
|
|
}
|
|
// end phone validation
|
|
|
|
// change phone number
|
|
$(document).on("click", "#back_phoneNumber" , function() {
|
|
const modal = $("#phoneNumber_modal");
|
|
$(this).parents(".modal").modal("hide");
|
|
modal.modal("show");
|
|
modal.find(".phone-is-correct").val("09");
|
|
modal.find('.perv-number-parent').removeClass("d-none");
|
|
modal.find('.phone-is-correct').removeClass("validation-style");
|
|
if (modal.find("#continue_with_current").length == 0) {
|
|
modal.find(".modal-footer").append(`<button id="continue_with_current" type="button" class="btn btn-secondary">ادامه با شماره فعلی</button>`);
|
|
modal.find(".modal-title").text("تغییر شماره ثبت شده");
|
|
}
|
|
});
|
|
// end change phone number
|
|
|
|
// continue with current number
|
|
$(document).on("click", "#continue_with_current", function() {
|
|
$("#acceptCode_modal").find(".input-text-cleaner").val("");
|
|
$("#phoneNumber_modal").modal("hide");
|
|
$("#acceptCode_modal").modal("show");
|
|
});
|
|
// end continue with current number
|
|
|
|
// auto tab input
|
|
$(".accept-number").keyup(function () {
|
|
if (this.value.length == this.maxLength) {
|
|
var $next = $(this).prev('.accept-number');
|
|
if ($next.length)
|
|
$(this).prev('.accept-number').focus();
|
|
else
|
|
$(this).blur();
|
|
}
|
|
});
|
|
// auto tab input
|
|
|
|
$(document).on("click", "#check_code_cta" , function() {
|
|
const verification_code = [$(".accept-number:nth-child(4)").val(), $(".accept-number:nth-child(3)").val(), $(".accept-number:nth-child(2)").val(), $(".accept-number:nth-child(1)").val()].join("")
|
|
});
|
|
|
|
// change layers
|
|
$(document).on("click", ".iran-change-layer", function () {
|
|
if (map.hasLayer(iranLayer)) {
|
|
var currZoom = map.getZoom();
|
|
if (currZoom < 8) {
|
|
map.setZoom(7);
|
|
}
|
|
map.removeLayer(iranLayer);
|
|
map.addLayer(trafficLayer);
|
|
map.options.minZoom = 7;
|
|
map.options.maxZoom = 14;
|
|
}
|
|
else if (map.hasLayer(trafficLayer)) {
|
|
map.removeLayer(trafficLayer);
|
|
map.addLayer(iranLayer);
|
|
map.options.minZoom = 6;
|
|
}
|
|
});
|
|
// end change layers
|