ساختن یک تصویر XY تعاملی با اسکریپت Google Apps و Leaflet.js

ek3nk4r 1 هفته پیش

0 1 خواندن این مطلب 12 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

Summarize this content to 400 words in Persian Lang Google Maps دارای تعداد زیادی ویژگی برای ترسیم نقاط روی نقشه است، اما اگر بخواهید نقاط را ترسیم کنید چه می شود روی یک تصویر? این نقشه های XY Image Plot معمولا برای نقشه های طبقه، بازرسی محل کار و حتی بازی ها استفاده می شود.

در این راهنما، نحوه ایجاد یک نقشه تعاملی با نقاط قابل کشیدن با استفاده از Leaflet.js و Google Apps Script را به شما نشان خواهم داد. ما همه چیز را از راه‌اندازی نقشه گرفته تا یکپارچه‌سازی داده‌ها از Google Sheets و استقرار آن به‌عنوان یک برنامه وب را پوشش خواهیم داد.

این راهنما شامل موارد زیر خواهد شد:

راه اندازی Leaflet.js در سرویس HTML اسکریپت Google Apps
نمایش نشانگرها با استفاده از داده‌های Google Sheets
به‌روزرسانی ردیف برگه‌ها هنگام جابجایی نشانگر
ایجاد نشانگرهای جدید از نقشه و ذخیره در Sheets
حذف نشانگر از برنامه وب

راه اندازی Leaflet.js در سرویس HTML اسکریپت Google Apps

Leaflet.js یکی از محبوب ترین کتابخانه های نگاشت متن باز است. این سبک وزن، آسان برای استفاده، و دارای اسناد عالی است. آنها از انواع مختلف نقشه پشتیبانی می کنند، از جمله “CRS.Simple”، یا سیستم مرجع مختصات، که به شما امکان می دهد یک تصویر پس زمینه ارائه دهید.

راه‌اندازی کاربرگ‌نگار Google

با ایجاد یک برگه به نام شروع کنید map_pin با ساختار زیر:

شناسه
عنوان
x
y

1
تست 1
10
30

2
تست 2
50
80

سپس Apps Script را از منوی Extensions باز کنید.

ایجاد فایل HTML

ابتدا، ما با مثال اصلی از اسناد Leaflet شروع می کنیم، فقط برای اینکه کتابخانه کار کند. می توانید مثال کامل را در راهنمای شروع سریع آنها در اینجا مشاهده کنید.

یک فایل HTML جدید به نام Index اضافه کنید و محتوا را به صورت زیر تنظیم کنید:

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

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

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

سپس فایل Code.gs را با:

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

ذخیره کنید و سپس روی Deploy کلیک کنید و به عنوان یک برنامه وب منتشر کنید. سپس پیوند استقرار جدید را باز کنید و باید Leaflet.js را در حال نمایش یک نقشه در نیویورک ببینید.

خوب، این نمونه نقشه معمولی با استفاده از Leaflet است. اکنون به سراغ نوع نقشه CRS.Simple می رویم که امکان ارائه تصویر پس زمینه را فراهم می کند.

HTML را با این مثال از Leaflet Tutorials به روز کنید.

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

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

// Set the initial view of the map to show the whole image
map.fitBounds(bounds);

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

در اینجا ما یک تصویر 1000 x 1000 پیکسل ارائه می دهیم، سپس نشانگر مرکزی را در 500, 500.

کلیک کنید ذخیره کنید، سپس Deploy>Test Deployments، برای مشاهده نوع نقشه جدید. اکنون باید نقشه ای با یک تصویر پس زمینه و یک نشانگر در مرکز داشته باشید.

راه‌اندازی نقشه با داده‌های Google Sheets

در مرحله بعد، از داده های برگه برای پر کردن مجموعه ای از نشانگرها روی نقشه استفاده می کنیم.

ابتدا یک تابع به فایل Code.gs اضافه کنید تا مکان های نشانگر را دریافت کنید:

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

در اینجا من پین‌ها را به‌عنوان JSON برمی‌گردانم تا کار با آنها در HTML در بخش بعدی آسان‌تر باشد.

اکنون یک تابع به HTML اضافه کنید تا روی این JSON حلقه بزند و پس از بارگیری نقشه، پین های نقشه را ایجاد کنید.

// Add map pins from sheet data
google.script.run.withSuccessHandler(addMarkers).getPinData();

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

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

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

ذخیره کنید و سپس برنامه آزمایشی را باز کنید. اکنون باید نشانگرهایی داشته باشید که از داده های برگه شما تولید می شوند!

هر پین دارای یک پنجره بازشو با عنوان آن ردیف است. پین ها در این نقطه قابل کشیدن هستند، اما ما همچنان به یک تابع برای ذخیره موقعیت جدید نیاز داریم.

ذخیره موقعیت نشانگر هنگام کشیدن

برای ذخیره موقعیت جدید، به دو تابع نیاز داریم: یکی در HTML برای ثبت رویداد در سمت مشتری، و دیگری برای ذخیره موقعیت جدید در سمت سرور، در فایل Code.gs.

به روز رسانی HTML با:

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

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

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

function saveMarkerPosition({ id, title, lat, lng }) {
google.script.run.saveMarkerPosition({ id, title, lat, lng });
}

و سپس یک تابع به فایل Code.gs اضافه کنید تا مکان را ذخیره کنید:

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

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

استقرار آزمایشی را ذخیره و بازخوانی کنید. اکنون باید هنگام کشیدن نشانگر، به‌روزرسانی برگه را ببینید!

اضافه کردن امتیازات جدید

اکنون می‌توانیم نقاط موجود را جابه‌جا کنیم، اما در مورد اضافه کردن نقاط جدید چطور؟ باز هم به دو تابع نیاز داریم، یکی در HTML و دیگری در فایل Code.gs.

ابتدا، یک تابع به HTML اضافه کنید تا زمانی که کاربر روی نقطه خالی روی نقشه کلیک می کند، یک فرمان باز شود و مقدار را به یک تابع سرور منتقل کنید.

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

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

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

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

سپس تابع را به Code.gs اضافه کنید تا ردیف جدید ذخیره شود.

function addNewPin({ title, lat, lng }) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sh = ss.getSheetByName(‘map_pin’);

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

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

sh.appendRow([newId, title, lat, lng]);

return newId;
}

یک بار دیگر ذخیره کنید و استقرار آزمایشی را بازخوانی کنید. حالا وقتی روی یک نقطه خالی کلیک می کنید، می توانید عنوانی را وارد کنید و یک نشانگر جدید ذخیره کنید!

حذف یک نشانگر

در نهایت، باید راهی برای حذف نشانگرها اضافه کنیم که یک برنامه کامل CRUD در نمای نقشه به ما می دهد.

تابع افزودن نشانگر را به روز کنید تا به پنجره بازشو دکمه حذف داده شود:

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

و سپس یک تابع برای حذف از سمت مشتری اضافه کنید:

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

سپس تابع مطابق را به فایل Code.gs اضافه کنید:

function deleteMarker(id) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sh = ss.getSheetByName(‘map_pin’);
const data = sh.getDataRange().getValues();

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

بعد چه می شود؟

از اینجا می‌توانید کارهای بیشتری انجام دهید، مانند افزودن سایر نقاط داده به هر نشانگر، تصاویر پس‌زمینه پویا، یا سایر تعاملات کلیک و کشیدن. شما حتی می توانید یک بازی بسازید! ایده ای برای یک مورد استفاده دارید؟ در زیر نظر بدهید!

Google Maps دارای تعداد زیادی ویژگی برای ترسیم نقاط روی نقشه است، اما اگر بخواهید نقاط را ترسیم کنید چه می شود روی یک تصویر? این نقشه های XY Image Plot معمولا برای نقشه های طبقه، بازرسی محل کار و حتی بازی ها استفاده می شود.

این راهنما شامل موارد زیر خواهد شد:

راه اندازی Leaflet.js در سرویس HTML اسکریپت Google Apps
نمایش نشانگرها با استفاده از داده‌های Google Sheets
به‌روزرسانی ردیف برگه‌ها هنگام جابجایی نشانگر
ایجاد نشانگرهای جدید از نقشه و ذخیره در Sheets
حذف نشانگر از برنامه وب

فهرست مطالب

راه اندازی Leaflet.js در سرویس HTML اسکریپت Google Apps

راه‌اندازی کاربرگ‌نگار Google

با ایجاد یک برگه به نام شروع کنید map_pin با ساختار زیر:

شناسه	عنوان	x	y
1	تست 1	10	30
2	تست 2	50	80

سپس Apps Script را از منوی Extensions باز کنید.

ایجاد فایل HTML

یک فایل HTML جدید به نام Index اضافه کنید و محتوا را به صورت زیر تنظیم کنید:

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

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40.73, -73.99], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© OpenStreetMap'
    }).addTo(map);

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

سپس فایل Code.gs را با:

function doGet() {
  const html = HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Map with Draggable Points')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return html;
}

HTML را با این مثال از Leaflet Tutorials به روز کنید.

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

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

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

    // Set the initial view of the map to show the whole image
    map.fitBounds(bounds);

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

در اینجا ما یک تصویر 1000 x 1000 پیکسل ارائه می دهیم، سپس نشانگر مرکزی را در 500, 500.

کلیک کنید ذخیره کنید، سپس Deploy>Test Deployments، برای مشاهده نوع نقشه جدید. اکنون باید نقشه ای با یک تصویر پس زمینه و یک نشانگر در مرکز داشته باشید.

نقشه جزوه

راه‌اندازی نقشه با داده‌های Google Sheets

در مرحله بعد، از داده های برگه برای پر کردن مجموعه ای از نشانگرها روی نقشه استفاده می کنیم.

ابتدا یک تابع به فایل Code.gs اضافه کنید تا مکان های نشانگر را دریافت کنید:

function getPinData(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');
  const data = sh.getDataRange().getValues();
  const json = arrayToJSON(data);
  //Logger.log(json);
  return json
}

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

در اینجا من پین‌ها را به‌عنوان JSON برمی‌گردانم تا کار با آنها در HTML در بخش بعدی آسان‌تر باشد.

اکنون یک تابع به HTML اضافه کنید تا روی این JSON حلقه بزند و پس از بارگیری نقشه، پین های نقشه را ایجاد کنید.

// Add map pins from sheet data
    google.script.run.withSuccessHandler(addMarkers).getPinData();

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

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

        marker.on('dragend', function(e) {
          const latLng = e.target.getLatLng();
          console.log(`Marker ${pin.title} moved to: ${latLng.lat}, ${latLng.lng}`);
        });
      });
    }

نقشه جزوه

ذخیره موقعیت نشانگر هنگام کشیدن

به روز رسانی HTML با:

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

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

        marker.on('dragend', function(e) {
          const latLng = e.target.getLatLng();
          console.log(`Marker ${title} moved to: ${latLng.lat}, ${latLng.lng}`);
          saveMarkerPosition({ id, title, lat: latLng.lat, lng: latLng.lng });
        });
      });
    }

    function saveMarkerPosition({ id, title, lat, lng }) {
      google.script.run.saveMarkerPosition({ id, title, lat, lng });
    }

و سپس یک تابع به فایل Code.gs اضافه کنید تا مکان را ذخیره کنید:

function saveMarkerPosition({ id, lat, lng }) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');
  const data = sh.getDataRange().getValues();

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

استقرار آزمایشی را ذخیره و بازخوانی کنید. اکنون باید هنگام کشیدن نشانگر، به‌روزرسانی برگه را ببینید!

نقشه جزوه

اضافه کردن امتیازات جدید

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

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

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

      marker.on('dragend', function(e) {
        const latLng = e.target.getLatLng();
        saveMarkerPosition({ id, title, lat: latLng.lat, lng: latLng.lng });
      });
    }

سپس تابع را به Code.gs اضافه کنید تا ردیف جدید ذخیره شود.

function addNewPin({ title, lat, lng }) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');

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

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

  sh.appendRow([newId, title, lat, lng]);

  return newId;
}

نقشه جزوه

حذف یک نشانگر

در نهایت، باید راهی برای حذف نشانگرها اضافه کنیم که یک برنامه کامل CRUD در نمای نقشه به ما می دهد.

تابع افزودن نشانگر را به روز کنید تا به پنجره بازشو دکمه حذف داده شود:


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

و سپس یک تابع برای حذف از سمت مشتری اضافه کنید:

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

سپس تابع مطابق را به فایل Code.gs اضافه کنید:

function deleteMarker(id) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sh = ss.getSheetByName('map_pin');
  const data = sh.getDataRange().getValues();

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