SlideShare a Scribd company logo
1 of 23
Advanced Map Feature
- Marker Cluster
Mickey Chiang
What we’ll do
Before we begin...
Pre-requires
- Basic knowledge of Android and Kotlin programming
- Basic knowledge of map.
To learn more, see Get Started with Google Maps Platform
- Material
- [Android] 一起來做三倍券地圖吧(一)
- [Android] 一起來做三倍券地圖吧(二)
Google Map SDK for Android
- Please set up Google map API key first
Layout for MapsActivity
Set up for map
Add one marker
Add a custom marker image
Add BitmapHelper.vectorToBitmap
Note: vectorToBitmap was taken from the Maps SDK for Android
samples. For more information, see it on GitHub.
Put custom marker
Add multiple markers
VIDEO
Maps SDK for Android Utility Library
Update your build.gradle
Go ahead and update the dependencies section of your
app/build.gradle file.
Implement clustering
1. Implement the ClusterItem interface.
2. Subclass the DefaultClusterRenderer class.
3. Create a ClusterManager and add items.
1.Implement the ClusterItem interface
1.ClusterRenderer
- ClusterManager, internally uses a ClusterRenderer class to handle
creating the clusters as you pan and zoom around the map.
- In this project, markers need to be customized, you need to extend this class
and add the customizations in there.
2.Subclass the DefaultClusterRenderer class
Comes from MapActivity
Comes from MapActivity
2.Subclass the DefaultClusterRenderer class
3.Create a ClusterManager and add items
3.Handle onMapReady behavior
Please see page 19
Congratulations!
Your map look much elegant now!
VIDEO
Reference
Codelab:
Google Maps Platform 101—Android
Image Resources:
Icons
Find me @
LinkedIn Facebook Github

More Related Content

Similar to Advanced map feature - marker cluster

Google Maps on iOS with Swift
Google Maps on iOS with SwiftGoogle Maps on iOS with Swift
Google Maps on iOS with SwiftArun Nagarajan
 
Augmented World Expo 2013 Mobile AR SDK Comparison and Tutorial
Augmented World Expo 2013 Mobile AR SDK Comparison and TutorialAugmented World Expo 2013 Mobile AR SDK Comparison and Tutorial
Augmented World Expo 2013 Mobile AR SDK Comparison and TutorialPatrick O'Shaughnessey
 
以 Kotlin 快速打造 Mobile Backend
以 Kotlin 快速打造 Mobile Backend以 Kotlin 快速打造 Mobile Backend
以 Kotlin 快速打造 Mobile BackendShengyou Fan
 
Android MapView and MapActivity
Android MapView and MapActivityAndroid MapView and MapActivity
Android MapView and MapActivityAhsanul Karim
 
Mobile AR SDK Tutorial - Augmented World Expo New York 2014
Mobile AR SDK Tutorial - Augmented World Expo New York 2014Mobile AR SDK Tutorial - Augmented World Expo New York 2014
Mobile AR SDK Tutorial - Augmented World Expo New York 2014Patrick O'Shaughnessey
 
Android programming
Android programmingAndroid programming
Android programmingvijay_uttam
 
Serverless Container with Source2Image
Serverless Container with Source2ImageServerless Container with Source2Image
Serverless Container with Source2ImageQAware GmbH
 
Serverless containers … with source-to-image
Serverless containers  … with source-to-imageServerless containers  … with source-to-image
Serverless containers … with source-to-imageJosef Adersberger
 
[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置
[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置
[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置Shengyou Fan
 
4_pillars_for_app_development_in_GCP.pdf
4_pillars_for_app_development_in_GCP.pdf4_pillars_for_app_development_in_GCP.pdf
4_pillars_for_app_development_in_GCP.pdfLuillyfe Blanco
 
Lecture 12 - Maps, AR_VR_aaaaHardware.pptx
Lecture 12 - Maps, AR_VR_aaaaHardware.pptxLecture 12 - Maps, AR_VR_aaaaHardware.pptx
Lecture 12 - Maps, AR_VR_aaaaHardware.pptxNgLQun
 
Mastering the NDK with Android Studio 2.0 and the gradle-experimental plugin
Mastering the NDK with Android Studio 2.0 and the gradle-experimental pluginMastering the NDK with Android Studio 2.0 and the gradle-experimental plugin
Mastering the NDK with Android Studio 2.0 and the gradle-experimental pluginXavier Hallade
 
Breizhcamp Rennes 2011
Breizhcamp Rennes 2011Breizhcamp Rennes 2011
Breizhcamp Rennes 2011sekond0
 
Augmented World Expo 2014 Wearable SDK Overview
Augmented World Expo 2014 Wearable SDK OverviewAugmented World Expo 2014 Wearable SDK Overview
Augmented World Expo 2014 Wearable SDK OverviewPatrick O'Shaughnessey
 
ARCore 101: A Hands-on Workshop
ARCore 101: A Hands-on WorkshopARCore 101: A Hands-on Workshop
ARCore 101: A Hands-on WorkshopUnity Technologies
 
Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018
Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018
Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018Somkiat Khitwongwattana
 
ML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdfML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdfAkankshaPathak42
 

Similar to Advanced map feature - marker cluster (20)

Google Maps on iOS with Swift
Google Maps on iOS with SwiftGoogle Maps on iOS with Swift
Google Maps on iOS with Swift
 
Augmented World Expo 2013 Mobile AR SDK Comparison and Tutorial
Augmented World Expo 2013 Mobile AR SDK Comparison and TutorialAugmented World Expo 2013 Mobile AR SDK Comparison and Tutorial
Augmented World Expo 2013 Mobile AR SDK Comparison and Tutorial
 
以 Kotlin 快速打造 Mobile Backend
以 Kotlin 快速打造 Mobile Backend以 Kotlin 快速打造 Mobile Backend
以 Kotlin 快速打造 Mobile Backend
 
Android MapView and MapActivity
Android MapView and MapActivityAndroid MapView and MapActivity
Android MapView and MapActivity
 
Mobile AR SDK Tutorial - Augmented World Expo New York 2014
Mobile AR SDK Tutorial - Augmented World Expo New York 2014Mobile AR SDK Tutorial - Augmented World Expo New York 2014
Mobile AR SDK Tutorial - Augmented World Expo New York 2014
 
Android programming
Android programmingAndroid programming
Android programming
 
Serverless Container with Source2Image
Serverless Container with Source2ImageServerless Container with Source2Image
Serverless Container with Source2Image
 
Serverless containers … with source-to-image
Serverless containers  … with source-to-imageServerless containers  … with source-to-image
Serverless containers … with source-to-image
 
[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置
[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置
[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置
 
4_pillars_for_app_development_in_GCP.pdf
4_pillars_for_app_development_in_GCP.pdf4_pillars_for_app_development_in_GCP.pdf
4_pillars_for_app_development_in_GCP.pdf
 
Lecture 12 - Maps, AR_VR_aaaaHardware.pptx
Lecture 12 - Maps, AR_VR_aaaaHardware.pptxLecture 12 - Maps, AR_VR_aaaaHardware.pptx
Lecture 12 - Maps, AR_VR_aaaaHardware.pptx
 
Mastering the NDK with Android Studio 2.0 and the gradle-experimental plugin
Mastering the NDK with Android Studio 2.0 and the gradle-experimental pluginMastering the NDK with Android Studio 2.0 and the gradle-experimental plugin
Mastering the NDK with Android Studio 2.0 and the gradle-experimental plugin
 
Breizhcamp Rennes 2011
Breizhcamp Rennes 2011Breizhcamp Rennes 2011
Breizhcamp Rennes 2011
 
Android tutorial1
Android tutorial1Android tutorial1
Android tutorial1
 
Augmented World Expo 2014 Wearable SDK Overview
Augmented World Expo 2014 Wearable SDK OverviewAugmented World Expo 2014 Wearable SDK Overview
Augmented World Expo 2014 Wearable SDK Overview
 
ARCore 101: A Hands-on Workshop
ARCore 101: A Hands-on WorkshopARCore 101: A Hands-on Workshop
ARCore 101: A Hands-on Workshop
 
Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018
Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018
Hello, Android Studio 3.2 & Android App Bundle @ I/O Extended Bangkok 2018
 
ML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdfML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdf
 
Nativescript with angular 2
Nativescript with angular 2Nativescript with angular 2
Nativescript with angular 2
 
Getting Started With Android
Getting Started With AndroidGetting Started With Android
Getting Started With Android
 

Recently uploaded

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 

Recently uploaded (20)

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 

Advanced map feature - marker cluster

Editor's Notes

  1. 我先簡單的介紹一下今天要做什麼, 今天我們會在基本的google map上加入一個叫marker cluster的feature, 這個feature是由Google Map SDK for Android提供的。
  2. 適合接下來內容的朋友們, 我會建議要有基礎的Android跟Kotlin知識, 再來就是要花一些時間去申請Google map API key、才能使用地圖相關的一些服務, 我的PPT上面有附上官方寫的申請方式, 如果覺得看得很痛苦也可以看我之前寫的文章。 第一集是帶著大家一起申請Google map API key, 第二集則是示範如何讓APP顯示地圖以及加入第一個Marker
  3. 這邊要麻煩大家照著文章, 先把該加的key加進project裡面, 可以看前面提到的三倍券文章~
  4. 從File > New 加入你擁有的SVG檔案, 感謝Tom Liu的提供, 接著這個檔案就會被夾到drawable的目錄底下。
  5. 一般來說,我們用Default的ClusterRenderer就可以了,但因為我們會用到自訂的marker, 所以要extend ClusterRenderer
  6. 我們把maskIcon跟在ItemRendered前的行為搬到StoreRender
  7. 在cluster繪圖後被呼叫,要將我們前前一步做的clusterItemset給marker的tag 因為是在繪圖後,所以已經可以拿到傳參數中的marker了