Google Street view 3D Immersive

      หัวข้อที่แล้วเขียนถึงเรื่องของ Teleatlas ก็เลยติดลมครับ ชักสนุกอยากมานั่งเขียนเรื่องของ mobile mapping ต่อ mobile mapping คือการทำแผนที่แบบการเคลื่อนที่รวดเร็วครับ (ต่างจาก moblie gis นะ) มีการใช้วิธีสำรวจแบบนี้มานานแล้ว แต่เนื่องจากในอดีตเทคโนโลยียังไม่พัฒนามาก ประกอบกับอุปกรณ์ต่างๆมีราคาสูงทำให้ไม่ค่อยแพร่หลายนัก แต่ปัจจุบันทุกสิ่งพัฒนาไปอย่างมาก ชุดอุปกรณ์ เครื่องมือประมวลผล ราคาถูกลงและมีประสิทธิภาพมากขึ้น ดังนั้นการสำรวจและจัดทำแผนที่ด้วยวิธีนี้จึงกลับมาได้รับความนิยมเพิ่มขึ้น ประกอบกับมีผู้ประกอบการขยายตัวของการบริการข้อมูล streetview ที่มีอยู๋หลายเจ้า ดังที่ผมเคยเขียนถึงมาแล้ว

     วันนี้มาพูดถึง Google Street view รูปแบบของการบริการข้อมูล streetview ที่มาพร้อมกับบริการแผนที่ออนไลน์อย่าง google map และ google earth หลายท่านอาจจะสงสัยว่า google เก็บข้อมูลอย่างไร วันนี้ผมมีข้อมูลคราวๆเกี่ยวกับอุปกรณ์การสำรวจมาให้ดูกันครับ แต่ถ้าจะเอาถึงรายละเอียดและเทคนิคคงจะหาได้ยากสักหน่อยเพราะงานนี้ google ไม่ได้เปิดเผย

     ช่วงแรก google ได้มีการว่าจ้างบริษัท immersivemedia ในการจัดเก็บข้อมูลและพัฒนาระบบสำรวจ โดยช่วงแรกก็มีการใช้อุปกรณ์ของ  immersivemedia ในการบันทึกภาพพานอราม่า และจัดทำ streetview application ขึ้นโดยเริ่มต้นจาก 5 เมืองในสหรัฐ

 

       

            ภายหลังก็มีการปรับเปลี่ยน มาใช้กล้อง ladybugs ในการบันทึกภาพพานอราม่า และทำการสำรวจจัดเก็บข้อมูลด้วยทีมของ google เองโดยได้มีการขยายพื้นที่จัดเก็บข้อมูลออกไปยังที่ต่างๆอีกเกือบ 100 แห่งทั้งในอเมริกา, อิตาลี ฝรั่งเศส และกำลังขยายไปยังพื้นที่ต่างๆอีกในอนาคต

 

ตัวอย่าง รถชุดใหม่ที่ใช้การบันทึกภาพ

 

ตัวอย่างชุดกล้อง spherical ของ ladybug2 ความละเอียด 1024×768 ความถี่ 30 fps

 

 

ภาพผลลัพธ์แบบ high quality spherical image stitching

         แต่ google เองก็มีปัญหาในหลายพื้นที่ ในเรื่องการสำรวจและการถ่ายภาพ เช่นการบันทึกข้อมูลผู้คนที่เดินตามท้องถนน ดังที่เคยมีกรณีร้องเรียน จนทำให้ google ต้องมีการเบลอภาพคนออกจากภาพพานอรามา หรือกรณีการเข้าไปบันทึกภาพในถนนส่วนบุคคล แต่ถึงอย่างไรในอนาคต ผมเชื่อว่า google ก็คงสามารถให้บริการ street view ได้อย่างเต็มรูปแบบ เพื่อรองรับกับธุรกิจการโฆษณาในที่ต่างๆ ซึ่งผู้ใช้สามารถเข้าไปเลือกดูได้ในระหว่างที่เรียกดูข้อมูลจาก streetview ส่วนเมืองไทยคงต้องรอ google street view ไปก่อน แต่ตอนนี้ก็สามารถใช้บริการข้อมูลจาก MapJack แทนไปพรางๆไ

 

อ้างอิงจาก

- http://www.popularmechanics.com/technology/industry/4232286.html?page=1

- http://www.immersivemedia.com/demo/demo.php

- http://www.ptgrey.com/products/ladybug2/index.asp

- http://gizmodo.com/gadgets/ladybug2-picnic/google-streetview-cars-rocking-ladybug2-spherical-camera-283769.php

- http://www.slaw.ca/2007/09/12/canada-to-google-street-view-car/

- http://en.wikipedia.org/wiki/Google_Street_View

- http://uk.techcrunch.com/2008/07/05/google-starts-street-view-mapping-in-uk-and-heres-the-evidence/

- http://technology.timesonline.co.uk/tol/news/tech_and_web/article4263569.ece

- http://news.bbc.co.uk/2/hi/technology/7534755.stm

- http://www.telegraph.co.uk/news/2475792/Google-Street-View-car-pulled-over-by-police-for-driving-in-bus-lane.html

Beijing Olympics Satellite Imagery

             อีกไม่กี่วันกิจกรรมงานกีฬาโอลิมปิกที่ปักกิ่งก็กำลังจะเริ่มขึ้นแล้ว โดยงานนี้เจ้าภาพได้ทุ่มงบประมาณมหาศาลในการจัดงาน สิ่งหนึ่งที่ดูเหมือนว่าจะเป็นไฮไลท์ในงานนี้ก็คือ สนามกีฬาและสิ่งปลูกสร้างใหม่ ที่เจ้าภาพจีนได้สร้างขึ้นมาเพื่ออวดชาวโลก สำหรับท่านที่ไม่มีโอกาสเดินทางไปสัมผัสความยิ่งใหญ่ในงานกีฬาโอลิมปิกถึงประเทศจีน ก็สามารเข้าชมสถาปัตยกรรมเหล่านี้และสนามแข่งขันต่างๆผ่านทาง Google Earth ได้

             Google ได้มีการ update ภาพถ่ายดาวเทียมชุดใหม่ในบริเวณกรุงปักกิ่ง โดยมีการใช้ภาพถ่ายดาวเทียมของ  Geoeye ที่บันทึกเมื่อวันที่ 19 กรกฏาคม 2551 โดยในภาพแสดงบริเวณสนามกีฬาหลัก นอกจากนี้ยังมีการให้บริการโมเดลสนามกีฬาและสิ่งปลูกสร้างต่างๆ ผ่านทาง 3DWarehouse ซึ่งท่านสามารถเข้าไปดาวน์โหลด 3D โมเดลได้ที่ http://sketchup.google.com/3dwarehouse/cldetails?mid=efe83785f1aaaae0ae682533f3f1d4dd&prevstart=0 

 

               นอกจากนี้ยังมี web application ชื่อ earthswoop แสดงรูปภาพ และข้อมูลของสถานที่ต่างๆที่จัดการแข่งขันกีฬาโอลิมปิกในจีน โดยใช้ Google Earth API ลองเข้าเล่นได้ที่ http://www.earthswoop.com/collection.php?id=19

 

 

        

Free KML Editor

        ผมเคยเขียนเรื่องของการสร้างข้อมูลแผนที่จาก Google Map Creator Tool ไปแล้ว ซึ่ง Googlmap ก็มีบริการ My Map ที่ให้ผู้ใช้เข้าไปสร้างแผนที่อย่างง่าย ด้วยเครื่องมือ digitize ฟีเจอร์ point, line, polygon บนแผนที่จาก google map และสามารถ export ข้อมูล KML ออกมาได้ แต่ดูเหมือนว่าความสามารถหรืออุปกรณ์ช่วยเหลืออาจจะยังไม่ดีเท่าไหร่นัก

        วันนี้ผมเลยมีอีกหนึ่ง application ทางเลือกมานำเสนอ โดย application ที่ว่าคือ My google map tools ความน่าสนใจของเจ้าตัวนี้จากที่ผมทดลองใช้แล้ว คือมีความสามารถในการสร้างข้อมูล geometry ที่ซับซ้อนได้ เช่น polygon with hole, circular shape และยังมีรายการ vertex list ให้ดูในขณะที่ทำงาน digitize ด้วย ผลลัพธ์ที่ได้นอกจาก KML file แล้ว ยังมี javascript code สำหรับนำไปแปะกับ html ได้อีกด้วย ท่านที่สนใจลองเข้าไปใช้งานได้ที่ http://www.birdtheme.org/useful/googletool.html 

ซิ่งไปบน google map

        เดี่ยวนี้น้ำมันก็แพงการขับรถเล่นชมวิวอาจจะเป็นไปได้ยากสักหน่อย เพราะว่าก่อนจะออกเดินทาง ก็ต้องคิดหน้าคิดหลังถึงค่าใช้จ่ายที่จะเกิดขึ้น แต่เดี่ยวนี้มีของเล่นใหม่ที่ช่วยแก้เซ้งสำหรับท่านที่ชอบขับรถชมวิวหรือสำหรับขอเกมส์แนว driving สิ่งที่ผมกล่าวถึงก็คือ 2D Driving Simulator on Google Maps ของคุณ Katsuomi Kobayashi ที่พัฒนา application ด้วย flash ซึ่งใช้ข้อมูลจาก Google Map โดยจำลองการขับรถไปบนถนนทั่วโลก ท่านจะได้เห็นทิวทรรศข้างทางจากมุมสองและได้ชมความสวยงามของภูมิประเทศไปด้วย

        โปรเจคมันส์ๆที่น่าสนใจ ผมไปลองขับมาแล้วบังคับยากเอาการทีเดียว แต่ข้อดีคือการที่เราสามารถเลือกเมือง หรือเลือกประเทศที่อยากจะไปได้แบบตามใจฉันโดยไม่ต้องคำนึงถึงเงินในกระเป๋า ลองเข้าไปขับขี่ได้ที่ http://geoquake.jp/en/webgame/DrivingSimulatorGM/ 

อ้างอิงมาจาก

http://googlegeodevelopers.blogspot.com/2008/06/simulating-driving-on-google-maps-using.html

 

Tour de France on Google Map

        กีฬาอีกรายการที่ดูแล้วสนุกไม่แพ้ฟุตบอลและเทนนิส ก็คือการแข่งขันจักรยานทางไกล Tour de France ผมเองชอบวิวทิวทัศน์สองข้างทางมากที่สุด เพราะเป็นสิ่งที่ดูแล้วมันเพลินตาดี แต่แน่นอนว่าผู้ชมอย่างเราคงไม่สามารถเห็นเส้นทางทั้งหมดของการแข่งขันได้ แต่แล้ว google ก็จัดให้ โดย google ได้นำเสนอเส้นทางและทิวทรรศสองข้างทางผ่าน google street view โดยผู้ใช้สามารถเรียกดูข้อมูลจากบริการนี้ ได้ฟรีจาก google earth และ google map ท่านที่สนใจเข้าไปดูรายละเอียดเพิ่มเติมได้ที่ http://maps.google.com/landing/tourdefrance2008/ หรือสำหรับท่านที่ต้องการรับชมผ่าน google map ก็เพียงแค่ เข้าไปยัง french street view หรือพิมพ์

http://maps.google.fr/?hl=en&ie=UTF8&layer=c&ll=45.813486,2.307129&spn=9.662972,14.72168&z=6 

เท่านี้ก็สามารถรับชมภาพเส้นทางการแข่งขันได้แล้วครับ

 

อ้างอิงจาก

http://www.gearthblog.com/blog/archives/2008/07/google_releases_street_view_for_tou.html

Google Map Maker

        Google เปิดตัวระบบบริการเสริมใหม่ที่ทำให้หลายๆคนตื่นเต้น ดีใจที่ว่าบ้านฉันจะมีข้อมูลลงใน google map กะเขาสักที บริการที่ว่าคือ google map maker ครับ อธิบายง่ายก็คือบริการ พร้อมเครื่องมือวาดแผนที่ ที่ผู้ใช้สามารถ edit และ สร้าง ข้อมูลถนน และข้อมูลอื่นๆ เช่น POI, landmark และสถานที่ทางธุรกิจ บน google map ได้ เป้าหมายหลักน่าจะเป็นการต้องการเพิ่มข้อมูลต่างๆที่ได้จากผู้ใช้ ซึ่งอยู่ในท้องถิ่น โดยผู้ใช้สามารถนำเข้าจาก KML หรือดิจิไทล์จากภาพถ่ายดาวเทียม ที่สำคัญยังสามารถกรอก attribute ลงไปได้อีกด้วย แนวคิดนี้ไม่ใช้แนวคิดใหม่นักเพราะก่อนหน้านี้ก็มี OSM (Open street map ) ที่ให้บริการในลักษณะนี้อยู่ แต่อาจจะไม่ได้มีฐานของผู้ใช้และลูกค้ามากเท่าของ Google

       อนาคตถ้ากลุ่มผู้ใช้ของ google map ที่มีมากอยู่แล้วช่วยกัน update แผนที่ google ก็จะกลายเป็นคลังแผนที่ที่มีข้อมูลมากที่สุดอีกเจ้าหนึ่ง โดยปัจจุบันแนวคิดนี้ยังเป็นแค่การเริ่มต้นโดยให้บริการ map maker ในประเทศ Cyprus, Iceland, Pakistan, Vietnam ,Antigua & Barbuda, Bahamas, Barbados, Bermuda, British Virgin Islands, Cayman Islands, Grenada, Jamaica, Netherlands Antilles, St. Kitts & Nevis, St. Lucia, St. Vincent & the Grenadines, Trinidad & Tobago ท่านที่สนใจ ตอนนี้ลองแวะไปทดลองสร้างแผนที่ในประเทศเพื่อนบ้านอย่าง เวียดนาม ก่อนได้ที่ http://www.google.com/mapmaker

 

Googlemap Layers

        หลังจากเปิดตัวการใช้งาน Openlayers ไปแล้วฟีดแบคกลับมาค่อนข้างดีมีหลายท่านชอบและนำไปใช้ จุดเด่นคือความง่ายและความยืดหยุ่น ผมก็พยายามจะเขียนคู่มือง่ายๆเพื่อให้สามารถนำไปฝึกใช้งานกัน แต่คงจะใช้เวลาสักระยะหนึ่งเนื่องจากช่วงนี้กำลังก้มหน้าก้มตาทำ thesis อยู่

       ในหัวข้อนี้ผมจะเขียนถึงการใช้ openlayers กับ google map โดยใน openlayers api ได้มี class สำหรับเชื่อมต่อกับ google map api อยู่แล้ว เพียงแค่ท่านนำ google map key ไปใส่ก็สามารถทำงานได้ทันทีเลย ตัวอย่างต่อไปนี้ผมจะสาธิตการใช้ google map layers โดยท่านสามารถเขียน code ได้ดังต่อไปนี้

<html >
  <head>
    <title>OpenLayers Google Layer Example</title>
    <link rel=”stylesheet” href=”http://openlayers.org/dev/theme/default/style.css” type=”text/css” />
    <style type=”text/css”>
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
        }
    </style>

<!– Google Map API Key –>
    <script src=‘http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ’></script>
    <script src=”http://openlayers.org/api/OpenLayers.js“></script>
    <script type=”text/javascript”>
        var map;

        function init() {
            //สร้่าง map object สำหรับ openlayers
            map = new OpenLayers.Map(’map’);
            // กำหนดประเภทของ map control bar
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            // กำหนด layer type ของ google layers
            var gphy = new OpenLayers.Layer.Google(
                “Google Physical”,
                {type: G_PHYSICAL_MAP}
            );
            var gmap = new OpenLayers.Layer.Google(
                “Google Streets” // the default layers
            );
            var ghyb = new OpenLayers.Layer.Google(
                “Google Hybrid”,
                {type: G_HYBRID_MAP}
            );
            var gsat = new OpenLayers.Layer.Google(
                “Google Satellite”,
                {type: G_SATELLITE_MAP}
            );

            // เพิ่มชั้นข้อมูลประเภท google layers จาก google map ลงใน map object
            map.addLayers([gphy, gmap, ghyb, gsat]);
           // กำหนดตำแหน่งเริ่มต้นสำหรับแสดงผลแผนที่
            map.setCenter(new OpenLayers.LonLat(100.652, 13.737), 7);
        }
    </script>
  </head>
  <body onload=”init()”>
    <h1 id=”title”>Google Layer Demo</h1>

    <div id=”tags”></div>

    <p id=”shortdesc”>
       ตัวอย่าง Google Map Layers on Openlayers Application
    </p>

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

 

Actionscript mapping APIs

           ปัจจุบันแนวคิดของ Mushup Map API กลายเป็นที่ยอมรับและเป็นที่นิยมใช้งานอย่างแพร่หลาย เนื่องจากความสะดวกในการใช้งานและการเชื่อมต่อระบบ(MIS+Mushup Map) ในตอนแรก Mushup Map API ก็จะเป็น javascript AJAX แต่ในตอนนี้กระแสของ Flash มาแรง ทำให้เกิดยุคที่สองของ Mushup Map ในรูปแบบของ Flash-based Mapping Application

           โดยปัจจุบันมีผู้ให้บริการข้อมูลแผนที่ออนไลน์หลายเจ้า เปิดช่องทางการให้บริการแผนที่ในรูปแบบ Mushup Map API ที่ใช้ Flash ในการแสดงผล ข้อดีแน่นอนว่าสวยงาม และก็สามารถใช้ในการแสดงผลข้อมูลหลายช่วงเวลาได้เป็นอย่างดี ท่านนักพัฒนาที่สนใจจะลองนำ Flash Actionscript Mapping มาใช้ก็ลองเข้าไปดูรายละเอียดได้ที่นี้นะครับ

Yahoo! Maps for ActionScript 3.0 - Link
Google Maps Flash Interface - Link
MapQuest AS3 API - Link
UMap: Google Maps Flash Overlay (flash above above AJAX map) - Link

 

 

Google Geo

          Google I/O หรือชื่อเต็มคือ “Innovation in the Open” เป็นงานสัมมนาประจำปีสำหรับนักพัฒนาของกูเกิล จัดขึ้นปีนี้เป็นปีแรกที่ซานฟรานซิสโก งานนี้เป็นอีกหนึ่ง conference ของปีที่ผมอยากไป (แล้วก็ไม่ได้ไปอีกตามเคย) มันอาจจะไม่เกี่ยวกับคนทั่วไปนัก แต่ในฐานะที่เป็นนักพัฒนาการได้ไปดู idea ใหม่ก็เป็นการสร้างแรกบันดาลใจที่ดีทีเดียวครับ มาถึงตรงนี้หลายท่านอาจจะตั้งข้อสงสัยว่ามันเกี่ยวอะไรกับนัก GIS คำตอบคือเกี่ยวโดยตรงครับ เพราะงานนี้มี Session ที่ชื่อว่า Geo และมีกูรูดังๆของ google มาบรรยายอีกด้วย

         เรื่องราวใน Session Geo นั้นค่อนข้างน่าสนใจครับ เพราะมันจะมีผลต่อการใช้งานหรือการพัฒนาระบบ Geoinfomatic ในอนาคตแน่นอน ตอนนี้ผมกำลังแกะอยู่เดี่ยวจะค่อยมาสรุปให้ฟังทีละหัวข้อ วันนี้ขอเอารายละเอียดแต่ละหัวข้อมาเล่าให้ฟังก่อน
From Mashups to Mapplets
David Day

Flash API for Google Maps
Michael Jones

Harnessing StreetView, Static Maps, and other new additions to the Google Maps API
Ben Appleton
The World’s Information in Context
Michael T. Jones

Map Mashups Session
Paul Rademacher

Hands-On Maps API: Basic & Advanced
Pamela Fox

Maps and Geo Session
Bart Locanthi

Parsing and Generating KML with Google’s KML Library
Michael Ashbridge

Advanced KML
Bent Hagemark
My Maps Editing API
Keith Golden
Hands-On Maps API: Basic & Advanced
Pamela Fox
How to Index your Geo Data
Lior Ron
Advanced Ruby Scripting for Google SketchUp
Sang Ahn, Scott Lininger

Fireside Chat: Google Maps & Earth
Google Geo engineering team
Hosting your Geo Data, an Overview of Design Options
Mano Marks

อ่านรายละเอียดเพิ่มเติมได้ที่ http://code.google.com/events/io/sessions.html

 

 

 

นำแผนที่ขึ้น web ง่ายๆด้วย GoogleMap โดยไม่ต้องเขียนโปรแกรม

        Google Map เป็น service API ที่น่าสนใจและสามารถนำไปใช้งานได้ง่ายและหลากหลายในด้านต่างๆ ตัวผมเองก็เขียนถึง google map ค่อนข้างบ่อยและก็มีตัวอย่างและคู่มือการใช้งาน GoogleMap API แต่เมื่อวานผมมีโอกาสได้ไปสนทนากับพี่ท่านหนึ่ง ซึ่งมีความต้องการจะทำแผนที่อย่างง่ายบนเว็บไซต์ แต่เนื่องจากท่านไม่ได้เป็นนักโปรแกรมเมอร์ และไม่ถนัดในการเขียนโปรแกรมคอมพิวเตอร์ จึงอยากได้วิธีการทำแบบง่ายๆ

ตัวอย่างการนำ GoogleMap API ไปใช้พัฒนา Application ขั้นสูงที่ต้องเขียนโปรแกรม

 

        นับเป็นโชคดีอย่างหนึ่งครับ GoogleMap นั้นมีช่องทางการ share map ที่น่าสนใจอยู่ ซึ่งเราสามารถนำช่องทางนี้มาใช้งานได้ เช่นเดียวกับ การ share ไฟล์ภาพเคลื่อนไหวของ youtube ซึ่งวันนี้จะทดลองสร้าง Web Map Application อย่างง่ายจาก google map โดยเริ่มจาก

       1. สมัครใช้บริการของ GMAIL คือต้องเป็นสมาชิคของ google เสียก่อนจึงสามารถจะใช้งาน google map ได้ สำหรับท่านที่เป็นสมาชิกหรือมี account ของ gmail อยู่แล้วก็สามารถเข้าไปช้งานได้เลยโดยไปที่ http://maps.google.com/

 

 รูปที่ 1 เข้าสู่หน้าหลักของ map.google.com

รูปที่ 2 log-in เข้าสู่ระบบ

         2. click แท็บแผนที่ของฉัน แล้วทำการสร้างแผนที่ใหม่

        3. ทำการกำหนดรายละเอียดเบื้องต้น และ title ของชั้นแผนที่ที่จะสร้างดังภาพ

         4. ลงมือสร้างข้อมูลแผนที่ของท่านที่ต้องการ โดยใช้แถบเครื่องมือ Editor บนแผนที่ด้านซ้าย

รูปต้วอย่าง ผมสร้างชั้นข้อมูลจุดและโพลีกอน ของอาคารบริเวณที่ทำงานและกรอกรายละเอียดข้อมูลเชิงบรรยายลงในแต่ละ feature

         5. กรณีท่านที่ทำการเก็บข้อมูลจาก GPS หรือมีข้อมูล KML อยู่แล้วให้ click ที่เมนูนำเข้าดังภาพแล้วทำการ upload KML ไปยัง server ของ Google เพื่อสร้างชั้นข้อมูล

ภาพแสดงการ Upload KML ไปยัง server ของ Google

         6. กดปุ่มเสร็จสิ้น เพื่อบันทึกข้อมูลที่สร้าง

        7. ทำการ save code สำหรับใช้ embed ในหน้า webpage โดยไปที่เมนูลิงค์มาที่นี่ บนขวามือ และ copy code

          8. เอา code ส่วน <iframe> ไปแปะบน page โดยกำหนดขนาด width และ height ตามเหมาะสมครับ เท่านี้ก็เสร็จแล้ว

ภาพผลลัพธ์แผนที่ google map ที่ได้ครับ

บทความอื่นๆที่เกี่ยวข้อง

- http://emap.wordpress.com/2008/04/02/basic-google-map-i/

- http://emap.wordpress.com/2008/04/04/basic-google-map-ii/ 

- http://emap.wordpress.com/2008/04/09/basic-google-map-iii/ 

 

 

Google Maps in Flash!

             สำหรับนักพัฒนา web application ด้วย flash คราวนี้มีโอกาสพัฒนาโปรแกรมด้วย Google Map ได้อย่างเต็มที่ โดย Google ได้ประกาศจะปล่อย Google Maps API ตัวใหม่ ที่สามารถใช้ร่วมกับการแสดงผลและการทำงานร่วมกับ Flash ได้ ในลักษณะที่ Flash graphics แสดงข้อมูลแบบ tile image ซึ่งมีการนำมาใช้ในการแสดงข้อมูลผ่านรูปแบบ animation

            ตัวผมเองได้มีอกาสทดลองเล่นตัวอย่าง Application ที่พัฒนาจาก Flash มาแล้ว ต้องบอกว่าติดใจตรงความ smooth ในการ Zoom, Pan ซึ่งทำได้ค่อนข้างสวยงาม โดยเฉพาะการแสดงข้อมูลที่แปรผันตามเวลาในรูปแบบ animation ท่านที่สนใจอ่านรายละเอียด API ได้ที่ http://groups.google.com/group/Google-Maps-API ซึ่งจะมีการจัดทำและปรับปรุงเอกสาร API ใหม่ต่อไป

 

 

 

GTA Liberty City MAP

     “Grand Theft Auto 4″(GTA4) เกมส์โหดสุดมันส์ของผู้ใหญ่ ของXbox360 และ playstation3 ที่ทำยอดขายถล่มถลาย ด้วยความสุดมันส์และความสวยงามของเกมส์ ซึ่งได้รับรางวัลจากนักวิจารณ์เกมส์ถึงระดับ99 คะแนน จาก100 คะแนน

     เกมส์นี้มีผู้พัฒนาหัวใสได้ทำระบบแผนที่ของเกมส์ออนไลน์มาให้บริการเกมเมอร์ โดยใช้ Google Map เป็น engine ในการแสดงผลและบริการแผนที่ในเกมส์ GTA โดยแสดงแผนที่ Liberty City ซึ่งผู้ใช้สามารถเพิ่ม POI ลงไปในแผนที่หรือสร้าง route การเล่นเกมส์ของตัวเองได้ ทางที่สนใจลองแวะเข้าไปดูได้ที่ http://grandtheftauto.ign.com/maps/1/Liberty-City-Map 

    ที่ผมชอบแนวคิดพวกนี้เพราะว่าบางครั้งแผนที่แบบ diagram พวกนี้ก็สามารถนำมาใช้แสดง infomation และตำแหน่งต่างๆบน อินเตอร์เน็ต ผ่าน google map API ได้อย่างน่าสนใจเลยทีเดียว

หาเพื่อนเล่น Wii ด้วย MapWii

         Wii ป็นสิงประดิษฐ์ที่ทำให้เราเพลิดเพลินใจได้ดีทีเดียว ผมเองไม่มี Wii เป็นของตัวเองแต่ก็นิยมชมชอบไม่น้อยเพราะเคยไปเล่นที่บ้านเพื่อน      เครื่องเล่นเกมส์ Wii มีโหมดการเล่นแบบ online ทางอินเตอร์เน็ต แต่ก็มีข้อจำกัดกรณีที่ท่านเล่นกับเพื่อนต่างชาติหรือเพื่อนที่อยู่ไกลๆ มันก็อาจจะเกิดการ delay ได้ วันนี้ผมมีบริการหนึ่งสำหรับคอเกมส์มาแนะนำครับ นั้นคือ MapWii

        MapWii เป็น Map Content ที่ให้ผู้เล่นมาทำการ registor ในระบบแล้วแสดงผลตำแหน่งของผู้เล่นแบบ online บนแผนที่ ทำให้เราสามารถค้นหาเพื่อน ที่อยู่ใกล้ๆกับเรา มาร่วมเล่นเกมส์แบบ online ได้โดยลดเรื่องการ delay อันเนื่องจากการรับส่งข้อมูลจากผู้เล่นมี่อยู่ต่างถิ่นกันได้ สนใจลองเข้าไปใช้งานที่ http://www.mapwii.com/ 

 

Quote of the Week

        Quote of the Week อันนี้ได้มาจาก direcmag ครับพอดีแวะเข้าไปอ่านข่าวเกี่ยวกับ Google Ocean แล้วไปเจอ คำกล่าวนี้เป็นของ Todd Thompson มีตำแหน่งเป็น Mexico City Manager (Missouri) น่าสนใจดีเลยนำมาฝากกัน

        “GIS is really a powerful tool, because unlike a product like Google Maps, which is just a visual image of the overhead, GIS is linking maps with data. And the thing about these maps is they are going to be such an extraordinarily high level of quality compared to any one you can look at on the Web.”

อ้างอิงจาก http://apb.directionsmag.com/archives/4237-Quote-of-the-Week.html
         บางครั้งหลายๆคนยังเข้าใจผิดหรือใช้งานข้อมูลผิดประเภทอยู่ โดยเฉพาะการนำค่าพิกัดจาก Google Map มาใช้ในงานที่ไม่เหมาะสม การใช้งานทั่วไปสามารถทำได้ แต่ถ้าท่านนำค่าพิกัดนั้นมาใช้ในการ Rectify หรือนำมาใช้ทดแทนการออกสนาม ความถูกต้องของข้อมูลก็จะลดลงไป ยังไม่นับรวมท่านที่แปลงค่าพิกัดจาก lat-lon มาเป็น UTM ส่วนมากมักกำหนดค่าการแปลงระบบพิกัดผิด เนื่องจากข้อมูลจาก google map หรือ google earth เป็นระบบProjection - Mercator (epsg:54004)  ไม่ใช่ World geographic system (epsg:4326) ทั่วไป ดังนั้นพารามิเตอร์ต้องมีหน้าตาประมาณ

World Mercator <54004> +proj=merc +latts=0 +lon0=0 +k=1.000000 +x0=0 +y0=0 +ellps=WGS84 +datum=WGS84 +units=m no_defs <>

 

   สรุปคือของฟรีก็ไม่ได้ใช้ได้ดีทุกงานเสมอไปนะครับ

 

Basic Google Map III

      ในหัวข้อนี้ผมขอเขียนถึงการใช้งาน control ที่อยู่ใน GControl class ของ Google Map โดยผมขอกล่าวถึง control ที่มีผมต่อการควบคุมการทำงานของ Map Type เท่านั้นเพราะเป็นสิ่งที่ใช้งานบ่อย แต่สำหรับท่านที่ต้องการปรับปรุงหรือจะสร้าง control ของท่านเองก็สามารถเข้าไปศึกษาเพิ่มเติมได้ที่ http://maps.google.com

      Google Maps API นั้นจะมีคลาสออปเจ็ค GControl ที่เป็นแม่แบบของ control ทั้งหมด แต่สำหรับ Map type จะประกอบด้วย G_NORMAL_MAP, G_SATELLITE_MAP,G_PHYSICAL_MAP  และ G_HYBRID_MAP โดย

      G_NORMAL_MAP : คือข้อมูลแผนที่ถนน แผนที่ทั่วไป

      G_SATELLITE_MAP คือข้อมูลแผนที่ภาพถ่ายดาวเทียม

      G_PHYSICAL_MAP  คือ ข้อมูลแผนที่สภาพภูมิประเทศ

      G_HYBRID_MAP คือแผนที่ผสมระหว่างแผนที่ถนนกับภาพถ่ายดาวเทียมรายละเอียดสูง

1. ทดลองเขียนโค้ดโปรแกรมควบคุมการแสดงผลของ map type ดังต่อไปนี้

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 <!– กำหนด API Key–>
    <script src=”http://maps.google.com/maps?file=api&v=2&key=yourkey“
            type=”text/javascript”></script>
    <script type=”text/javascript”>
    function initialize() {
   // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
      // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
        // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
       // สร้าง Gmap Type Control
      var mapTypeControl = new GMapTypeControl();
       // กำหนดตำแหน่งและขนาด : บนขวา
        var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
      // กำหนดตำแหน่งและขนาด : ล่างขวา
        var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
      // เพิ่ม Control Object ลงใน Map
        map.addControl(mapTypeControl, topRight);
      // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “dblclick”, function() {
      // กำจัด Map Type Control
          map.removeControl(mapTypeControl);
      // เพิ่ม Map Type Control ใหม่
          map.addControl(new GMapTypeControl(), bottomRight);
         });
     // เพิ่ม Map Tool Control ลงไป
     map.addControl(new GSmallMapControl());

      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

  ทำการ upload ไฟล์ขึ้น Server ทดลอง Run โค้ดเพื่อดูผลลัพธ์

ภาพผลลัพธ์ที่ได้ เมื่อทำการ DBClick บนแผนที่ Map Type Control จะย้ายตำแหน่งลงมาด้านล่าง

 

  กรณีที่ต้องการใช้ Terrian Map ให้ทำการเพิ่ม G_PHYSICAL_MAP ลงไปด้วยโค้ดต่อไปนี้

            map.addMapType(G_PHYSICAL_MAP);

ติดตามเส้นทางวิ่งคบเพลิงโอลิมปิก

      ช่วงนี้กระแสกีฬาโอลิมปิกกำลังมาแรง หลายๆประเทศมีกิจกรรมประชาสัมพันธ์กีฬาระดับโลกกันอย่างกว้างขว้าง กิจกรรมหนึ่งที่ประชาชนในหลายๆประเทศจะได้มีส่วนร่วมก็คือ การวิ่งคบเพลิงโอลิมปิก โดยการวิ่งคบเพลิงจะมีการวิ่งและส่งต่อไปยังประเทศต่างๆทั่วโลก เพื่อแสดงถึงการเริ่มต้นของงานกีฬาแห่งมวลมนุษยชาติ ซึ่งน่าจะมาถึงประเทศไทยในวันที่ 19-04-2008 วันนี้ผมจึงนำแผนที่เส้นทางการคบเพลิงโอลิมปิกมาแนะนำครับ เข้าไปดูตัวอย่างและติดตามตำแหน่งของคบเพลิงได้ที่ http://maps.google.com/help/maps/torchrelay/

 

 

Basic Google Map II

            หัวข้อนี้เขียนถึง Event Listeners สำหรับติดตามการโต้ตอบระหว่างผู้ใช้ โดยเป็นกลไกในการตอบสนอง event จากผู้ใช้ ซึ่ง API ได้กำหนดช่องทางการลงทะเบียน Event Listeners  ผ่าน GEvent.addListener() method

1. click event

           ทดลองกำหนด event ประเภท click() ให้กับ Gmap Object โดยจะทำการสร้างโค้ดประมวลผลโต้ตอบกับผู้ใช้เมื่อทำการ click บนแผนที่

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 <!– กำหนด API Key–>
    <script src=”http://maps.google.com/maps?file=api&v=2&key=yourkey”
            type=”text/javascript”></script>
   <script type=”text/javascript”>
    function initialize() {
 // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
        // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
       // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
      // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “click”, function() {
          alert(”Hello , คุณกำลังคลิ๊กแผนที่”);
         });
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

        ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

2. moveend

      ทดลองกำหนด event ประเภท moveend() ให้กับ Gmap Object โดยจะทำการสร้างโค้ดประมวลผลโต้ตอบกับผู้ใช้เมื่อสิ้นสุดการ move แผนที่ด้วยการเลื่อนแผนที่(Pan)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 <!– กำหนด API Key–>
    <script src=”http://maps.google.com/maps?file=api&v=2&key=yourkey”
            type=”text/javascript”></script>
    <script type=”text/javascript”>
    function initialize() {
 // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
        // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
       // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
       // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “moveend”, function() {
          var center = map.getCenter();
          document.getElementById(”message”).innerHTML = “ค่าพิกัด “+center.toString();
         });
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  <div id=”message”></div>
  </body>
</html>

ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

 3. Passed Arguments in Events

               Gmap API ในส่วนของ event handle จะมี Arguments ที่อยู่ใน event ต่างๆ เช่น click ก็จะมีสอง Arguments ได้แก่ (overlay,point) โปรแกรมเมอร์สามารถเข้าถึงค่า Arguments ที่เกิดขึ้นพร้อมกับ event มาประมวลผลต่อได้ โดยในตัวอย่างจะทำการเรียกดูค่าพิกัดภาพ ณ ตำแหน่งที่ผู้ใช้ทำการ click mouse บนแผนที่ โดยเขียนโค้ดโปรแกรมได้ดังนี้

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 <!– กำหนด API Key–>
    <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=yourkey“
            type=”text/javascript”></script>
    <script type=”text/javascript”>
    function initialize() {
      // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
       // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
       // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
       // ลงทะเบียน click event และค่า agruments พร้อมระบุการประมวลผล
        GEvent.addListener(map,”click”, function(overlay,latlng) {    
        var myHtml = “ค่าพิกัดภาพ = : ” + map.fromLatLngToDivPixel(latlng) + ” Zoom level =” + map.getZoom();
        map.openInfoWindow(latlng, myHtml);
      });
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

 อ้างอิงจาก

- http://code.google.com/apis/maps/documentation/events.html

Google Terrain Map

      ประมาณปลายปีที่แล้ว Google Map ได้ให้บริการ Map Type เพิ่มขึ้นอีกชนิดคือ Terrain Map เป็นแผนที่สามมิตินูนต่ำสำหรับแสดงสภาพภูมิประเทศ โดยให้บริการสภาพภูมิประเทศควบคู่กับภาพถ่ายดาวเทียมที่ให้บริการก่อนหน้านี้ซึ่งมีพื้นที่ให้บริการครอบคลุมทั่วทั้งโลก แต่ปัจจุบัน Google ได้เพิ่มข้อมูล contour line สำหรับแสดงค่าความสูงภูมิประเทศเข้าไป โดยมีค่า interval ประมาณ 200 เมตร แสดงร่วมกับข้อมูล Terrain Map ทำให้การแสดงผลสภาพภูมิประเทศมีความสมบูรณ์มากยิ่งขึ้น โดยแหล่งข้อมูลความสูงน่าจะได้มาจากข้อมูล SRTM

 

Basic Google Map I

       ได้รับ email ฉบับหนึ่งที่ถามถึงการพัฒนา Internet GIS Application ด้วย Google Map โดยมีประเด็นที่น่าสนใจตรงที่ท่านนี้อยากให้เปรียบเทียบข้อดี ข้อเสียเกี่ยวกับการพัฒนาแบบที่ใช้ MapServer ของตัวเอง กับการใช้ API Service เช่น Google Map ผมตอบไปทาง email ค่อนข้างยาว แต่ผมอยากของสรุปแนวคิดการเลือกใช้ว่าขึ้นอยู่กับความต้องการของระบบ ผมเองก็ใช้ทั้งสองประเภท บางงานก็ใช้ผสมกัน แต่สิ่งหนึ่งที่ Google Map มีคือข้อมูลเชิงพื้นที่ ทั้งถนน , ภาพถ่ายดาวเทียม ซึ่งค่อนข้างละเอียด สามารถลดภาระการบำรุงรักษาข้อมูลของเราได้ นอกจากนี้ google map ยังใช้งานได้ง่ายและมีแนวโน้มที่จะพัฒนาต่อไปอีก เช่น ฟังก์ชั่นการวิเคราะห์เส้นทาง เป็นต้น แต่ก็มีข้อจำกัดอยู่บ้าง Application ที่ไม่ซับซ้อนมากนักผมมักจะใช้ Google Map เป็นหลัก

         เนื่องจากหลายๆท่านสนใจแต่อาจจะไม่ทราบว่าจะเริ่มต้นยังไง ดังนั้นในหัวข้อ basic google map I จะสอนการสร้าง application อย่างง่ายเพื่อใช้เป็นแนวทางสำหรับเริ่มต้นครับ

1. บทนำ

        Google Map API เป็นระบบบริการข้อมูลแผนที่ผ่านอินเตอร์เน็ต ที่นักพัฒนาสามารถนำข้อมูลมาใช้ในการพัฒนา application ในรูปแบบ Web based ต่อได้ โดยอาศัยความรู้พื้นฐานหลักได้แก่ JavaScript OOP, AJAX, XML(DOM), HTML และที่สำคัญที่สุดคือเรื่องของ ระบบพิกัดภูมิศาสตร์นิดหน่อย การทำงานเริ่มจากการขอรับบริการ โดยไปลงทะเบียนเพื่อสร้าง API Key ก่อนที่ http://code.google.com/apis/maps/signup.html การลงทะเบียนต้องใช้ web site URL

ตัวอย่าง Key

key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA

2. Basic Google Map

     ทดลองเริ่มเขียน code ง่ายเพื่อเรียกข้อมูลแผนที่มาแสดง โดยมี code ดังต่อไปนี้ครับ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

  <head>

    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

    <title>Google Maps JavaScript API Example</title>

<!– Embed API Key–>

    <script src=”http://maps.google.com/maps?file=api&amp;v=2″

            type=”text/javascript”></script>

    <script type=”text/javascript”>

    //<![CDATA[

    function load() {

      if (GBrowserIsCompatible()) {

       // กำหนด DIV tag สำหรับ Map โดยเข้าถึงแบบ DOM

        var map = new GMap2(document.getElementById("map"));

      // Add Map Control และ Map Type

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

    // กำหนด ค่าพิกัดของตำแหน่งเริ่มต้นบนแผนที่ 

        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      }

    }

    //]]>

    </script>

  </head>

  <body onload=”load()” onunload=”GUnload()”>

    <div id=”map” style=”width: 500px; height: 300px”></div>

  </body>

</html>

Upload ไฟล์ Html ที่เขียนขึ้นบน Server แล้วทดลองทำการ Run ผลลัพธ์

หนังสือ หนังสือ

         Google Map เป็น Application ที่เกี่ยวข้องกับ GIS และ Mapping ที่มีประโยชน์และสามารถนำไปใช้ในชีวิตประจำวันได้ โดยสามารถใช้งานระบบบริการแผนที่ได้ทั้งแบบ web application และใช้งานผ่าน mobile device ด้วย googlemap mobile วันนี้ผมมีหนังสือคู่มือการใช้งาน google map บน iphone และ pocket PC มาแนะนำครับ

         “มหัศจรรย์แผนที่ออนไลน์บนฝ่ามือ ฉบับ Google Maps บน iPhone ” และ “มหัศจรรย์แผนที่ออนไลน์บนฝ่ามือ ฉบับ Google Maps บน Pocket PC” ของคุณ อภิศิลป์ ตรุงกานนท์ ที่เขียนเกี่ยวกับการนำ google map โดยสองเล่มใหม่เน้นไปที่การใช้งานบนอุปกรณ์มือถือ รวมถึงการใช้งาน GPS ร่วมกับ Google Map ด้วย นอกจากนี้ยังมีพิกัดสถานที่สำคัญในไทย เช่น สนามบิน โรงพยาบาล วัด สถานปฏิบัติธรรม อีกด้วยครับอ่านรายละเอียดเพิ่มเติมที่ http://blog.macroart.net/2008/03/google-maps-pocket-pc-windows-mobile.html 

              ไหนๆก็เขียนถึงเรื่องหนังสือแล้ว ขออัพเดตข่าวคราวหนังสือ การใช้โปรแกรม ArcGIS 9.2 เล่มใหม่ของ รศ.สุเพชร ที่กำลังจะวางตลาด เล่มนี้เขียนถึงการเรียนรู้ GIS ด้วยโปรแกรม ArcGIS 9.2 ซึ่งมีความหนาถึง 616 หน้าโดยท่านที่สนใจอดใจรออีกสักพักน่าจะได้อ่านกันครับ