iOS Dev : Change Google Map’s Theme using CloudMade for iOS App

iOS Dev : Change Google Map’s Theme using CloudMade for iOS App
สร้างสรรค์ธีม Google Map แบบเท่ห์ ด้วยตัวเองได้ด้วย CloudMade สำหรับ iOS App

วันนี้คุณเพื่อนของผม แนะนำมาให้ไปศึกษาวิธีการเปลี่ยนธีม Google Map มาหน่อยสิมันทำได้บ่ และก็ให้เว็บไซต์ CloudMade มาให้ทดลองกัน แล้วจะรอช้าอยู่ทำไม เรามาทำความรู้จัก CloudMade กันดีกว่า ว่ามันทำอะไรได้บ้าง และเพื่อการนำมาใช้ใน iOS แอพของเรา จะทำอะไรให้ดีขึ้นได้บ้าง ^^

บทความเกี่ยวกับ CloudMade นี้ขอคุยกันยาวๆ หน่อยแล้วกันนะครับ เพราะมันเยอะเหมือนกัน ในบทความแรกเราจะแนะนำในการสมัครและใช้งานก่อนนะครับ

Registation, Install SDK & Setting Map Style

1. เริ่มแรกเราก็เข้าไปสมัครสมาชิกของเว็บไซต์ cloundmade.com ก่อนนะครับ

2. ในเว็บไซต์ของ cloudmade.com สำหรับนักพัฒนาแล้วจะมีประโยชน์อยู่หลายอย่างนะครับ เช่น การบริการตำแหน่งของสถานที่ต่างๆ การหารายได้จากการติดโฆษณา และการใช้งาน Map ที่เราแต่งธีมเอง เป็นต้น แต่ผมจะพูดถึงเรื่องของการใช้งาน Map ก่อนแหละกันในบทความชุดนี้นะครับ

3. เข้ามาที่ Developers > iPhone & iPad SDK > Get API Key

4. ในหน้า Get API Key เมื่อกรอกข้อมูล และรอสักพักหนึ่ง จะมี popup download sdk มาให้ (ชื่อไฟล์ 110204092316_CloudMade_iPhone_SDK_Installer)

  >>รอสักครู่ >> 

5. download & intall sdk ตรงนี้จะลงก็ได้นะครับ แต่ผมไม่ได้ลงนะเพราะยังทำบางอย่างไม่ได้ผมจึงไม่ได้ลง แต่ใช้วิธีดึงโค้ดจาก svn มาใช้งานเลย!!

6. เมื่อเรา Submit แล้วให้กดเข้ามาหน้า Profile ของเราเอง ที่ชื่อ username ที่มุมขวาบน นะครับ

ในแท็บ API Keys ก็จะมี API Key ที่จะใช้ในการระบุแอพพลิเคชั่นของเราในการเขียนโค้ดด้วย

7. มาดูที่แท็บ Map Styles ตรงนี้แหละครับ จะเป็นที่ให้เราได้สามารถปรับแต่ง Theme Google Map ได้

กดที่ Create New Style

เลือก theme ต้นแบบที่เราชอบ แล้วกดปุ่ม Clone Style ที่ด้านล่างขวา

ในหน้านี้เราก็สามารถตกแต่งสีของธีม Map ของเราที่อยากได้ ได้แล้วนะครับ เราก็กดเลือก Title ด้านซ้ายมือ และเลือกสีด้านขวาบน ได้เลย เมื่อต้องการดูสิ่งที่เราเปลี่ยนสีไปแล้วให้กดปุ่ม Refresh the map (อยู่ด้านล่าง)

เมื่อได้สีที่ชอบเสร็จก็ กดปุ่ม Save this Style > ใส่ชื่อ Style

8. กลับไปที่หน้า Profile > Map Styles จะพบธีมใหม่ที่เราสร้างขึ้นใหม่ สิ่งที่เราจำเป็นต้องรู้จำธีมนี้คือ id ของธีม หาได้จาก ลิ้งของธีมนั้นเอง

ตัวอย่างนี้ StyleId = 50983 เราจะเอาไปใช้ในโค้ดโปรแกรมเราด้วยครับ

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

 

สิ่งที่เหลือสุดท้ายคือการนำไปใช้นั้นเอง ติดตามต่อไปในบทความหน้านะครับ ในบทความนี้ขอให้สมัครและปรับแต่ง Theme Map ให้สนุกสนาน นะครับ ส่วนเพื่อนๆ คนไหนสงสัยในส่วนไหนก็คอมเม้นเข้ามาได้เลยนะครับ และใกล้ปีใหม่แล้วนะครับ ทางบล็อก adayd3sign’s blog ก็จะเปิดตัวเว็บไซต์ใหม่ คือ http://www.adayd3sign.com ซึ่งจะมีเนื้อหาที่เกี่ยวกับการพัฒนาแอพพลิเคชั่นบน Mobile นั้นเพิ่มขึ้นแน่นอนครับ อย่าลืมเข้าไปเยี่ยมชมกันนะครับ สำหรับวันนี้.. สวัสดีครับ

Reference

• http://cloudmade.com

adaydesign :)

Advertisements