I am using the package flutter_map to build a map in my app, where there are circles around points. I am trying to turn this layer on/off dynamically, in accordance to the zoom level.
Such as the following, where I'm trying to only show the CircleLayerOptions layer if the map zoom level is >14 (zoomed in).
FlutterMap(
mapController: _mapController,
options: MapOptions(
center: LatLng(startLat, startLon),
zoom: 14,
plugins: [MarkerClusterPlugin()],
onTap: (_, __) => _popupController.hideAllPopups(),
),
layers: [
TileLayerOptions(
minZoom: 1,
maxZoom: 20,
backgroundColor: Colors.white,
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
),
// HERE (show circles around the points if zoomed in enough) <---------------------
(_mapController.zoom > 14) ? CircleLayerOptions(circles: myCircles)
: Container(),
]
);
The issue with this is that pinch zoom specifically doesn't reload the map at all.
Any idea how I can reload the state of the map automatically when the
user pinch zooms in or out?
(In case anyone asks, I am not using google maps as I'm trying to keep my app open source)
SOLUTION:
Courtesy of pskink (see above)
The MapController has an event listener that allows me to capture when pinch zoom is being done (called Drag as the event name). I can then call setState(() {}) to reload the map as I please. See below.
_mapController.mapEventStream.listen((event) {
if (_mapController.zoom >= 12) {
setState(() {});
}
});
return FlutterMap(
mapController: _mapController,
... etc ...
);
Related
The docs says
// Called when the camera starts moving.
///
/// This can be initiated by the following:
/// 1. Non-gesture animation initiated in response to user actions.
/// For example: zoom buttons, my location button, or marker clicks.
/// 2. Programmatically initiated animation.
/// 3. Camera motion initiated in response to user gestures on the map.
/// For example: pan, tilt, pinch to zoom, or rotate.
final VoidCallback onCameraMoveStarted;
How to check if the map is moved by user gestures only (3) (pan, tilt, pinch...) not programmatically (1) and (2)
Anyway, you can track taps and gestures and camera updates together and decide is map moved due to user gestures or not. Or even disable gestures for map like Mangaldeep Pannu proposed:
return AbsorbPointer(
absorbing: true,
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: cameraPosition,
gestureRecognizers: {
Factory<OneSequenceGestureRecognizer>(() => ScaleGestureRecognizer()),
}
)
);
then process all of them programmatically and decide what to do with map.
I am working on a bus tracking app in flutter but struck at making an moving bus icon animation with google_maps_flutter i tried using markers but it doesn't have any animation on marker i dont how to tackle this situation is there anything to make moving anmation with markers in maps
For this kind of apps you need a source to receive location from in real-time [ you can use node.js and socket.io for backend ], like driver app [in driver app listen for location changes], You don't need animation for markers while receiving live location from the driver app call the method that adds marker on the map use driver's unique id as marker id every time you call updateDriverMarkersWithCircle() method, here is the method that I used for this purpose, it gets called every time the drivers' location is received, this method will update the marker if the received data has same id(which will look like moving cars) else it will add a new marker on the map using driver's id:
here is the output image
void updateDriverMarkersWithCircle( Map newLocalData ) async{
final Uint8List markerIcon = await getBytesFromAsset('assets/images/yellow_car.png', 180);
LatLng latLng = LatLng( newLocalData['lat'], newLocalData['long'] );
_markers.add(
Marker(
markerId: MarkerId( newLocalData['id'].toString() ),
position: latLng,
rotation: newLocalData['heading'].toDouble(),
draggable: false,
zIndex: 2,
flat: true,
anchor: Offset(0.5, 0.5),
icon: BitmapDescriptor.fromBytes( markerIcon ))
);
_circles.add(
Circle(
circleId: CircleId(newLocalData['id'].toString()),
radius: newLocalData['accuracy'].toDouble(),
zIndex: 1,
strokeColor: Colors.blue,
center: latlng,
fillColor: Colors.blue.withAlpha(70)
)
);
}
I'm trying to make a 'custom button' for my app.
I have an image of egg with transparent backgroung and I need this image to be a button that ignore tapping on the transparent part.
Right now , I use gesturedetcetor , I also tried inkwell ,they are both detect tapping all the whole image, include the transparent back.
Align(
alignment: Alignment(0, 0.75),
child: Container(
width: swidth * 0.75,
height: sheight * 0.6,
child: GestureDetector(
onTap: () {
setState(() {
pushes--;
});
},
child: Image.asset(
'images/egg.png',
fit: BoxFit.fill,
)),
))
Welcome maor ts in Stackoverflow and Flutter dev.
I was very interesting with your question and your problem, so I decided to solve it with a new package you can use.
This package is transparent_image_button which I recently coded it.
You can use it as this example
TransparentImageButton.assets( "assets/images/egg.png",
width: 200,
onTapInside: () => print("You tapped the image."),
onTapOutside: () => print("You tapped outside the image."),
)
As you can see, you can set function when you tapped on image and another function when you tapped outside the image.
I hope other people can benefit from it also. Thanks for giving me the idea with your question.
In the way, you are implementing it will detect the tap on all over the image.
I will suggest you add the transparent view on the image in the fill area and then add GestureDetector on that view. In this way, you can avoid the click on the transparent area.
Try this code may solved your issue
Row(children: <Widget>[
GestureDetector(child: Container(
width: swidth * 0.75,
height: sheight * 0.6,
),onTap: (){
setState(() {
pushes--;
});
},),
Image.asset(
'images/egg.png',
fit: BoxFit.fill,
)
],)
I'm trying to increase the speed of my change in text by pressing a button. So my text is a number.toString() and is increasing by 1 (++) every time I click my GestureDetector that I've created. But I'm trying to use the property onLongPress to increase the speed by which my text increases when I hold the button down. But nothing I've tried has worked successfully!
I've scoured the internet for info and all I found was how to slow it down one by one, which is not only the opposite of what I need but also it doesn't continue decreasing in count when I hold down the button, it only decreases the speed at which the button is pressed per number. The code I used was:
import 'package:flutter/scheduler.dart' show timeDilation;
...
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
GestureDetector(onTap: () => age >= 100 ? null : setState(() {
age++; }),
child: Icon(Icons.add_circle_outline, size: 40.0, color:
Colors.white,),
onLongPress: () { setState(() {
timeDilation = 10.0;
weight++;
});
},
), //GestureDetector
I expected the animation time to decrease, but I didn't expect to have to repeat tapping the button each time to allow for this decrease. I really want to increase the animation time and keep it increasing without having to constantly repeat pressing the button.
Although onLongPress in the GestureDetector is used for longer taps, it's still designed for a single press, not for contnual presses. What you're looking for though can be accomplished with the Listener widget, using onPointerDown, which would allow you to continuously process a tap down. There's a simple example here.
I am developing one application with Cordova, AngularJs and OnsenUI,
I am using Google Maps Api to show my current location and around 200 other locations marker,
Google maps works fine in all other devices but app crashes when i zoom in IOS-11.3 with Iphone X only,
Cordova : 6.5.0
AngularJs 1
npm: 2.14.0
I have added firebase crash report plugin and it reported OOM(Out Of Memory) report for crash,
Marker image size is only 1kb and around 200 markers are there.
Here is my code
var mapProp = {
center: new google.maps.LatLng(userlocation.latitude, userlocation.longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
MapOptions: {
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false
}
};
var map = new google.maps.Map(document.getElementById("mapNearByBreweries"), mapProp);
var usermarker = new google.maps.Marker({
position: new google.maps.LatLng(userlocation.latitude, userlocation.longitude),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
strokeColor: "#0000FF",
},
draggable: false,
map: map
});
for (var i = 0; i < breweries.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(breweries[i].Latitude, breweries[i].Longitude),
map: map,
icon: 'images/blue-dot.png'
//animation: google.maps.Animation.BOUNCE
});
So, which new things in ios 11.3(IphoneX) can cause out of memory in google map api on zoom?
and what can i do to resolve this issue?
We had this exact issue and rolling back to Google Maps version 3.31 worked for us :)
You can check out the different versions available here:
https://developers.google.com/maps/documentation/javascript/releases#321
Apparently they switched to an experimental renderer in 3.32 and it broke the fast zoom with custom markers for us.
Hope this helps!