add links to maps

main.js

@@ -23,6 +23,9 @@
     "attachment3": "admin_files"
   }
 
+  const ZOOM = 17
+  const METERS = 510
+
   let removedFilesLinks = []
 
   class Property {
@@ -107,6 +110,56 @@
     })
   }
 
+  function yandexMaps(lat, lon, zoom) {
+    return `https://yandex.ru/maps/213/moscow/?ll=${lon}%2C${lat}&z=${zoom}`
+  }
+
+  function googleMaps(lat, lon, meters) {
+    return `https://www.google.ru/maps/@${lat},${lon},${meters}m`
+  }
+
+  function pastvu(lat, lon, zoom) {
+    return `https://pastvu.com/?g=${lat},${lon}&z=${zoom}&s=yandex&t=scheme&type=1`
+  }
+
+  function twoGis(lat, lon, zoom) {
+    return `https://2gis.ru/moscow?m=${lon}%2C${lat}%2F${zoom}`
+  }
+
+  function makeRef(linkCallback, iconSrc, lat, lon, zoom) {
+    let container = document.createElement("a")
+    container.href = linkCallback(lat, lon, zoom)
+    container.setAttribute('target', "_blank")
+
+    let icon = document.createElement("img")
+    icon.src = iconSrc
+    icon.classList.add("map-icon")
+    container.appendChild(icon)
+
+    return container
+  }
+
+  let makeCoordinatesLinks = (function() {
+    var executed = false
+    return function () {
+      if (executed) return
+      executed = true
+      
+      let lat = document.querySelector(`input[name="cp[lattitude]"]`).value
+      let lon = document.querySelector(`input[name="cp[longitude]"]`).value
+      let linksContainer = document.createElement("div")
+      
+      linksContainer.appendChild(makeRef(yandexMaps, "https://upload.wikimedia.org/wikipedia/commons/7/72/Yandex_Maps_icon.svg", lat, lon, ZOOM))
+      linksContainer.appendChild(makeRef(googleMaps, "https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_%282020%29.svg", lat, lon, METERS))
+      linksContainer.appendChild(makeRef(pastvu, "https://pastvu.com/coast-icon.png", lat, lon, ZOOM))
+      linksContainer.appendChild(makeRef(twoGis, "https://d-assets.2gis.ru/favicon.png", lat, lon, ZOOM))
+
+      console.log(linksContainer)
+
+      document.querySelector(`div:has(> div > input[name="cp[longitude]"])`).after(linksContainer)
+    }
+  })()
+
   function makeDownloadLink(name, href = null) {
     let downloadLink = document.createElement("a")
     downloadLink.setAttribute("download", name)
@@ -301,8 +354,8 @@
     var executed = false
     return function(insertedFileRows) {
       if (executed) return
-
       executed = true
+
       document.querySelector("#new").querySelectorAll("input[type=file]").forEach((element, index) => {
         element.id = `input-file-${index}`
         element.setAttribute("multiple", "multiple")
@@ -413,6 +466,7 @@
     prettifyFiles(insertedFileRows)
       
     $("#cps_main").select2()
+    makeCoordinatesLinks()
   }
 
   function uglify(form, was, became) {
@@ -642,6 +696,11 @@
       width: 150px;
     }
 
+    #new .map-icon {
+      width: 15px;
+      height: 15px;
+    }
+
     input[type=submit] {
       width: fit-content;
     }