การสร้าง Maps ด้วย Tailwind CSS

การสร้าง Maps ด้วย Tailwind CSS

ในบทความนี้ เราจะมาเรียนรู้วิธีการสร้างแผนที่แบบ interactive โดยใช้ Tailwind CSS ร่วมกับ JavaScript libraries ที่ได้รับความนิยม เช่น Leaflet หรือ Google Maps เราจะเน้นการปรับแต่ง styles ของแผนที่, การจัดการ markers, และการนำไปใช้งานจริงแบบ step-by-step

ทำไมต้องใช้ Tailwind CSS กับ Maps?

Tailwind CSS ช่วยให้เราสามารถปรับแต่งรูปลักษณ์ของแผนที่ได้อย่างรวดเร็วและง่ายดาย โดยไม่ต้องเขียน CSS เองทั้งหมด เราสามารถใช้ utility classes ต่างๆ เพื่อกำหนดขนาด, สี, ระยะขอบ, และอื่นๆ นอกจากนี้ Tailwind CSS ยังช่วยให้เราสร้างแผนที่ที่ responsive และปรับให้เข้ากับหน้าจอต่างๆ ได้อย่างง่ายดาย

ข้อควรทราบก่อนเริ่ม

บทความนี้จะสมมติว่าคุณมีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, JavaScript, และ Tailwind CSS หากคุณยังไม่คุ้นเคยกับ Tailwind CSS, ขอแนะนำให้คุณอ่านบทความก่อนหน้านี้ของเราก่อน

นอกจากนี้ คุณจะต้องมี API key สำหรับ Google Maps (หากคุณเลือกใช้ Google Maps) คุณสามารถรับ API key ได้ฟรีจาก Google Cloud Console

การใช้งาน Leaflet กับ Tailwind CSS

Leaflet เป็น JavaScript library ที่มีขนาดเล็กและใช้งานง่าย สำหรับสร้างแผนที่แบบ interactive เราจะเริ่มต้นด้วยการสร้างแผนที่ Leaflet พื้นฐาน และปรับแต่ง styles ด้วย Tailwind CSS

ขั้นตอนที่ 1: ติดตั้ง Leaflet

คุณสามารถติดตั้ง Leaflet ได้โดยการดาวน์โหลดไฟล์จากเว็บไซต์ของ Leaflet หรือใช้ CDN (Content Delivery Network) ในตัวอย่างนี้ เราจะใช้ CDN:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obLRU9LJU="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZbo="
    crossorigin=""></script>

ขั้นตอนที่ 2: สร้าง HTML Structure

สร้าง div element สำหรับใส่แผนที่ และกำหนด id เพื่อให้เราสามารถอ้างอิงใน JavaScript ได้:

<div id="map" class="w-full h-96"></div>

เราใช้ Tailwind classes w-full เพื่อให้แผนที่เต็มความกว้างของ container และ h-96 เพื่อกำหนดความสูงเป็น 24rem (ประมาณ 384px)

ขั้นตอนที่ 3: Initialize แผนที่ด้วย JavaScript

เขียน JavaScript code เพื่อ initialize แผนที่ Leaflet:

var map = L.map('map').setView([51.505, -0.09], 13); // London coordinates

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

โค้ดนี้จะสร้างแผนที่ Leaflet ที่แสดง London และใช้ OpenStreetMap เป็น tile provider

ขั้นตอนที่ 4: เพิ่ม Marker

เพิ่ม marker บนแผนที่:

var marker = L.marker([51.5, -0.09]).addTo(map);

ขั้นตอนที่ 5: ปรับแต่ง Marker ด้วย Tailwind CSS (Optional - ต้องใช้ Custom CSS)

Leaflet markers โดย default ไม่สามารถปรับแต่งด้วย Tailwind CSS โดยตรงได้ (เพราะเป็น images หรือ SVG) แต่เราสามารถสร้าง custom markers ด้วย HTML และ CSS และใช้ Leaflet plugin เพื่อแสดงผล

ตัวอย่างการสร้าง Custom Marker ด้วย Leaflet DivIcon:

var customIcon = L.divIcon({
  className: 'my-custom-pin',
  html: '<div class="marker-pin bg-red-500 rounded-full w-6 h-6 flex items-center justify-center text-white text-xs">!</div>',
  iconSize: [30, 42],
  iconAnchor: [15, 42],
  popupAnchor: [0, -42]
});

var marker = L.marker([51.5, -0.09], {icon: customIcon}).addTo(map);

และเพิ่ม CSS (ในไฟล์ CSS หรือ <style> tag) เพื่อกำหนด styles:

.my-custom-pin {
    width: 30px;
    height: 42px;
}

.marker-pin {
    /* Tailwind classes applied inline in the JavaScript example */
}

ในตัวอย่างนี้ เราใช้ Tailwind classes bg-red-500, rounded-full, w-6, h-6, flex, items-center, justify-center, text-white, และ text-xs เพื่อปรับแต่งรูปลักษณ์ของ marker

การใช้งาน Google Maps กับ Tailwind CSS

Google Maps เป็นอีกทางเลือกหนึ่งสำหรับสร้างแผนที่แบบ interactive เราจะเริ่มต้นด้วยการสร้างแผนที่ Google Maps พื้นฐาน และปรับแต่ง styles ด้วย Tailwind CSS

ขั้นตอนที่ 1: เพิ่ม Google Maps API Key

เพิ่ม Google Maps API key ใน script tag:

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  async
  defer
></script>

แทนที่ YOUR_API_KEY ด้วย API key ของคุณ

ขั้นตอนที่ 2: สร้าง HTML Structure

สร้าง div element สำหรับใส่แผนที่ และกำหนด id เพื่อให้เราสามารถอ้างอิงใน JavaScript ได้:

<div id="map" class="w-full h-96"></div>

เราใช้ Tailwind classes w-full เพื่อให้แผนที่เต็มความกว้างของ container และ h-96 เพื่อกำหนดความสูงเป็น 24rem (ประมาณ 384px)

ขั้นตอนที่ 3: Initialize แผนที่ด้วย JavaScript

เขียน JavaScript code เพื่อ initialize แผนที่ Google Maps:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 }, // Sydney coordinates
    zoom: 8,
  });
}

window.initMap = initMap; // Important for the callback function

โค้ดนี้จะสร้างแผนที่ Google Maps ที่แสดง Sydney

ขั้นตอนที่ 4: เพิ่ม Marker

เพิ่ม marker บนแผนที่:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  const marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
  });
}

window.initMap = initMap;

ขั้นตอนที่ 5: ปรับแต่ง Styles ของ Google Maps

Google Maps อนุญาตให้เราปรับแต่ง styles ของแผนที่ได้ โดยการกำหนด JSON object ที่มี rules ต่างๆ เราสามารถใช้ Tailwind CSS เพื่อช่วยในการสร้าง styles เหล่านี้ได้

ตัวอย่างการปรับแต่ง styles ของ Google Maps ให้เป็นโทนสีเทา:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    styles: [
      {
        featureType: "all",
        stylers: [{ saturation: -100 }],
      },
    ],
  });

  const marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
  });
}

window.initMap = initMap;

ถึงแม้ว่าเราไม่ได้ใช้ Tailwind classes โดยตรงใน styles object แต่เราสามารถใช้ Tailwind colors และ spacing values เป็น reference ในการกำหนดค่าต่างๆ

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

• ปัญหา: แผนที่ไม่แสดงผล
• วิธีแก้ไข: ตรวจสอบให้แน่ใจว่าคุณได้ใส่ API key ที่ถูกต้อง (สำหรับ Google Maps) และได้ initialize แผนที่อย่างถูกต้อง
• ปัญหา: Marker ไม่แสดงผล
• วิธีแก้ไข: ตรวจสอบให้แน่ใจว่าคุณได้กำหนดตำแหน่งของ marker อย่างถูกต้อง และได้เพิ่ม marker ลงในแผนที่
• ปัญหา: แผนที่แสดงผลไม่ถูกต้องบน mobile
• วิธีแก้ไข: ใช้ Tailwind classes เพื่อให้แผนที่ responsive และปรับให้เข้ากับหน้าจอต่างๆ

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้างแผนที่แบบ interactive โดยใช้ Tailwind CSS ร่วมกับ Leaflet และ Google Maps เราได้เรียนรู้วิธีการปรับแต่ง styles ของแผนที่, การจัดการ markers, และการนำไปใช้งานจริงแบบ step-by-step หวังว่าบทความนี้จะเป็นประโยชน์สำหรับคุณ