Skip to content

Commit

Permalink
feature : change layer in runtime #327,#140
Browse files Browse the repository at this point in the history 
update readme,example
  • Loading branch information
@liodali
liodali committed Nov 20, 2022
1 parent 082f03b commit 123efc0
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 7 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
### 0.41.0 : change tile in runtime
* add `changeTileLayer` in map_controller
### 0.40.3+2 : fix bugs
* replace firebase url used in ios for map styles
### 0.40.3+1 : fix bugs
Expand Down
11 changes: 8 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# flutter_osm_plugin
![pub](https://img.shields.io/badge/pub-v0.40.3%2B2-orange)
![pub](https://img.shields.io/badge/pub-v0.41.0orange)


## Platform Support
Expand Down Expand Up @@ -35,14 +35,16 @@
## Getting Started
<img src="https://github.com/liodali/osm_flutter/blob/master/osm.gif?raw=true" alt="openStreetMap flutter examples"><br>
<br>
<img src="https://github.com/liodali/osm_flutter/blob/0.41.0/tileLayerRuntime.gif?raw=true" alt="openStreetMap flutter examples"><br>
<br>
<img src="https://github.com/liodali/osm_flutter/blob/master/dialogSimplePickerLocation.gif?raw=true" alt="openStreetMap flutter examples"><br>

## Installing

Add the following to your `pubspec.yaml` file:

dependencies:
flutter_osm_plugin: ^0.40.3+2
flutter_osm_plugin: ^0.41.0

### Migration to `0.34.0` (Android Only)
> if you are using this plugin before Flutter 3
Expand Down Expand Up @@ -175,8 +177,11 @@ controller = MapController.customLayer(
* `publicTransportationLayer` constructor for transport tiles ,it's public osm server

for more example see our example in `home_example.dart`
<b> 3.2) Change Layers in runtime </b>


```dart
await controller.changeTileLayer(tileLayer: CustomTile(...));
```
<b>4) Set map on user current location </b>

```dart
Expand Down
153 changes: 149 additions & 4 deletions example/lib/src/home/home_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ class _MainExampleState extends State<MainExample> with OSMMixinObserver {
ValueNotifier<bool> zoomNotifierActivation = ValueNotifier(false);
ValueNotifier<bool> visibilityZoomNotifierActivation = ValueNotifier(false);
ValueNotifier<bool> advPickerNotifierActivation = ValueNotifier(false);
ValueNotifier<bool> visibilityOSMLayers = ValueNotifier(false);
ValueNotifier<double> positionOSMLayers = ValueNotifier(-200);
ValueNotifier<GeoPoint?> centerMap = ValueNotifier(null);
ValueNotifier<bool> trackingNotifier = ValueNotifier(false);
ValueNotifier<bool> showFab = ValueNotifier(true);
ValueNotifier<GeoPoint?> lastGeoPoint = ValueNotifier(null);
Expand Down Expand Up @@ -171,6 +174,7 @@ class _MainExampleState extends State<MainExample> with OSMMixinObserver {
controller.listenerRegionIsChanging.addListener(() async {
if (controller.listenerRegionIsChanging.value != null) {
print(controller.listenerRegionIsChanging.value);
centerMap.value = controller.listenerRegionIsChanging.value!.center;
}
});

Expand Down Expand Up @@ -218,7 +222,7 @@ class _MainExampleState extends State<MainExample> with OSMMixinObserver {
final bounds = await controller.bounds;
print(bounds.toString());
Future.delayed(Duration(seconds: 5), () {
//controller.changeTileLayer(tileLayer: CustomTile.cycleOSM());
controller.changeTileLayer(tileLayer: CustomTile.cycleOSM());
});
}

Expand Down Expand Up @@ -264,9 +268,17 @@ class _MainExampleState extends State<MainExample> with OSMMixinObserver {
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.info),
icon: Icon(Icons.layers),
onPressed: () async {
await Navigator.popAndPushNamed(context, "/second");
if (visibilityOSMLayers.value) {
positionOSMLayers.value = -200;
await Future.delayed(Duration(milliseconds: 700));
}
visibilityOSMLayers.value = !visibilityOSMLayers.value;
showFab.value = !visibilityOSMLayers.value;
Future.delayed(Duration(milliseconds: 500), () {
positionOSMLayers.value = visibilityOSMLayers.value ? 32 : -200;
});
},
),
Builder(builder: (ctx) {
Expand All @@ -277,7 +289,7 @@ class _MainExampleState extends State<MainExample> with OSMMixinObserver {
},
child: IconButton(
onPressed: () => roadActionBt(ctx),
icon: Icon(Icons.map),
icon: Icon(Icons.route),
),
);
}),
Expand Down Expand Up @@ -523,6 +535,32 @@ class _MainExampleState extends State<MainExample> with OSMMixinObserver {
),
),
),
ValueListenableBuilder<bool>(
valueListenable: visibilityOSMLayers,
builder: (ctx, isVisible, child) {
if (!isVisible) {
return SizedBox.shrink();
}
return child!;
},
child: ValueListenableBuilder<double>(
valueListenable: positionOSMLayers,
builder: (ctx, position, child) {
return AnimatedPositioned(
bottom: position,
left: 24,
right: 24,
duration: Duration(milliseconds: 500),
child: OSMLayersChoiceWidget(
centerPoint: centerMap.value!,
setLayerCallback: (tile) async {
await controller.changeTileLayer(tileLayer: tile);
},
),
);
},
),
),
],
),
),
Expand Down Expand Up @@ -770,3 +808,110 @@ class RoadTypeChoiceWidget extends StatelessWidget {
);
}
}

class OSMLayersChoiceWidget extends StatelessWidget {
final Function(CustomTile? layer) setLayerCallback;
final GeoPoint centerPoint;
OSMLayersChoiceWidget({
required this.setLayerCallback,
required this.centerPoint,
});

@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 102,
width: 342,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
),
alignment: Alignment.center,
margin: const EdgeInsets.only(top: 8),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
setLayerCallback(CustomTile.publicTransportationOSM());
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox.square(
dimension: 64,
child: IgnorePointer(
child: OSMFlutter(
controller: MapController.publicTransportationLayer(
initPosition: centerPoint,
initMapWithUserPosition: false,
),
initZoom: 12,
maxZoomLevel: 12,
),
),
),
Text("Transportation"),
],
),
),
TextButton(
onPressed: () {
setLayerCallback(CustomTile.cycleOSM());
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox.square(
dimension: 64,
child: IgnorePointer(
child: OSMFlutter(
controller: MapController.cyclOSMLayer(
initPosition: centerPoint,
initMapWithUserPosition: false,
),
initZoom: 12,
maxZoomLevel: 12,
),
),
),
Text("CycleOSM"),
],
),
),
TextButton(
onPressed: () {
setLayerCallback(null);
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox.square(
dimension: 64,
child: IgnorePointer(
child: OSMFlutter(
controller: MapController(
initPosition: centerPoint,
initMapWithUserPosition: false,
),
initZoom: 10,
maxZoomLevel: 10,
),
),
),
Text("OSM"),
],
),
),
],
),
),
),
);
}
}
Binary file added tileLayerRuntime.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 123efc0

Please sign in to comment.