Select to view content in your preferred language

Zoom in and ZoomOut

162
1
06-06-2024 11:46 AM
allamymp
New Contributor

Could someone please help me?

I'm trying to create a zoom in and zoom out button, I've tried every possible way but it never works. In Debug, the values ​​of scaleState are updated but the map always remains the same no matter if I click on the Zoom In or Zoom Out button.

Thank you very much for your time and for your help!

@Composable
fun MapPage() {
val context = LocalContext.current
val coroutineScope = rememberCoroutineScope()
ArcGISEnvironment.applicationContext = context.applicationContext
val scaleState = remember { mutableStateOf(1000) }

val locationDisplay = rememberLocationDisplay().apply {
setAutoPanMode(LocationDisplayAutoPanMode.Recenter)
}

val requestPermission = remember { mutableStateOf(false) }

if (checkPermissions(context)) {
LaunchedEffect(Unit) {
locationDisplay.dataSource.start()
}
} else {
requestPermission.value = true
}

if (requestPermission.value) {
RequestPermissions(
context = context,
onPermissionsGranted = {
coroutineScope.launch {
locationDisplay.dataSource.start()
requestPermission.value = false
}
}
)
}
val map = remember {
createMap(scaleState.value)
}

Scaffold(
topBar = {
// Add a top bar (optional)
},
content = {
Box(modifier = Modifier.fillMaxSize()) {
MapView(
modifier = Modifier
.fillMaxSize()
.padding(it),
arcGISMap = map,
locationDisplay = locationDisplay,
)
Box(
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(10.dp)
.padding(bottom = 200.dp)
) {
Column {
IconButton(onClick = {
coroutineScope.launch {
locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.Recenter)
locationDisplay.dataSource.start()
}
}) {
Icon(
Icons.Rounded.LocationOn,
contentDescription = "Center on current location"
)
}
IconButton(onClick = {
coroutineScope.launch {
scaleState.value *= 2
}
}) {
Icon(
Icons.Rounded.KeyboardArrowUp,
contentDescription = "Zoom In"
)
}
IconButton(onClick = {
coroutineScope.launch {
if (scaleState.value / 2 > 0) {
scaleState.value /= 2
}
}
}) {
Icon(
Icons.Rounded.KeyboardArrowDown,
contentDescription = "Zoom Out"
)
}
}
}
}
}
)
}

fun createMap(scale: Int): ArcGISMap {
val busStopUrl =
"https://labgeo3.recife.ifpe.edu.br/server/rest/services/Sigabem_2021_2022/bdlabgeo_gisadmin_Paradas_Onibus_2023/FeatureServer/0"

// Create feature table and feature layer
val serviceFeatureTable = ServiceFeatureTable(busStopUrl)
val featureLayer = FeatureLayer.createWithFeatureTable(serviceFeatureTable)

// Create map and add feature layer
return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
initialViewpoint = Viewpoint(
latitude = -8.0475622,
longitude = -34.8769643,
scale = scale.toDouble()
)
operationalLayers.add(featureLayer)
}
}

fun checkPermissions(context: Context): Boolean {
// Check permissions to see if both permissions are granted.
// Coarse location permission.
val permissionCheckCoarseLocation = ContextCompat.checkSelfPermission(
context,
Manifest.permission.ACCESS_COARSE_LOCATION
) == PackageManager.PERMISSION_GRANTED
// Fine location permission.
val permissionCheckFineLocation = ContextCompat.checkSelfPermission(
context,
Manifest.permission.ACCESS_FINE_LOCATION
) == PackageManager.PERMISSION_GRANTED

return permissionCheckCoarseLocation && permissionCheckFineLocation
}

@Composable
fun RequestPermissions(context: Context, onPermissionsGranted: () -> Unit) {

// Create an activity result launcher using permissions contract and handle the result.
val activityResultLauncher = rememberLauncherForActivityResult(
ActivityResultContracts.RequestMultiplePermissions()
) { permissions ->
// Check if both fine & coarse location permissions are true.
if (permissions.all { it.value }) {
onPermissionsGranted()
} else {
showError(context, "Location permissions were denied")
}
}

LaunchedEffect(Unit) {
activityResultLauncher.launch(
// Request both fine and coarse location permissions.
arrayOf(
Manifest.permission.ACCESS_COARSE_LOCATION,
Manifest.permission.ACCESS_FINE_LOCATION
)
)
}

}

fun showError(context: Context, message: String) {
// Show an error message
Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}





Tags (4)
0 Kudos
1 Reply
Erick_1
Esri Contributor

Hello @allamymp ,

It seems that you are not applying the new value on the MapView after you change it. This should be done through the MapViewProxy

You will first have to define a MapViewProxy instance, then in your zoom buttons you'll have to set the new scale value, as such: 

IconButton(onClick = {
    ...
    coroutineScope.launch {
        ...
            mapViewProxy.setViewpointScale((scaleState.value))
    }
...

 

0 Kudos