API

แสดงพิกัดแบบ “Heatmap” ของร้านค้า ชิม ช้อป ใช้ บนแผนที่ออนไลน์ (พร้อมสอนใช้ Javascript Map API)

ณ วันนี้ (26/11/19) มาตรการชิม ช้อป ใช้ ในการกระตุ้นเศรษฐกิจรัฐบาล เดินทางมาถึงเฟสที่ 3 กันแล้ว ซึ่งในบทความนี้ เราจะไม่ได้มาพูดกันถึงเรื่องรายละเอียดของโครงการนี้นะครับ ว่าดีหรือไม่ดีอย่างไร (ขึ้นอยู่กับมุมมองแต่ละท่านจะดีกว่า ฮา)

แต่ท่านทราบหรือไม่ครับว่า มีร้านค้าที่เข้าร่วมในโครงการนี้ มากกว่า 100,000 ร้านค้าแล้ว!! (ข้อมูลจาก: เว็บไซต์หลัก)

คนหาร้านค้า ชิม ช้อป ใช้ ใกล้เคียง: https://map.longdo.com/thungngern/

ทีมนักพัฒนา Longdo Map เลยมีความสงสัยว่า เมื่อมันเยอะขนาดนี้แล้ว จะมีพื้นที่ไหนในไทย ที่คนในพื้นที่ยังคงเข้าไม่ถึงร้านค้าต่างๆ อยู่ … เราเลยคิดออกได้ว่า “Heat Map” ก็เป็นทางเลือกที่ดี ในการแสดงผล “ความหนาแน่น” ของข้อมูลเชิงพิกัดจำนวนมากครั้งนี้

และนี่คือหน้าตาของข้อมูลที่เราได้ออกมาครับ …


Heat Map คืออะไร​??

Heatmap คือ การแสดงความหนาแน่นของข้อมูล ที่ถูกนำมาแสดงในลักษณะของสีต่างๆ เมื่อนำมาใช้ร่วมกับแผนที่ จะสื่อได้ว่าในบริเวณพื้นที่ต่างๆ มีจำนวนพิกัดข้อมูลอยู่มากน้อยแค่ไหน ตัวอย่างดังภาพ

ตัวอย่างแสดง Heat Map ตำแหน่งพิกัดรถไฟฟ้าจาก World bank (คลิกเพื่อดูตัวอย่าง)

วิธีสร้างการแสดงรูปแบบ Heatmap บนแผนที่ออนไลน์ มีขั้นตอนดังนี้

  1. เตรียมพิกัด (latitude, longitude) ของข้อมูลที่ต้องการแสดง
  2. สมัคร Key Longdo Map API แบบใช้ฟรี
  3. สร้างแผนที่พื้นฐาน และติดตั้ง Library Heatmap for Longdo Map

มาเริ่มทำไปพร้อมกันครับ

1. เตรียมพิกัด (latitude, longitude) ของข้อมูลที่ต้องการแสดง

หากนักพัฒนาไม่มีข้อมูลเตรียมไว้ สามารถโหลดพิกัดตำแหน่งแบบ Open Data เพื่อทดสอบการใช้ Heatmap ได้ที่นี่: http://opend.openservice.in.th/opend/

ตัวอย่างข้อมูลรูปแบบข้อมูล ตำแหน่งที่ตั้งอำเภอ:

{
   "numData": "2",
   "data": [
     {
       "CHANGWAT_E": "Satun",
       "TAMBON_E": "Ko Sarai",
       "AMPHOE_T": "อ. เมืองสตูล",
       "CH_ID": "91",
       "AD_LEVEL": "4",
       "AMPHOE_E": "Mueang Satun",
       "CHANGWAT_T": "จ. สตูล",
       "ลำดับ": "1",
       "TAMBON_T": "ต. เกาะสาหร่าย",
       "TA_ID": "910106",
       "AM_ID": "9101",
       "LAT": "6.546",
       "LONG": "99.706"
     },
     {
       "CHANGWAT_E": "Rayong",
       "TAMBON_E": "Maptaphut",
       "AMPHOE_T": "อ. เมืองระยอง",
       "CH_ID": "21",
       "AD_LEVEL": "4",
       "AMPHOE_E": "Mueang Rayong",
       "CHANGWAT_T": "จ. ระยอง",
       "ลำดับ": "2",
       "TAMBON_T": "ต. มาบตาพุด",
       "TA_ID": "210114",
       "AM_ID": "2101",
       "LAT": "12.646",
       "LONG": "101.171"
     }
}

2. สมัคร Key Longdo Map API แบบใช้ฟรี

ศึกษาวิธีละเอียดได้ที่นี่: https://map.longdo.com/docs/javascript/getapi
นักพัฒนาจะได้ Key API ยาวๆ เช่น

f102734c594550307a38515b52xxxxxx

3. สร้างแผนที่พื้นฐาน และติดตั้ง Library Heatmap

3.1. ดาวน์โหลด 2 library ด้านล่าง:

heatmap.js: https://github.com/pa7/heatmap.js/blob/master/README.md
longdomap-heatmap.js: https://github.com/MetamediaTechnology/heatmap-longdo-map/tree/master/plugins/longdomap-heatmap

3.2. Copy โค้ดชุดนี้ ไปใช้ได้เลย (อย่าลืมเปลี่ยน Key API ด้วยนะ)

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Multiple Location Sample | Longdo Map</title>
        <style type="text/css">
          html{
            height:100%; 
          }
          body{ 
            margin:0px;
            height:100%; 
          }
          #map {
            height: 100%;
          }
        </style>

        <script type="text/javascript" src="https://api.longdo.com/map/?key=[YOUR-KEY-API]"></script>
        <script type="text/javascript" src="heatmap.js"></script>
        <script type="text/javascript" src="longdomap-heatmap.js"></script>
        <script>
          var map;
          var testData = {
            max: 10,
            data:[
              {lat:60.087195,lon:84.767761,value:1},
              {lat:41.804724,lon:-104.021301,value:1}
            ]
          };
          // ใส่ตำแหน่งพิกัดทั้งหมดของท่าน เก็บไว้ในตัวแปรตามตัวอย่างนี้

          var cfg = {
              'radius': 25, //การกระจายของข้อมูล
              "maxOpacity": .7, //ความโปร่งแสงของชั้นข้อมูล
              "scaleRadius": false,
              "useLocalExtrema": true
          };

          function init() {
              map = new longdo.Map({
                placeholder: document.getElementById('map')
              });
              heatmapLayer = new HeatmapOverlay(cfg);
              heatmapLayer.setData(testData);
              map.Layers.add(heatmapLayer);
          }
        </script>
  </html>

เพียงเท่านี้ นักพัฒนาก็จะได้การแสดงผลแบบ Heatmap แล้วล่ะครับ เราสามารถนำไปประยุกต์ใช้ได้อีกมาก เช่น วิเคราะห์แนวโน้มการเข้าถึง จุดให้บริการต่างๆ, การแพร่ระบาดของโรคต่างๆ ฯลฯ


*** ท่านสามารถศึกษาวิธีการใช้งาน Heatmap Library กับ Longdo Map แบบละเอียดได้ที่ https://map.longdo.com/docs/javascript/marker/heatmap