{"id":76115,"date":"2024-09-08T15:51:47","date_gmt":"2024-09-08T12:21:47","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-an-interactive-xy-image-plot-with-google-apps-script-and-leafletjs-2ooe\/"},"modified":"2024-09-08T15:51:47","modified_gmt":"2024-09-08T12:21:47","slug":"building-an-interactive-xy-image-plot-with-google-apps-script-and-leafletjs-2ooe","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-an-interactive-xy-image-plot-with-google-apps-script-and-leafletjs-2ooe\/","title":{"rendered":"\u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 XY \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Google Apps \u0648 Leaflet.js"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang Google Maps \u062f\u0627\u0631\u0627\u06cc \u062a\u0639\u062f\u0627\u062f \u0632\u06cc\u0627\u062f\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0646\u0642\u0627\u0637 \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0646\u0642\u0627\u0637 \u0631\u0627 \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u0686\u0647 \u0645\u06cc \u0634\u0648\u062f \u0631\u0648\u06cc \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631? \u0627\u06cc\u0646 \u0646\u0642\u0634\u0647 \u0647\u0627\u06cc XY Image Plot \u0645\u0639\u0645\u0648\u0644\u0627 \u0628\u0631\u0627\u06cc \u0646\u0642\u0634\u0647 \u0647\u0627\u06cc \u0637\u0628\u0642\u0647\u060c \u0628\u0627\u0632\u0631\u0633\u06cc \u0645\u062d\u0644 \u06a9\u0627\u0631 \u0648 \u062d\u062a\u06cc \u0628\u0627\u0632\u06cc \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0646\u0642\u0634\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0646\u0642\u0627\u0637 \u0642\u0627\u0628\u0644 \u06a9\u0634\u06cc\u062f\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Leaflet.js \u0648 Google Apps Script \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. \u0645\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0627\u0632 Google Sheets \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0646 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0634\u062f:<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Leaflet.js \u062f\u0631 \u0633\u0631\u0648\u06cc\u0633 HTML \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Google Apps
\n\u0646\u0645\u0627\u06cc\u0634 \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc Google Sheets
\n\u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u062f\u06cc\u0641 \u0628\u0631\u06af\u0647\u200c\u0647\u0627 \u0647\u0646\u06af\u0627\u0645 \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0646\u0634\u0627\u0646\u06af\u0631
\n\u0627\u06cc\u062c\u0627\u062f \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0632 \u0646\u0642\u0634\u0647 \u0648 \u0630\u062e\u06cc\u0631\u0647 \u062f\u0631 Sheets
\n\u062d\u0630\u0641 \u0646\u0634\u0627\u0646\u06af\u0631 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Leaflet.js \u062f\u0631 \u0633\u0631\u0648\u06cc\u0633 HTML \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Google Apps<\/p>\n

Leaflet.js \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0646\u06af\u0627\u0634\u062a \u0645\u062a\u0646 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0648\u0632\u0646\u060c \u0622\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0648 \u062f\u0627\u0631\u0627\u06cc \u0627\u0633\u0646\u0627\u062f \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. \u0622\u0646\u0647\u0627 \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u0646\u0642\u0634\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 “CRS.Simple”\u060c \u06cc\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0631\u062c\u0639 \u0645\u062e\u062a\u0635\u0627\u062a\u060c \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/p>\n

\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0627\u0631\u0628\u0631\u06af\u200c\u0646\u06af\u0627\u0631 Google<\/p>\n

\u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u0628\u0647 \u200b\u200b\u0646\u0627\u0645 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f map_pin \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0632\u06cc\u0631:<\/p>\n

\u0634\u0646\u0627\u0633\u0647
\n\u0639\u0646\u0648\u0627\u0646
\nx
\ny<\/p>\n

1
\n\u062a\u0633\u062a 1
\n10
\n30<\/p>\n

2
\n\u062a\u0633\u062a 2
\n50
\n80<\/p>\n

\u0633\u067e\u0633 Apps Script \u0631\u0627 \u0627\u0632 \u0645\u0646\u0648\u06cc Extensions \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u0641\u0627\u06cc\u0644 HTML<\/p>\n

\u0627\u0628\u062a\u062f\u0627\u060c \u0645\u0627 \u0628\u0627 \u0645\u062b\u0627\u0644 \u0627\u0635\u0644\u06cc \u0627\u0632 \u0627\u0633\u0646\u0627\u062f Leaflet \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0631 \u06a9\u0646\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062b\u0627\u0644 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u062f\u0631 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0634\u0631\u0648\u0639 \u0633\u0631\u06cc\u0639 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06cc\u06a9 \u0641\u0627\u06cc\u0644 HTML \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 Index \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n

<!DOCTYPE html>
\n<html>
\n<head>
\n <title>Quick Start – Leaflet<\/title>
\n <meta charset=”utf-8″ \/>
\n <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n <link rel=”stylesheet” href=”https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.css” \/>
\n <style>
\n #map {
\n height: 400px;
\n }
\n <\/style>
\n<\/head>
\n<body>
\n <div id=”map”><\/div><\/p>\n

<script src=”https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.js”><\/script>
\n <script>
\n var map = L.map(‘map’).setView([40.73, -73.99], 13);<\/p>\n

L.tileLayer(‘https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png’, {
\n maxZoom: 19,
\n attribution: ‘\u00a9 OpenStreetMap’
\n }).addTo(map);<\/p>\n

var marker = L.marker([40.73, -73.99]).addTo(map)
\n .bindPopup(‘Test Popup Message’)
\n .openPopup();
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n

\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 Code.gs \u0631\u0627 \u0628\u0627:<\/p>\n

function doGet() {
\n const html = HtmlService.createHtmlOutputFromFile(‘Index’)
\n .setTitle(‘Map with Draggable Points’)
\n .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
\n return html;
\n}<\/p>\n

\u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0631\u0648\u06cc Deploy \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u067e\u06cc\u0648\u0646\u062f \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627\u06cc\u062f Leaflet.js \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u0646\u0642\u0634\u0647 \u062f\u0631 \u0646\u06cc\u0648\u06cc\u0648\u0631\u06a9 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n

\u062e\u0648\u0628\u060c \u0627\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u0646\u0642\u0634\u0647 \u0645\u0639\u0645\u0648\u0644\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Leaflet \u0627\u0633\u062a. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0633\u0631\u0627\u063a \u0646\u0648\u0639 \u0646\u0642\u0634\u0647 CRS.Simple \u0645\u06cc \u0631\u0648\u06cc\u0645 \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0631\u0627\u0626\u0647 \u062a\u0635\u0648\u06cc\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

HTML \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0632 Leaflet Tutorials \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n

<!DOCTYPE html>
\n<html>
\n<head>
\n <title>CRS Simple Example – Leaflet<\/title>
\n <meta charset=”utf-8″ \/>
\n <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n <link rel=”stylesheet” href=”https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.css” \/>
\n <style>
\n #map {
\n height: 400px;
\n width: 600px;
\n }
\n body {
\n margin: 0;
\n padding: 0;
\n }
\n <\/style>
\n<\/head>
\n<body>
\n <div id=”map”><\/div><\/p>\n

<script src=”https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.js”><\/script>
\n <script>
\n \/\/ Set up the map with a simple CRS (no geographic projection)
\n var map = L.map(‘map’, {
\n crs: L.CRS.Simple,
\n minZoom: -1,
\n maxZoom: 4
\n });<\/p>\n

\/\/ Define the dimensions of the image
\n var bounds = [[0, 0], [1000, 1000]];
\n var image = L.imageOverlay(‘https:\/\/leafletjs.com\/examples\/crs-simple\/uqm_map_full.png’, bounds).addTo(map);<\/p>\n

\/\/ Set the initial view of the map to show the whole image
\n map.fitBounds(bounds);<\/p>\n

\/\/ Optional: Add a marker or other elements to the map
\n var marker = L.marker([500, 500]).addTo(map)
\n .bindPopup(‘Center of the image’)
\n .openPopup();
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 1000 x 1000 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645\u060c \u0633\u067e\u0633 \u0646\u0634\u0627\u0646\u06af\u0631 \u0645\u0631\u06a9\u0632\u06cc \u0631\u0627 \u062f\u0631 500, 500.<\/p>\n

\u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0633\u067e\u0633 Deploy>Test Deployments\u060c \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0648\u0639 \u0646\u0642\u0634\u0647 \u062c\u062f\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0646\u0642\u0634\u0647 \u0627\u06cc \u0628\u0627 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n

\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \u0628\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc Google Sheets<\/p>\n

\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0631\u06af\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627 \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0641\u0627\u06cc\u0644 Code.gs \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0645\u06a9\u0627\u0646 \u0647\u0627\u06cc \u0646\u0634\u0627\u0646\u06af\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f:<\/p>\n

function getPinData(){
\n const ss = SpreadsheetApp.getActiveSpreadsheet();
\n const sh = ss.getSheetByName(‘map_pin’);
\n const data = sh.getDataRange().getValues();
\n const json = arrayToJSON(data);
\n \/\/Logger.log(json);
\n return json
\n}<\/p>\n

function arrayToJSON(data=getPinData()){
\n const headers = data[0];
\n const rows = data.slice(1);
\n let jsonData = [];
\n for(row of rows){
\n const obj = {};
\n headers.forEach((h,i)=>obj[h] = row[i]);
\n jsonData.push(obj)
\n }
\n \/\/Logger.log(jsonData)
\n return jsonData
\n}<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0646 \u067e\u06cc\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 JSON \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u0645 \u062a\u0627 \u06a9\u0627\u0631 \u0628\u0627 \u0622\u0646\u0647\u0627 \u062f\u0631 HTML \u062f\u0631 \u0628\u062e\u0634 \u0628\u0639\u062f\u06cc \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0628\u0627\u0634\u062f.<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 HTML \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0631\u0648\u06cc \u0627\u06cc\u0646 JSON \u062d\u0644\u0642\u0647 \u0628\u0632\u0646\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0646\u0642\u0634\u0647\u060c \u067e\u06cc\u0646 \u0647\u0627\u06cc \u0646\u0642\u0634\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

\/\/ Add map pins from sheet data
\n google.script.run.withSuccessHandler(addMarkers).getPinData();<\/p>\n

function addMarkers(mapPinData) {
\n mapPinData.forEach(pin => {
\n const marker = L.marker([pin.x, pin.y], {
\n draggable: true
\n }).addTo(map);<\/p>\n

marker.bindPopup(`<b>${pin.title}`).openPopup();<\/p>\n

marker.on(‘dragend’, function(e) {
\n const latLng = e.target.getLatLng();
\n console.log(`Marker ${pin.title} moved to: ${latLng.lat}, ${latLng.lng}`);
\n });
\n });
\n }<\/p>\n

\u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0628\u0631\u0646\u0627\u0645\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627\u06cc\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0631\u06af\u0647 \u0634\u0645\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u0648\u0646\u062f!<\/p>\n

\u0647\u0631 \u067e\u06cc\u0646 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 \u0622\u0646 \u0631\u062f\u06cc\u0641 \u0627\u0633\u062a. \u067e\u06cc\u0646 \u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0646\u0642\u0637\u0647 \u0642\u0627\u0628\u0644 \u06a9\u0634\u06cc\u062f\u0646 \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u0645\u0627 \u0647\u0645\u0686\u0646\u0627\u0646 \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u062c\u062f\u06cc\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n

\u0630\u062e\u06cc\u0631\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0646\u0634\u0627\u0646\u06af\u0631 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0634\u06cc\u062f\u0646<\/p>\n

\u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u062c\u062f\u06cc\u062f\u060c \u0628\u0647 \u062f\u0648 \u062a\u0627\u0628\u0639 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645: \u06cc\u06a9\u06cc \u062f\u0631 HTML \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc\u060c \u0648 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u062c\u062f\u06cc\u062f \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c \u062f\u0631 \u0641\u0627\u06cc\u0644 Code.gs.<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc HTML \u0628\u0627:<\/p>\n

function addMarkers(mapPinData) {
\n mapPinData.forEach(pin => {
\n const { id, title, x, y } = pin;
\n const marker = L.marker([x, y], {
\n draggable: true
\n }).addTo(map);<\/p>\n

marker.bindPopup(`<b>${title}<\/b>`).openPopup();<\/p>\n

marker.on(‘dragend’, function(e) {
\n const latLng = e.target.getLatLng();
\n console.log(`Marker ${title} moved to: ${latLng.lat}, ${latLng.lng}`);
\n saveMarkerPosition({ id, title, lat: latLng.lat, lng: latLng.lng });
\n });
\n });
\n }<\/p>\n

function saveMarkerPosition({ id, title, lat, lng }) {
\n google.script.run.saveMarkerPosition({ id, title, lat, lng });
\n }<\/p>\n

\u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0641\u0627\u06cc\u0644 Code.gs \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0645\u06a9\u0627\u0646 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

function saveMarkerPosition({ id, lat, lng }) {
\n const ss = SpreadsheetApp.getActiveSpreadsheet();
\n const sh = ss.getSheetByName(‘map_pin’);
\n const data = sh.getDataRange().getValues();<\/p>\n

for (let i = 1; i < data.length; i++) {
\n if (data[i][0] === id) { \/\/ ID column (index 0)
\n sh.getRange(i + 1, 3).setValue(lat); \/\/ latitude column
\n sh.getRange(i + 1, 4).setValue(lng); \/\/ longitude column
\n break;
\n }
\n }
\n}<\/p>\n

\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u06a9\u0634\u06cc\u062f\u0646 \u0646\u0634\u0627\u0646\u06af\u0631\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0628\u0631\u06af\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f!<\/p>\n

\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u0645\u062a\u06cc\u0627\u0632\u0627\u062a \u062c\u062f\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0646\u0642\u0627\u0637 \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u062c\u0627\u0628\u0647\u200c\u062c\u0627 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0646\u0642\u0627\u0637 \u062c\u062f\u06cc\u062f \u0686\u0637\u0648\u0631\u061f \u0628\u0627\u0632 \u0647\u0645 \u0628\u0647 \u062f\u0648 \u062a\u0627\u0628\u0639 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645\u060c \u06cc\u06a9\u06cc \u062f\u0631 HTML \u0648 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0631 \u0641\u0627\u06cc\u0644 Code.gs.<\/p>\n

\u0627\u0628\u062a\u062f\u0627\u060c \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 HTML \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0646\u0642\u0637\u0647 \u062e\u0627\u0644\u06cc \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f\u060c \u06cc\u06a9 \u0641\u0631\u0645\u0627\u0646 \u0628\u0627\u0632 \u0634\u0648\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0633\u0631\u0648\u0631 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\/\/ Function to add a new pin
\n map.on(‘click’, function(e) {
\n const latLng = e.latlng;
\n const title = prompt(‘Enter a title for the new pin:’);
\n if (title) {
\n google.script.run.withSuccessHandler(function(id) {
\n addNewMarker({ id, title, lat: latLng.lat, lng: latLng.lng });
\n }).addNewPin({ title, lat: latLng.lat, lng: latLng.lng });
\n }
\n });<\/p>\n

function addNewMarker({ id, title, lat, lng }) {
\n const marker = L.marker([lat, lng], {
\n draggable: true
\n }).addTo(map);<\/p>\n

marker.bindPopup(`<b>${title}<\/b>`).openPopup();<\/p>\n

marker.on(‘dragend’, function(e) {
\n const latLng = e.target.getLatLng();
\n saveMarkerPosition({ id, title, lat: latLng.lat, lng: latLng.lng });
\n });
\n }<\/p>\n

\u0633\u067e\u0633 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0647 Code.gs \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0631\u062f\u06cc\u0641 \u062c\u062f\u06cc\u062f \u0630\u062e\u06cc\u0631\u0647 \u0634\u0648\u062f.<\/p>\n

function addNewPin({ title, lat, lng }) {
\n const ss = SpreadsheetApp.getActiveSpreadsheet();
\n const sh = ss.getSheetByName(‘map_pin’);<\/p>\n

\/\/ Check if there are any rows present, if not initialize ID
\n const lastRow = sh.getLastRow();
\n let newId = 1;<\/p>\n

if (lastRow > 0) {
\n const lastId = sh.getRange(lastRow, 1).getValue();
\n newId = lastId + 1;
\n }<\/p>\n

sh.appendRow([newId, title, lat, lng]);<\/p>\n

return newId;
\n}<\/p>\n

\u06cc\u06a9 \u0628\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u062d\u0627\u0644\u0627 \u0648\u0642\u062a\u06cc \u0631\u0648\u06cc \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u062e\u0627\u0644\u06cc \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0646\u0648\u0627\u0646\u06cc \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u062c\u062f\u06cc\u062f \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f!<\/p>\n

\u062d\u0630\u0641 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631<\/p>\n

\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0627\u06cc\u062f \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 CRUD \u062f\u0631 \u0646\u0645\u0627\u06cc \u0646\u0642\u0634\u0647 \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\u062a\u0627\u0628\u0639 \u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0634\u0627\u0646\u06af\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062f\u06a9\u0645\u0647 \u062d\u0630\u0641 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f:<\/p>\n

const popupContent = `<b>${title}<\/b><br><button onclick=”deleteMarker(${id})”>Delete Marker<\/button>`;
\n marker.bindPopup(popupContent).openPopup();<\/p>\n

\u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0627\u0632 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

\/\/ Function to delete a marker
\n function deleteMarker(id) {
\n const confirmed = confirm(‘Are you sure you want to delete this marker?’);
\n if (confirmed) {
\n google.script.run.withSuccessHandler(() => {
\n \/\/ Refresh the markers after deletion
\n google.script.run.withSuccessHandler(addMarkers).getPinData();
\n }).deleteMarker(id);
\n }
\n }<\/p>\n

\u0633\u067e\u0633 \u062a\u0627\u0628\u0639 \u0645\u0637\u0627\u0628\u0642 \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 Code.gs \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

function deleteMarker(id) {
\n const ss = SpreadsheetApp.getActiveSpreadsheet();
\n const sh = ss.getSheetByName(‘map_pin’);
\n const data = sh.getDataRange().getValues();<\/p>\n

for (let i = 1; i < data.length; i++) {
\n if (data[i][0] === id) { \/\/ ID column (index 0)
\n sh.deleteRow(i + 1); \/\/ Delete the row
\n break;
\n }
\n }
\n}<\/p>\n

\u0628\u0639\u062f \u0686\u0647 \u0645\u06cc \u0634\u0648\u062f\u061f<\/p>\n

\u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0627\u0641\u0632\u0648\u062f\u0646 \u0633\u0627\u06cc\u0631 \u0646\u0642\u0627\u0637 \u062f\u0627\u062f\u0647 \u0628\u0647 \u0647\u0631 \u0646\u0634\u0627\u0646\u06af\u0631\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u067e\u0648\u06cc\u0627\u060c \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0644\u06cc\u06a9 \u0648 \u06a9\u0634\u06cc\u062f\u0646. \u0634\u0645\u0627 \u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f! \u0627\u06cc\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0627\u0631\u06cc\u062f\u061f \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0638\u0631 \u0628\u062f\u0647\u06cc\u062f!<\/p>\n

Google Maps \u062f\u0627\u0631\u0627\u06cc \u062a\u0639\u062f\u0627\u062f \u0632\u06cc\u0627\u062f\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0646\u0642\u0627\u0637 \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0646\u0642\u0627\u0637 \u0631\u0627 \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u0686\u0647 \u0645\u06cc \u0634\u0648\u062f \u0631\u0648\u06cc \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631<\/em>? \u0627\u06cc\u0646 \u0646\u0642\u0634\u0647 \u0647\u0627\u06cc XY Image Plot \u0645\u0639\u0645\u0648\u0644\u0627 \u0628\u0631\u0627\u06cc \u0646\u0642\u0634\u0647 \u0647\u0627\u06cc \u0637\u0628\u0642\u0647\u060c \u0628\u0627\u0632\u0631\u0633\u06cc \u0645\u062d\u0644 \u06a9\u0627\u0631 \u0648 \u062d\u062a\u06cc \u0628\u0627\u0632\u06cc \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0646\u0642\u0634\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0646\u0642\u0627\u0637 \u0642\u0627\u0628\u0644 \u06a9\u0634\u06cc\u062f\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Leaflet.js \u0648 Google Apps Script \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. \u0645\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0627\u0632 Google Sheets \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0646 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0634\u062f:<\/strong><\/p>\n