API

วิธีใช้ Map Hover Effect กับการวาดขอบเขตการปกครองของไทย

Posted on by nitikorn

การใช้งาน Hover Effect ในการวาดขอบเขตการปกครองของไทยบนแผนที่ออนไลน์นั้นสามารถเพิ่มประสบการณ์การใช้งานที่ดีขึ้นให้กับผู้ใช้ โดยจะทำให้เมื่อผู้ใช้เลื่อนเมาส์ไปบนพื้นที่ต่างๆ ขอบเขตของพื้นที่นั้นจะถูกเน้นสีขึ้นเพื่อบอกถึงพื้นที่ที่ผู้ใช้กำลังสนใจอยู่ ซึ่งสามารถทำได้ง่ายๆ ด้วยการใช้ Longdo Map API และ JavaScript API เวอร์ชัน 3

ตัวอย่างการแสดง Hover Effect บนแผนที่ Map API

การวางเมาส์บนขอบเขตอำเภอในกรุงเทพมหานคร

ตัวอย่างโค้ด

โค้ดต่อไปนี้จะแสดงแผนที่ประเทศไทย พร้อมการใช้ Hover Effect ในการเน้นขอบเขตการปกครองเมื่อเลื่อนเมาส์ไปบนพื้นที่นั้น ๆ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hover Effect</title>
    <style type="text/css">
      html {
        height: 100%;
      }
      body {
        margin: 0px;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.longdo.com/map3/?key=[key]"
    ></script>
    <script>
      function init() {
        map = new longdo.Map({
          placeholder: document.getElementById('map'),
          zoom: 9,
          lastView: false
        });
        map.Event.bind('ready', function () {
          geocode = '10__';
          dataset = 'IG';
          map.Renderer.addSource('states', {
            type: 'geojson',
            generateId: true,
            data: `https://api.longdo.com/map/services/object?mode=geojson&id=${geocode}&dataset=${dataset}&key=[key]`
          });

          // การใช้งาน fill-opacity expression เพื่อสร้าง Hover Effect
          map.Renderer.addLayer({
            id: 'state-fills',
            type: 'fill',
            source: 'states',
            layout: {},
            paint: {
              'fill-color': '#627BC1',
              'fill-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false],
                0.8,
                0.5
              ]
            }
          });

          map.Renderer.addLayer({
            id: 'state-borders',
            type: 'line',
            source: 'states',
            layout: {},
            paint: {
              'line-color': '#627BC1',
              'line-width': 2
            }
          });

          map.Renderer.on('click', 'state-fills', function (e) {
            e.lngLat.lon = e.lngLat.lng
            var popup = new longdo.Popup(e.lngLat,{title:e.features[0].properties.name_t})
            map.Overlays.add(popup)
          });

          // อัปเดต feature state เมื่อเมาส์เลื่อนผ่านพื้นที่ต่างๆ
          map.Renderer.on('mousemove', 'state-fills', function (e) {
            if (e.features.length > 0) {
              if (hoveredStateId) {
                map.Renderer.setFeatureState(
                  { source: 'states', id: hoveredStateId },
                  { hover: false }
                );
              }
              hoveredStateId = e.features[0].id;
              map.Renderer.setFeatureState(
                { source: 'states', id: hoveredStateId },
                { hover: true }
              );
            }
          });

          // อัปเดต feature state เมื่อเมาส์ออกจากพื้นที่
          map.Renderer.on('mouseleave', 'state-fills', function () {
            if (hoveredStateId) {
              map.Renderer.setFeatureState(
                { source: 'states', id: hoveredStateId },
                { hover: false }
              );
            }
            hoveredStateId = null;
          });
        });
      }
      var hoveredStateId = null;
    </script>
  </head>
  <body onload="init();">
    <div id="map"></div>
  </body>
</html>

*** อย่าลืมแก้ไข Key Map API โดยสมัครฟรีได้ที่ https://map.longdo.com/console

คำอธิบายโค้ด

  1. การตั้งค่าพื้นฐาน:
    • html และ body ถูกตั้งค่าให้เต็มความสูงของหน้าจอ
    • #map ถูกตั้งค่าให้ขยายเต็มหน้าจอ
  2. การนำเข้า Longdo Map API:
  3. การสร้างแผนที่:
    • ฟังก์ชัน init ถูกเรียกเมื่อโหลดหน้าเว็บ
    • สร้างแผนที่โดยตั้งค่าตำแหน่งและการซูม
  4. การเพิ่มข้อมูลขอบเขตการปกครอง:
    • ใช้ map.Renderer.addSource เพื่อเพิ่มแหล่งข้อมูล GeoJSON สำหรับขอบเขตการปกครอง
    • ใช้ map.Renderer.addLayer เพื่อวาดชั้นข้อมูลขอบเขตการปกครองและตั้งค่า Hover Effect ด้วย fill-opacity
  5. การจัดการ Hover Effect:
    • ใช้เหตุการณ์ mousemove และ mouseleave เพื่ออัปเดตสถานะของฟีเจอร์เมื่อเมาส์เลื่อนผ่านหรือออกจากพื้นที่

อ่านคู่มืออย่างละเอียด

สามารถเปลี่ยนขอบเขตจังหวัดหรือระดับอำเภอได้

geocode = '20__';
dataset = 'IG';
map.Renderer.addSource('states', {
      type: 'geojson',
      generateId: true,
      data: `https://api.longdo.com/map/services/object?mode=geojson&id=${geocode}&dataset=${dataset}&key=[YOUR-KEY-API]`
});

สามารถแก้ไขเลข Geocode ได้ทันที ศึกษาเลขรหัส Geocode ได้ที่นี่

Leave a Reply