so the question is simple.. why can't I move the map camera using mapcontroller when I put search criteria using geocoding or pletora? any way to do this?
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:geocoder/geocoder.dart';
import 'package:latlong/latlong.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
class Maps extends StatefulWidget {
@override
_MapsState createState() => _MapsState();
}
class _MapsState extends State<Maps> {
double long = 106.816666;
double lat = -6.200000;
double zoom = 15.0;
double rotation = 0.0;
LatLng point = LatLng(-6.200000, 106.816666);
var location = [];
MapController mapController;
@override
void initState() {
super.initState();
mapController = MapController();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
floatingActionButton: ElevatedButton(
onPressed: () async {
print(point);
// ParseGeoPoint pts = await ParseGeoPoint(latitude: lat,longitude: long);
// ParseObject data = await ParseObject('OrderIndividu')..set('AlamatG', pts);
// await Navigator.pop(context);
},
child: Text('Save Alamat'),
),
appBar: AppBar(
title: Text('Map'),
centerTitle: true,
),
body: Stack(
children: [
FlutterMap(
mapController: mapController,
options: MapOptions(
onTap: (p) async {
location = await Geocoder.local.findAddressesFromCoordinates(
new Coordinates(p.latitude, p.longitude));
setState(() {
long = p.longitude;
lat = p.latitude;
point = p;
print(p);
print(long);
print(lat);
});
print(
"${location.first.countryName} - ${location.first.featureName}");
},
center: LatLng(-6.200000, 106.816666),
zoom: zoom,
),
layers: [
TileLayerOptions(
urlTemplate:
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c']),
MarkerLayerOptions(
markers: [
Marker(
width: 100.0,
height: 100.0,
point: point,
builder: (ctx) => Container(
child: Icon(
Icons.location_on,
color: Colors.red,
),
),
)
],
),
],
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 34.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
child: TextField(
onSubmitted: (val) async{
final query = val;
var addresses = await Geocoder.local.findAddressesFromQuery(query);
var first = addresses.first;
await mapController.moveAndRotate(LatLng(first.coordinates.latitude, first.coordinates.longitude), zoom, rotation);
setState(() {
long = first.coordinates.longitude;
lat = first.coordinates.latitude;
point = LatLng(first.coordinates.latitude, first.coordinates.longitude);
});
print("${first.featureName} : ${first.coordinates}");
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(16.0),
hintText: "Cari Alamat Anda",
prefixIcon: Icon(Icons.location_on_outlined),
),
),
),
// Center(
// child: Card(
// child: Padding(
// padding: const EdgeInsets.all(8.0),
// child: Column(
// children: [
// Text("${location.first.featureName},${location.first.locality},${location.first.countryName}", style: TextStyle(fontSize: 16.0),),
// ],
// ),
// ),
// ),
// ),
],
),
),
],
),
),
);
}
}
is there any coding for me to manipulate camera on the map to the marker location? I dont know any function to do this.. not even mapcontroller. so anyone can help me?
guess I found a way to search for mapping both from clicking and on textfield box. it was done using MapController.move(double LatLng, double zoom)
here is the code
body: Stack(
children: [
FlutterMap(
mapController: mapController,
options: MapOptions(
controller: mapController,
onTap: (p) async {
location = await Geocoder.local.findAddressesFromCoordinates(
new Coordinates(p.latitude, p.longitude));
setState(() {
long = p.longitude;
lat = p.latitude;
point = p;
mapController.move(LatLng(p.latitude, p.longitude), zoom);
});
print(
"${location.first.countryName} - ${location.first.featureName}");
},
center: point,
zoom: zoom,
),
layers: [
TileLayerOptions(
urlTemplate:
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c']),
MarkerLayerOptions(
markers: [
Marker(
width: 100.0,
height: 100.0,
point: point,
builder: (ctx) => Container(
child: Icon(
Icons.location_on,
color: Colors.red,
),
),
)
],
),
],
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 34.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
child: TextField(
onSubmitted: (val) async{
final query = val;
var addresses = await Geocoder.local.findAddressesFromQuery(query);
var first = addresses.first;
setState(() {
long = first.coordinates.longitude;
lat = first.coordinates.latitude;
point = LatLng(first.coordinates.latitude, first.coordinates.longitude);
mapController.move(LatLng(first.coordinates.latitude, first.coordinates.longitude), zoom);
});
print("${first.featureName} : ${first.coordinates}");
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(16.0),
hintText: "Cari Alamat Anda",
prefixIcon: Icon(Icons.location_on_outlined),
),
),
),
// Center(
// child: Card(
// child: Padding(
// padding: const EdgeInsets.all(8.0),
// child: Column(
// children: [
// Text("${location.first.featureName},${location.first.locality},${location.first.countryName}", style: TextStyle(fontSize: 16.0),),
// ],
// ),
// ),
// ),
// ),
],
),
),
],