জেটপ্যাক কম্পোজের সাহায্যে মোবাইল মানচিত্র রূপান্তর: বিকাশকারীদের জন্য Google I/O থেকে অন্তর্দৃষ্টি

এই পোস্টটি জুলাই 2023-এ Google I/O Extended for Google Developers Group London-এ দেওয়া একটি আলোচনার উপর ভিত্তি করে তৈরি করা হয়েছে৷ আলোচনার জন্য স্লাইডগুলি এখানে উপলব্ধ

মানচিত্রের জন্য Jetpack রচনা

এটা কল্পনা করা কঠিন যে জেটপ্যাক কম্পোজ 1.0 জুলাই 2021 এ প্রকাশিত হয়েছিল। দুই বছর ফাস্ট ফরোয়ার্ড এবং Google Play-এর শীর্ষ 1000 অ্যাপগুলির মধ্যে 24% কম্পোজ গ্রহণ করে কেন তা বোঝা সহজ।

সমস্ত উত্তেজনার মধ্যে, আধুনিক অ্যান্ড্রয়েড ডেভেলপমেন্টের একটি কোণে আমি মনে করি যে খুব কম মনোযোগ দেওয়া হয় তা হল Google মানচিত্র৷ আমি SDK ব্যবহার করার পর বেশ কিছুক্ষণ হয়ে গেছে, তাই Google Maps সময়ের সাথে তাল মিলিয়ে দেখে এবং তার নিজস্ব রচনা লাইব্রেরি প্রকাশ করতে দেখে আমি আনন্দিতভাবে অবাক হয়েছি৷

ম্যাপিং স্পেসে কাজ করা কোম্পানি এবং ইঞ্জিনিয়ারদের জন্য এটি স্বাগত খবর হবে। মোবাইল ম্যাপিং হল একটি $35.5B শিল্প, যার ভবিষ্যদ্বাণী 2028 সালের মধ্যে 19.83% এর একটি চক্রবৃদ্ধি বার্ষিক বৃদ্ধির হার (CAGR) এ $87.7B-এ উন্নীত হবে৷ উৎস

ইহা কেন গুরুত্বপূর্ণ? একটি বৃহত্তর বাজারের অর্থ হল মোবাইল ম্যাপিংয়ের অ্যাপ্লিকেশনগুলি থেকে কোম্পানিগুলিকে উপার্জন করার আরও সুযোগ৷ এগুলি সাধারণ ব্যবহারের ক্ষেত্রে, খাদ্য, মুদি সরবরাহ এবং রাইড হাইলিং পরিষেবা থেকে শুরু করে। আপনি যদি গভীরভাবে খনন করেন তবে, এমন অ্যাপ্লিকেশন রয়েছে যা অবিলম্বে স্পষ্ট নয়।

একটি সংক্ষিপ্ত অনুসন্ধানের পরে আমি যে উদাহরণগুলি খুঁজে পেয়েছি তা নীচে দেওয়া হল:

স্মার্ট সিটিগুলির জন্য মোবাইল মানচিত্রগুলি দুর্দান্ত, একটি শহরের হৃদস্পন্দন পরিচালনা করতে এবং এর চ্যালেঞ্জগুলিকে আরও ভালভাবে বোঝার এবং প্রতিক্রিয়া জানাতে ডেটা ভিজ্যুয়ালাইজ করতে সহায়তা করে৷ শহর পরিকল্পনাবিদ, জরুরী প্রতিক্রিয়া সংস্থা, বা দৈনন্দিন বাসিন্দাদের জন্য দরকারী।

সম্পদ ব্যবস্থাপনা ম্যাপিং সমাধান থেকেও উপকৃত হয়। কৃষি থেকে মাছ ধরা, খনন থেকে বনায়ন পর্যন্ত, মানচিত্রগুলি এই লাইনের কাজের লোকদেরকে টেকসইভাবে উপকরণ সংগ্রহের জন্য সঠিক সিদ্ধান্ত নেওয়ার জন্য একটি দৃষ্টিভঙ্গি প্রদান করে।

পরিবহন ম্যাপিং প্রযুক্তির উপর ব্যাপকভাবে নির্ভর করে। শুধু Google Maps বা Uber-এর মতো ভোক্তা অ্যাপ নয়, ব্যবসায়িক-স্তরের ফাংশনগুলি বোঝার মতো যে কোনও ব্যবসার গাড়ির বহর কোথায় অবস্থিত। পরিবহন সংস্থাগুলিও ট্র্যাফিক পরিচালনা করতে মানচিত্র ব্যবহার করে এবং প্রবাহকে সহজ করার জন্য কোথায় ট্র্যাফিক পরিচালনা করতে হবে সে বিষয়ে সিদ্ধান্ত নিতে সহায়তা করে।

পরিশেষে, জলবায়ু পরিবর্তন এবং আবহাওয়া ক্রমবর্ধমান অনির্দেশ্য হওয়ার সাথে সাথে, মানচিত্র আবহাওয়া সংস্থা, জরুরী প্রতিক্রিয়া ইউনিট এবং বন্যপ্রাণী সংরক্ষণবিদদের বুঝতে দেয় যে আমাদের বিশ্ব কীভাবে পরিবর্তিত হচ্ছে এবং এটি কমাতে ইতিবাচক পদক্ষেপ নিতে আমরা কী করতে পারি।

সূত্র:মর্ডর ইন্টেলিজেন্স , জিএমআইসাইটস , অ্যালাইড মার্কেট রিসার্চ , ইএমআর রিসার্চ , গুগল আর্থ আউটরিচ , রিসার্চ অ্যান্ড মার্কেটস

বিশ্বের আরও বেশি ডেটা সরবরাহ করার সাথে সাথে, একটি মানচিত্রে সেই ডেটা কীভাবে রাখতে হয় তা শেখার জন্য এটি একটি ভাল সময়৷ চলুন যে কি এবং কোড ফিরে পেতে.

রচনার জন্য Google মানচিত্র ব্যবহার করা

রচনার জন্য Google মানচিত্র নিম্নলিখিত নির্ভরতার উপর নির্ভর করে:

 dependencies { implementation "com.google.maps.android:maps-compose:2.11.4" implementation "com.google.android.gms:play-services-maps:18.1.0" // Optional Util Library implementation "com.google.maps.android:maps-compose-utils:2.11.4" implementation 'com.google.maps.android:maps-compose-widgets:2.11.4' // Optional Accompanist permissions to request permissions in compose implementation "com.google.accompanist:accompanist-permissions:0.31.5-beta" }

রচনার জন্য Google মানচিত্র Google মানচিত্র SDK-এর উপরে তৈরি করা হয়েছে, তাই আপনাকে রচনা লাইব্রেরি এবং মানচিত্র SDK আমদানি করতে হবে৷ আপনাকে Google মানচিত্র SDK-এ বেশিরভাগ অবজেক্ট ব্যবহার করতে হবে না, কারণ কম্পোজ লাইব্রেরি কম্পোজেবল-এ এগুলোর বেশিরভাগই মোড়ানো থাকে।

ইউটিলস এবং উইজেট লাইব্রেরি একটি ঐচ্ছিক নির্ভরতা। ইউটিলস লাইব্রেরি ম্যাপে ক্লাস্টার মার্কার করার ক্ষমতা প্রদান করে, যখন উইজেটগুলি অতিরিক্ত UI উপাদান সরবরাহ করে। আপনি পরে এই ব্যবহার দেখতে পাবেন.

এই পোস্টের জন্য, আমি কীভাবে অবস্থানের অনুমতির অনুরোধ করতে হয় তা প্রদর্শন করতে Accompanist থেকে অনুরোধের অনুমতি লাইব্রেরি অন্তর্ভুক্ত করেছি, মানচিত্র সহ একটি প্রায়শই ব্যবহৃত অনুমতি৷ অ্যাকমপ্যানিস্ট হল Google-এর একটি পরীক্ষামূলক লাইব্রেরি যা এখনও জেটপ্যাক রচনার অংশ নয় এমন বৈশিষ্ট্যগুলির জন্য চেষ্টা করে এবং প্রতিক্রিয়া সংগ্রহ করে৷

অবশেষে, আপনাকে Google বিকাশকারী কনসোলে যেতে হবে, একটি Google মানচিত্র SDK API কী-এর জন্য সাইন আপ করতে হবে এবং এটিকে আপনার প্রকল্পে যুক্ত করতে হবে৷ এটি কিভাবে করতে হয় তার জন্য Google মানচিত্র বিকাশকারী ডক্সে একটি নির্দেশিকা রয়েছে৷

নিরাপত্তা টিপ: Google বিকাশকারী কনসোলে আপনার API কী লক করুন যাতে এটি শুধুমাত্র আপনার অ্যাপ্লিকেশনের সাথে কাজ করে। এটি কোনো অননুমোদিত ব্যবহার এড়ায়।

একটি মানচিত্র দেখাচ্ছে

একটি মানচিত্র দেখানো নীচের মত সহজ:

 setContent { val hydePark = LatLng(51.508610, -0.163611) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { Marker( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) } }

একটি এলাকার অবস্থানের সাথে একটি LatLng অবজেক্ট তৈরি করুন এবং ক্যামেরার প্রাথমিক অবস্থান সেট করতে rememberCameraPositionState সাথে এটি ব্যবহার করুন। এই পদ্ধতিটি মানচিত্রের অবস্থান মনে রাখে যখন আপনি আপনার হাত ব্যবহার করে বা প্রোগ্রামগতভাবে চলাফেরা করেন। এই পদ্ধতি ব্যতীত কম্পোজ প্রতিটি রাজ্যের পরিবর্তনে মানচিত্রটিকে তার প্রাথমিক অবস্থানে ফিরিয়ে আনবে।

এরপরে, একটি GoogleMap রচনা তৈরি করুন এবং আপনার পছন্দের একটি সংশোধক এবং ক্যামেরার স্থিতিতে পাস করুন৷ GoogleMap অতিরিক্ত কম্পোজেবল পাস করার জন্য একটি স্লট API প্রদান করে, এই কম্পোজেবলগুলি আপনি মানচিত্রে আঁকতে চান।

একটি Marker কম্পোজেবল যোগ করুন, তারপর ভিতরে মার্কার অবস্থান ধারণকারী একটি MarkerState যোগ করুন। অবশেষে, চিহ্নিতকারীর একটি শিরোনাম এবং বিবরণ যোগ করুন।

এটি চালানোর ফলে হাইড পার্কের মার্কার সহ পশ্চিম লন্ডনের একটি চমৎকার বায়বীয় দৃশ্য পাওয়া যায়।

মার্কার উইন্ডো কাস্টমাইজ করা

আপনি একটি MarkerInfoWindowContent Composable ব্যবহার করে মার্কার উইন্ডো কাস্টমাইজ করতে পারেন। এটিতে একটি স্লট-ভিত্তিক API রয়েছে, যার অর্থ আপনি উইন্ডোতে আপনার কাস্টম UI রেন্ডার করতে আপনার কম্পোজেবলগুলি পাস করতে পারেন।

 setContent { val hydePark = LatLng(51.508610, -0.163611) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { MarkerInfoWindowContent( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) { marker -> Column(horizontalAlignment = Alignment.CenterHorizontally) { Text( modifier = Modifier.padding(top = 6.dp), text = marker.title ?: "", fontWeight = FontWeight.Bold ) Text("Hyde Park is a Grade I-listed parked in Westminster") Image( modifier = Modifier .padding(top = 6.dp) .border( BorderStroke(3.dp, color = Color.Gray), shape = RectangleShape ), painter = painterResource(id = R.drawable.hyde_park), contentDescription = "A picture of hyde park" ) } } } }

আপনি যখন এটিতে ট্যাপ করেন তখন এটি চালানো মার্কারটির উপরে কাস্টম উইন্ডো দেখায়।

একাধিক মার্কার দেখানো হচ্ছে

একাধিক মার্কার দেখানো আপনার যতটা প্রয়োজন ততগুলি যোগ করার মতোই সহজ। পশ্চিম লন্ডনের কয়েকটি ভিন্ন পার্কের জন্য মার্কার যোগ করা যাক।

 setContent { val hydePark = LatLng(51.508610, -0.163611) val regentsPark = LatLng(51.531143, -0.159893) val primroseHill = LatLng(51.539556, -0.16076088) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { // Marker 1 Marker( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) // Marker 2 Marker( state = MarkerState(position = regentsPark), title = "Regents Park", snippet = "Marker in Regents Park" ) // Marker 3 Marker( state = MarkerState(position = primroseHill), title = "Primrose Hill", snippet = "Marker in Primrose Hill" ) } }

কোডটি চালান এবং আপনি মানচিত্রে আপনার মার্কারগুলি উপস্থিত দেখতে পাবেন।

ক্লাস্টারিং মার্কার

একটি মানচিত্র অল্প সময়ের মধ্যে ব্যস্ত হতে পারে। আপনি যদি 300টি মার্কার দেখানোর চেষ্টা করেন, তাহলে কী ঘটছে তা বোঝা একজন ব্যবহারকারীর পক্ষে দৃশ্যত কঠিন হবে। Google মানচিত্র এবং আপনার ডিভাইসও আপনাকে ধন্যবাদ জানাবে না, কারণ এটিকে প্রতিটি একক মার্কার রেন্ডার করতে হবে, কার্যক্ষমতা এবং ব্যাটারির জীবনকে প্রভাবিত করবে৷

এর সমাধান হল ক্লাস্টারিং , একটি কৌশল যা একে অপরের কাছাকাছি মার্কারকে একক মার্কারে গ্রুপ করে। এই ক্লাস্টারিং জুম-স্তরের ভিত্তিতে ঘটে। আপনি মানচিত্রটি জুম করার সাথে সাথে মার্কারগুলি একটি ক্লাস্টারে গোষ্ঠীবদ্ধ হবে, যেমন আপনি ক্লাস্টারে জুম করবেন পৃথক মার্কারগুলিতে বিভক্ত হবে।

রচনার জন্য Google মানচিত্র একটি Clustering কম্পোজেবলের মাধ্যমে বাক্সের বাইরে এটি সরবরাহ করে। ক্লাস্টারিং ঘটতে জটিল বাছাই বা ফিল্টারিং লেখার কোন প্রয়োজন নেই।

 setContent { val hydePark = LatLng(51.508610, -0.163611) val regentsPark = LatLng(51.531143, -0.159893) val primroseHill = LatLng(51.539556, -0.16076088) val crystalPalacePark = LatLng(51.42153, -0.05749) val greenwichPark = LatLng(51.476688, 0.000130) val lloydPark = LatLng(51.364188, -0.080703) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { val parkMarkers = remember { mutableStateListOf( ParkItem(hydepark, "Hyde Park", "Marker in hyde Park"), ParkItem(regentspark, "Regents Park", "Marker in Regents Park"), ParkItem(primroseHill, "Primrose Hill", "Marker in Primrose Hill"), ParkItem(crystalPalacePark, "Crystal Palace", "Marker in Crystal Palace"), ParkItem(greenwichPark, "Greenwich Park", "Marker in Greenwich Park"), ParkItem(lloydPark, "Lloyd park", "Marker in Lloyd Park"), ) } Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is tapped }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is tapped }) } } data class ParkItem( val itemPosition: LatLng, val itemTitle: String, val itemSnippet: String) : ClusterItem { override fun getPosition(): LatLng = itemPosition override fun getTitle(): String = itemTitle override fun getSnippet(): String = itemSnippet }

ParkItem ডেটা ক্লাস যোগ করা লক্ষ্য করুন। আমাদের এটি দরকার কারণ একটি Clustering কম্পোজেবলে পাস করা আইটেমগুলিকে ClusterItem ইন্টারফেসের সাথে সামঞ্জস্য করতে হবে। ইন্টারফেস প্রতিটি মার্কারের অবস্থান, শিরোনাম এবং স্নিপেট সহ ক্লাস্টার প্রদান করে।

জুম ইন এবং আউট, এবং আপনি কর্মে ক্লাস্টারিং দেখতে পাবেন.

অবস্থানের অনুমতি পাচ্ছেন

মানচিত্র এবং ব্যবহারকারীর অবস্থান প্রায়শই হাতে চলে যায়, তাই কিছু ম্যাপিং অ্যাপের জন্য ব্যবহারকারীর অবস্থানের জন্য অনুমতি চাওয়াটা বোধগম্য হয়।

আপনি যদি এটি করেন তবে একজন ব্যবহারকারীর অনুমতির সাথে সম্মানের সাথে আচরণ করুন , অবস্থানের অনুমতি হল ব্যবহারকারীর কাছ থেকে নেওয়ার জন্য সবচেয়ে সংবেদনশীল অনুমতিগুলির মধ্যে একটি৷

নিশ্চিত করুন যে আপনি কেন এই অনুমতির প্রয়োজন তা ব্যবহারকারীকে জানান এবং এটি দেওয়ার সুবিধাগুলি সক্রিয়ভাবে দেখান৷ আপনার অ্যাপটি আংশিকভাবে অনুমতি ছাড়াই কাজ করলে বোনাস পয়েন্ট।

ব্যবহারকারীদের অবস্থান কীভাবে পরিচালনা করবেন সে বিষয়ে Google কিছু দুর্দান্ত নির্দেশিকা প্রদান করে, সেইসাথে পটভূমিতে অবস্থানের ডেটা অ্যাক্সেস করার জন্য একটি পৃথক নির্দেশিকা।

সুতরাং আপনি আপনার যথাযথ অধ্যবসায় সম্পন্ন করেছেন এবং সিদ্ধান্ত নিয়েছেন যে অবস্থানটি অ্যাক্সেস করার জন্য আপনাকে ব্যবহারকারীর অনুমতির প্রয়োজন হবে৷ Accompanist-এ অনুমতি লাইব্রেরির সাথে, আপনি এটি এভাবে করেন:

 // Don't forget to add the permissions to AndroidManifest.xml val allLocationPermissionState = rememberMultiplePermissionsState( listOf(android.Manifest.permission.ACCESS_COARSE_LOCATION, android.Manifest.permission.ACCESS_FINE_LOCATION) ) // Check if we have location permissions if (!allLocationPermissionsState.allPermissionsGranted) { // Show a component to request permission from the user Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, modifier = Modifier .padding(horizontal = 36.dp) .clip(RoundedCornerShape(16.dp)) .background(Color.white) ) { Text( modifier = Modifier.padding(top = 6.dp), textAlign = TextAlign.Center, text = "This app functions 150% times better with percise location enabled" ) Button(modifier = Modifier.padding(top = 12.dp), onClick = { allLocationPermissionsState.launchMultiplePermissionsRequest() }) { Text(text = "Grant Permission") } } }

সহচরের মাধ্যমে, আমরা অ্যাপটির ACCESS_FINE_LOCATION অনুমতিতে অ্যাক্সেস আছে কিনা বা ইংরেজিতে উচ্চ স্তরের GPS নির্ভুলতা আছে কিনা তা পরীক্ষা করছি। Android ম্যানিফেস্টে অনুরোধ করা অনুমতিগুলি অন্তর্ভুক্ত করা গুরুত্বপূর্ণ, কারণ আপনি অন্যথায় অনুমতিগুলির জন্য অনুরোধ করতে পারবেন না৷

আপনার অ্যাপ কীভাবে কাজ করে তা বুঝতে এবং ব্যবহারকারীদের জানাতে Android সিস্টেম এবং Google Play স্টোরও ম্যানিফেস্ট ব্যবহার করে।

যদি অনুমতি না দেওয়া হয়, একটি ছোট ডায়ালগ কম্পোজেবল দেখানো হয় যাতে অনুমতির প্রয়োজনীয়তা ব্যাখ্যা করা হয় এবং সিস্টেমের মাধ্যমে অনুমতির অনুরোধ চালু করার জন্য একটি বোতাম।

মানচিত্র অ্যানিমেটিং

যখন বেশিরভাগ মানচিত্র অ্যাপের জন্য একজন ব্যবহারকারীকে স্পর্শের মাধ্যমে মানচিত্র সরানোর প্রয়োজন হয়, তখন Google Maps for Compose মানচিত্রটিকে প্রোগ্রামগতভাবে সরানোর জন্য API প্রদান করে। আপনি যদি একটি ইভেন্টের প্রতিক্রিয়া হিসাবে একটি নির্দিষ্ট এলাকায় নেভিগেট করতে চান তবে এটি কার্যকর হতে পারে।

এই উদাহরণে, আমরা আমাদের মার্কার সংগ্রহের মাধ্যমে অ্যাপটিকে আস্তে আস্তে নেভিগেট করব।

 Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the click is tapped false }, onClusterItemClick = { marker -> // Handle when the marker is tapped }) LaunchedEffect(key1 = "Animation") { for (marker in parkMarkers) { cameraPositionState.animate( CameraUpdateFactory.newLatLngZoom( marker.itemPosition, // LatLng 16.0f), // Zoom level 2000 // Animation duration in millis ), delay(4000L) // Delay in millis } } } }

এখানে মূল অংশ হল LaunchedEffect এর ভিতরের কোড। প্রতিটি মার্কারের জন্য, অ্যাপটি মার্কারে নেভিগেট করার জন্য একটি cameraPositionState.animate() কল সেট আপ করে। CameraUpdateFactory.newLatLngZoom() ব্যবহার করে তৈরি করা ক্যামেরার আপডেটের মাধ্যমে ক্যামেরা এই তথ্য পায়।

এই পদ্ধতিতে একটি LatLng লাগে, একটি ফ্লোট যা মানচিত্রের জুম স্তর নির্দেশ করে এবং অ্যানিমেশনের সময়কাল সেট করতে দীর্ঘ সময় লাগে৷

অবশেষে, অ্যানিমেশনগুলিকে স্থান দিতে আমরা delay() ব্যবহার করি প্রতিটি অ্যানিমেশনের মধ্যে 4-সেকেন্ডের বিরতি যোগ করতে।

রাস্তার দৃশ্য দেখানো হচ্ছে

এটি শুধুমাত্র একটি বায়বীয় মানচিত্র নয় যা রচনার জন্য Google মানচিত্র আপনাকে সাহায্য করে৷ আপনি একটি অবস্থানের একটি 360 ভিউ দেখিয়ে অ্যাপগুলিকে রাস্তার দৃশ্যে অ্যাক্সেস দিতে পারেন৷ আপনি StreetView কম্পোজেবল ব্যবহার করে এটি করেন:

 var selectedMarker: ParkItem? by remember { mutableStateOf(null) } if (selectedMarker != null) { StreetView(Modifier.fillMaxSize(), streetViewPanoramaOptionsFactory = { StreetViewPanoramaOptions().position(selectedMarker!!.position) }) } else { Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } }

এই উদাহরণে, যখনই একটি মার্কার ট্যাপ করা হয় তখন আমরা selectedMarker ভেরিয়েবল সেট করছি। যদি একটি মার্কার নির্বাচন করা হয় আমরা রাস্তার দৃশ্য দেখাই, মার্কার অবস্থানে পাস করে।

আকৃতি অঙ্কন

আপনি মানচিত্রে আপনার নিজস্ব আকার এবং টীকা আঁকতে চাইতে পারেন। রচনার জন্য Google মানচিত্র এটি করার জন্য অনেকগুলি কম্পোজেবল সরবরাহ করে, এই পোস্টে আমরা Circle কম্পোজেবল ব্যবহার করতে যাচ্ছি।

একটি বৃত্ত ব্যবহার করার জন্য একটি ভাল আকৃতি যদি আপনার অ্যাপ জিওফেনস ব্যবহার করে ব্যবহারকারীর অবস্থান থেকে পরিবর্তনের প্রতিক্রিয়া জানাতে। একটি বৃত্ত যে অঞ্চলের মধ্যে একটি জিওফেন্স সক্রিয় রয়েছে তার প্রতিনিধিত্ব করতে পারে।

 Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } parkMarkers.forEach { Circle( center = it.position, radius = 120.0, fillColor = Color.Green, strokeColor = Color.Green ) }

এখানে, আমরা আমাদের প্রতিটি চিহ্নিতকারীর জন্য একটি বৃত্ত সেট আপ করি। একটি বৃত্ত তৈরি করার জন্য এটিকে একটি অবস্থান এবং বৃত্তের ব্যাসার্ধের আকার পাস করা জড়িত। সীমানার রঙ সেট করতে এবং বৃত্তের রঙ পূরণ করতে আমরা দুটি ঐচ্ছিক পরামিতিও ব্যবহার করি।

একটি স্কেলবার দেখানো হচ্ছে

একটি ভাল মানচিত্র প্রায়শই কিংবদন্তি এবং ডায়াগ্রামের সাথে আসে যা দেখায় যে মানচিত্রে স্থানের পরিমাপ দূরত্বের সমান। এটি আপনাকে মানচিত্রের সাথে জড়িত স্থানগুলির একটি ধারণা দেয়, কারণ প্রতিটি মানচিত্র একই পরিমাপের ফর্ম ব্যবহার করতে পারে না।

ডিজিটাল মানচিত্রের জন্য যা জুম ইন এবং আউট করতে পারে, এটি জটিলতার একটি নির্দিষ্ট স্তর যুক্ত করে কারণ প্রতিনিধিত্ব করা দূরত্বগুলি গতিশীলভাবে পরিবর্তিত হতে পারে। সৌভাগ্যবশত, রচনার জন্য Google মানচিত্র আপনাকে কভার করেছে।

উইজেট লাইব্রেরি ব্যবহার করে, আপনি DisappearingScaleBar এবং ScaleBar কম্পোজেবলগুলিতে অ্যাক্সেস পাবেন। এগুলি হল UI উপাদান যা মানচিত্রের শীর্ষে বসে, ব্যবহারকারীদের দূরত্বের পরিমাপ প্রদান করে যা জুম স্তরের উপর নির্ভর করে পরিবর্তিত হয়।

 Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { // You can also use ScaleBar DisappearingScaleBar( modifier = Modifier .padding(top = 5.dp, end = 15.dp) .align(Alignment.TopStart), cameraPositionState = cameraPositionState ) Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } parkMarkers.forEach { Circle( center = it.position, radius = 120.0, fillColor = Color.Green, strokeColor = Color.Green ) }

কম্পোজযোগ্য যোগ করার পরে, আপনি একটি স্কেলবার পাবেন যা মানচিত্রের শীর্ষে জুম স্তরের উপর নির্ভর করে পরিবর্তিত হয়।

সাহায্য এবং সহযোগিতা

রচনার জন্য Google মানচিত্র হল Google মানচিত্রের সাথে কাজ করার একটি দুর্দান্ত উপায় এবং আরও অনেক কিছু শেখার আছে৷ আপনার সাহায্যের প্রয়োজন হলে আমি এখানে কয়েকটি জায়গা সুপারিশ করছি:

• কম্পোজ রেপোর জন্য Google মানচিত্র : লাইব্রেরির সোর্স কোড ধারণকারী রেপো। লাইব্রেরি কীভাবে ব্যবহার করতে হয় এবং আপনি কোথায় আপনার বাগ রিপোর্ট এবং অবদান জমা দিতে পারেন তার কোড নমুনা রয়েছে
• অ্যান্ড্রয়েড ওয়েবসাইটের জন্য Google মানচিত্র : Android এর জন্য Google মানচিত্রের পিছনের ধারণাগুলি শিখতে যাওয়ার জায়গা৷ এগুলি উচ্চ স্তরের এবং কম্পোজ লাইব্রেরি ব্যবহার করে না, তবে পটভূমিতে ব্যবহার করা হয় বলে জানা গুরুত্বপূর্ণ৷
• গুগল ম্যাপ প্ল্যাটফর্ম ডিসকর্ড গুগল ম্যাপের অফিসিয়াল ডিসকর্ড সার্ভার। এখানে আপনি একাধিক প্ল্যাটফর্মের জন্য Google Maps নিয়ে আলোচনা করছেন, জিজ্ঞাসা করছেন এবং সাহায্যের প্রস্তাব দিচ্ছেন এবং তাদের নিজস্ব কাজ প্রদর্শন করছেন।