Density Mapping online analysis

       ผมเคยนำเสนอ Heatmap มาแล้ว ปรากฏว่ามีหลายท่านสนใจและอยากจะนำไปใช้ บน application วันนี้ผมเลยทำคู่มือง่ายๆมาฝากสำหรับผู้เริ่มต้น จริงๆแล้ว Heatmap ก็คือการทำ interpolation map นั้นเอง แต่ข้อดีของการทำ heatmap ผ่าน heatMap API คือเราไม่ต้องมานั่งพัฒนา engine สำหรับ interpolate เอง เพียงแค่สมัครเป็นสมาชิกเพื่อนำ API code มาใช้็สามารถพัฒนา application ได้แล้วที่สำคัญการใช้งานค่อนข้องง่ายไม่ซับซ้อน ขั้นตอนก็มีดังนี้นะครับ

 

      1. สมัคร API ของ Google Map และ Heatmap สำหรับ heatmap สามารถเข้าไปลงทะเบียนได้ที่ http://www.heatmapapi.com/register.aspx 

      2. ทำการ add javascript API code ลงไปใน web page

 

    <script  src=”http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=your_key&#8221; type=”text/javascript”></script> 

    <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=your_key&#8221; type=”text/javascript”></script> 

     <script src=”http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js&#8221; type=”text/javascript”></script> 

 

      3. initialize Gmap(Google Map object) 

           function loadGoogle() {

         if (GBrowserIsCompatible()){

          m = new GMap2(document.getElementById(“map”));

          m.addControl(new GLargeMapControl());

          m.addControl(new GMapTypeControl());

          m.setCenter(new GLatLng(13.923403897723346,100.2777099609375), 11);

          m.setUIToDefault();

          initHeatmap();

         } else

          alert(‘Your Internet browser is not compatible with this website.’);

          }

        4. initializ heatmap API ในฟังก์ชั่น  initHeatmap()

              function initHeatmap(){

            // Heatmap Scripts

            try{

            // init Heatmap

                var myHM = new GEOHeatmap();

            // Set output Image Size

                myHM.Init(482, 532);

                var data =  new Array(); 

          // Set Data: lat,lon,value

                 var idata= ‘13.749056,100.660172,2,13.729046,100.627213,10,13.767731

,100.608673,11,13.724377,100.553741,5,13.751391,100.500183,13,13.670007,

100.589447,17,13.830079,100.695190,10,13.695359,100.643005,21,13.723377,100.511169,9′

             // Add data to HeatMap engine

                myHM.SetData(idata);

                myHM.SetBoost(1);

                myHM.SetDecay(0);

                var preUrl = myHM.GetURL();

                // Now render in our Google Map

                var heatmapOverlay = new HMGoogleOverlay(preUrl);

                m.addOverlay(heatmapOverlay);            

            }catch(e){

             alert(e.Message);

            }

        }

     4. Add event onload บน <BODY>

         <BODY onload=loadGoogle()>

     5. สร้าง DIV object บน html เพื่อใช้แสดงผล แผนที่ 

         <div id=”map”></div>

 

      ทำการ Save File เป็น .html ทดลองทำการ run ด้วย webbrowser ดูได้ผลดังรูปครับ ตัวอย่างเป็นแบบง่ายๆนะครับ จริงๆแล้วเวลาผมใช้งาน data จะเก็บบน database แล้ว feed ออกมาเป็น xml หรือ json จะมีประสิทธิภาพมากว่าการ embed ข้อมูลใน code 

 

9

 

10

Advertisements

2 thoughts on “Density Mapping online analysis

Add yours

  1. เทพครับ มีประโยชน์มาเลยผมกำลังจะทำ app เกี่ยวกับระบบรายงานมลพิษ
    น่าจะนำไปใช้ประโยชน์ได้มาก ขอบคุณครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

สร้างเว็บไซต์หรือบล็อกฟรีที่ WordPress.com.

Up ↑

%d bloggers like this: