Comments (4)
Can you be a bit more precise? What is exactly the expected result for you to consider it "smooth"? What "open-source solutions" have you tried? (asking because I'm the maintainer of flutter_map_animations and animating from point a to b has been working pretty well until now)
I don't think that an animateTo
method is specifically needed in the core flutter_map repository to solve your issue.
from flutter_map.
You could use https://github.com/ibrierley/line_animator if any use.
from flutter_map.
You can reproduce issue, just create new key for maptile (use dataviz). Based on @TesteurManiak
It has very little shifts that can be visible when moving
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:path_provider/path_provider.dart';
import 'package:test/map_page.dart';
import 'package:test/my_home_page.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
void main() {
runApp(const MyApp());
}
Future<Style> readStyleMapFuture() async {
final val = await StyleReader(
uri: 'https://api.maptiler.com/maps/dataviz/style.json?key={key}',
apiKey: '',
).read();
styleMap = val;
return val;
}
Style? styleMap;
Completer<Style> readStyleMapCompl = () {
final completer = Completer<Style>();
completer.complete(readStyleMapFuture());
return completer;
}();
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: FutureBuilder(
future: readStyleMapCompl.future,
builder: (context, snap) {
if (styleMap != null) {
return MapPage(
style: styleMap!,
);
}
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}),
);
}
}
const _startedId = 'AnimatedMapController#MoveStarted';
const _inProgressId = 'AnimatedMapController#MoveInProgress';
const _finishedId = 'AnimatedMapController#MoveFinished';
LatLng destLocation = const LatLng(43.236850, 76.956741);
class MapPage extends StatefulWidget {
final Style style;
const MapPage({
required this.style,
super.key,
});
@override
State<MapPage> createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> with SingleTickerProviderStateMixin {
late AnimationController animationController;
MapController mapController = MapController();
late MapOptions mapOptions;
@override
void initState() {
animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 100),
);
mapOptions = const MapOptions(
initialCenter: LatLng(
43.209653,
76.816967,
),
initialZoom: 16,
);
super.initState();
_init();
}
void _init() async {
Future(() {
_animatedMapMove(
destLocation: destLocation,
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: FlutterMap(
mapController: mapController,
options: mapOptions,
children: [
VectorTileLayer(
cacheFolder: getTemporaryDirectory,
tileProviders: widget.style.providers,
sprites: widget.style.sprites,
theme: widget.style.theme,
tileOffset: const TileOffset(zoomOffset: -3),
concurrency: 4,
maximumZoom: 15,
layerMode: VectorTileLayerMode.vector,
),
AnimatedBuilder(
animation: animationController,
builder: (context, _) {
return PolylineLayer(
polylines: [
Polyline(
points: [
const LatLng(
43.209653,
76.816967,
),
LatLng(
mapController.camera.center.latitude,
mapController.camera.center.longitude,
),
],
)
],
);
},
),
],
),
);
}
void _animatedMapMove({
required LatLng destLocation,
}) {
// Create some tweens. These serve to split up the transition from one location to another.
// In our case, we want to split the transition be<tween> our current map center and the destination.
final camera = mapController.camera;
final latTween = Tween<double>(
begin: camera.center.latitude,
end: destLocation.latitude,
);
final lngTween = Tween<double>(
begin: camera.center.longitude,
end: destLocation.longitude,
);
final zoomTween = camera.zoom;
// Create a animation controller that has a duration and a TickerProvider.
// The animation determines what path the animation will take. You can try different Curves values, although I found
// fastOutSlowIn to be my favorite.
final startIdWithTarget =
'$_startedId#${destLocation.latitude},${destLocation.longitude},${camera.zoom}';
bool hasTriggeredMove = false;
animationController.addListener(() {
final String id;
if (animationController.value == 1.0) {
id = _finishedId;
} else if (!hasTriggeredMove) {
id = startIdWithTarget;
} else {
id = _inProgressId;
}
hasTriggeredMove |= mapController.move(
LatLng(
latTween.evaluate(animationController),
lngTween.evaluate(animationController),
),
zoomTween,
id: id,
);
});
animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationController.dispose();
} else if (status == AnimationStatus.dismissed) {
animationController.dispose();
}
});
animationController.forward();
}
}
from flutter_map.
I'm closing this as it's been previously decided this form of animation is currently out of scope for FM core - if there's any reason to reconsider this, of course it can be changed - and it is becoming more of a report of a bug in the existing animation plugin.
from flutter_map.
Related Issues (20)
- [BUG] v7-beta: `Polyline` becomes distorted & invisible (but remains interactive) when zoomed far in HOT 14
- [BUG] Retina simulation not working on WMTS URL templates without {r} parameter in V7-beta HOT 5
- [kml support] <kml support> HOT 1
- [BUG] MapEventTap - Delay between touch and event HOT 1
- Add privacy manifest file for iOS HOT 2
- Dragging polygon/polyline HOT 1
- [BUG (v7)] Dotted polyline throws exception: `Bad state: No element` HOT 1
- [BUG] v7-beta: polygon becomes distorted & invisible (but remains interactive) when zoomed far in HOT 7
- [BUG] map rotation is always possible on web even with InteractiveFlag set to InteractiveFlag.none HOT 2
- Load data from an external GeoJSON file HOT 2
- [BUG] pinchZoomWinGestures, rotationThreshold (etc.?) not working
- [BUG] Map tiles from local storage not loading when internet speed is poor HOT 5
- [BUG] Cannot use the package on flutter 3.22 HOT 1
- [BUG] External `MapController` lifecycle not synced with widget when destroyed and rebuilt HOT 12
- [BUG] `Polygon`s and `Polyline`s don't update when `points` modified HOT 5
- Tiles don't load after building a release apk HOT 1
- [BUG] Too high `package:meta` dependency constraint HOT 5
- [BUG] Overlapping `Polygon`s with same colors cause cutting HOT 3
- [BUG] Alternative polygon renderer in 7.0 renderers multiple holes incorrectly HOT 2
- [FEATURE] Drawing interactive polygons in real time HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter_map.