Skip to content

Added new plugin to README #869

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kengu merged 1 commit into from
Apr 27, 2021
Merged

Added new plugin to README #869

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 5 additions & 41 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,45 +229,6 @@ child: FlutterMap(

For more details visit [Custom CRS demo page](./example/lib/pages/custom_crs/Readme.md).

### How to Cache Tiles (Custom TileProvider)

1. Using Flutter's NetworkImage:
Flutter has a built in ImageProvider (NetworkImage) that caches images in memory until an app restart.
```dart
class CachedTileProvider extends TileProvider {
const CachedTileProvider();
@override
ImageProvider getImage(Coords<num> coords, TileLayerOptions options) {
return NetworkImage(getTileUrl(coords, options));
}
}
```

2. Using the `cached_network_image` dependency:
This dependency has an ImageProvider that caches to disk which means the cache persists through an app restart.
```dart
import 'package:cached_network_image/cached_network_image.dart';

class CachedTileProvider extends TileProvider {
const CachedTileProvider();
@override
ImageProvider getImage(Coords<num> coords, TileLayerOptions options) {
return CachedNetworkImageProvider(
getTileUrl(coords, options),
//Now you can set options that determine how the image gets cached via whichever plugin you use.
);
}
}
```

Lastly we need to add the CachedTileProvider TileProvider to TileLayerOptions
```dart
TileLayerOptions(
urlTemplate: 'https://example.com/{x}/{y}/{z}',
tileProvider: const CachedTileProvider()
)
```

## Run the example

See the `example/` folder for a working example app.
Expand All @@ -276,9 +237,11 @@ To run it, in a terminal cd into the folder.
Then execute `ulimit -S -n 2048` ([ref](https://github.com/trentpiercy/trace/issues/1#issuecomment-404494469)).
Then execute `flutter run` with a running emulator.

## Offline maps
## Preconfigured offline maps

This method is only to use preconfigured and prepackaged offline maps. For advanced caching and ability to dynamically download an area, see the [flutter_map_tile_caching](https://github.com/JaffaKetchup/flutter_map_tile_caching) plugin.

[Follow this guide to grab offline tiles](https://tilemill-project.github.io/tilemill/docs/guides/osm-bright-mac-quickstart/)<br>
First, [follow this guide to grab the tiles](https://tilemill-project.github.io/tilemill/docs/guides/osm-bright-mac-quickstart/).<br>
Once you have your map exported to `.mbtiles`, you can use [mbtilesToPng](https://github.com/alfanhui/mbtilesToPngs) to unpack into `/{z}/{x}/{y}.png`.
Move this to Assets folder and add asset directories to `pubspec.yaml`. Minimum required fields for offline maps are:

Expand Down Expand Up @@ -308,6 +271,7 @@ Note that there is also `FileTileProvider()`, which you can use to load tiles fr

## Plugins

- [flutter_map_tile_caching](https://github.com/JaffaKetchup/flutter_map_tile_caching): Provides ability to properly cache tiles for offline use & easily download a region of a map for later offline use
- [flutter_map_marker_cluster](https://github.com/lpongetti/flutter_map_marker_cluster): Provides Beautiful Animated Marker Clustering functionality
- [user_location](https://github.com/igaurab/user_location_plugin): A plugin to handle and plot the current user location in FlutterMap
- [flutter_map_location](https://github.com/Xennis/flutter_map_location): A plugin to request and display the users location and heading on the map
Expand Down