Comments (7)
Hi @Miguelstucom , we do have an example showcasing how Offline map works. To disconnect Mapbox stack to the network you can use
OfflineSwitch.shared.isMapboxStackConnected(false);
from mapbox-maps-flutter.
Thanks for answering @maios, the thing is that im following that example, in my project I have a button which download the mapstyle and some needed tiles, when the download is complete, I enter the map without internet connection, i should see the mapstyle and those tiles, but the map is still empty, even if I hardcode lat,lon geometry, I cant see that area after download when I enter the map offline.
Is your code needed to show information downloaded? And Im not able to find documentation about your code in flutter package.
Thanks for your help.
from mapbox-maps-flutter.
Could you provide a some sample code, better yet a small application, that would be a great help for us to debug this issue :-D
from mapbox-maps-flutter.
Thanks for the help @maios, here is the code, most of it is just the example code,
just to note, it is not downloading the stylepack or the tiles, any of both
LoadStylePack and downloadMap are the await functions called when I press my button at the main menu, after this stop downloading, Im able to enter the map, but before entering, I remove my connection to see if everything downloaded correctly and I do not force the user to enter the map to cache it.
DownloadItineraryMap is supposed to be called more than once to download more than one tile if needed.
Future<void> _downloadMap(Travel travel) async {
await _initializeMapbox();
LatLngBounds getBounds(Itinerary itinerary) {
return LatLngBounds(
northeast: Point(
coordinates: Position(
itinerary.destination!.bboxNe!.coordinates![1],
itinerary.destination!.bboxNe!.coordinates![0],
)),
southwest: Point(
coordinates: Position(
itinerary.destination!.bboxSw!.coordinates![1],
itinerary.destination!.bboxSw!.coordinates![0],
)),
);
}
final boundsProcessed = <LatLngBounds>[];
for (final itinerary in travel.itineraries!) {
final bounds = getBounds(itinerary);
if (!boundsProcessed.contains(bounds)) {
final minZoom = itinerary.destination!.minZoom!.toInt();
final maxZoom = itinerary.destination!.maxZoom!.toInt();
await _downloadItineraryMap(bounds, minZoom, maxZoom);
boundsProcessed.add(bounds);
}
}
}
Future<void> _initializeMapbox() async {
MapboxOptions.setAccessToken("key");
}
Future<void> _downloadStylePack() async {
await _initializeMapbox();
final offlineManager = await OfflineManager.create();
final stylePackLoadOptions = StylePackLoadOptions(
glyphsRasterizationMode: GlyphsRasterizationMode.IDEOGRAPHS_RASTERIZED_LOCALLY,
metadata: {"tag": "test"},
acceptExpired: false);
await offlineManager.loadStylePack(
'mapbox://styles/mapbox/streets-v11', stylePackLoadOptions, (progress) {
final percentage =
progress.completedResourceCount / progress.requiredResourceCount;
if (!_stylePackProgress.isClosed) {
_stylePackProgress.sink.add(percentage);
}
}).then((value) {
_stylePackProgress.sink.add(1);
_stylePackProgress.sink.close();
}).catchError((error) {
print('Error loading style pack: $error');
});
}
Future<void> _downloadItineraryMap(
LatLngBounds bounds,
int minZoom,
int maxZoom,
) async {
var downloading = true;
double centerLatitude =
(bounds.southwest.coordinates[0]! + bounds.northeast.coordinates[0]!) / 2;
double centerLongitude =
(bounds.southwest.coordinates[1]! + bounds.northeast.coordinates[1]!) / 2;
num southWestLatitude = bounds.southwest.coordinates[0]!;
num southWestLongitude = bounds.southwest.coordinates[1]!;
num northEastLatitude = bounds.northeast.coordinates[0]!;
num northEastLongitude = bounds.northeast.coordinates[1]!;
final bbox = BBox(
southWestLongitude,
southWestLatitude,
northEastLongitude,
northEastLatitude
);
final tmpDir = await getTemporaryDirectory();
final tileStore = await TileStore.createAt(tmpDir.uri);
if (tileStore != null) {
print('TileStore created at ${tmpDir.uri}');
} else {
print('Failed to create TileStore');
}
final tileRegionLoadOptions = TileRegionLoadOptions(
geometry: Point(
coordinates: Position(centerLongitude, centerLatitude),
bbox: bbox
).toJson(),
descriptorsOptions: [
TilesetDescriptorOptions(
styleURI: 'mapbox://styles/mapbox/streets-v11',
minZoom: minZoom,
maxZoom: maxZoom,
)
],
acceptExpired: true,
networkRestriction: NetworkRestriction.NONE);
await tileStore.loadTileRegion(
'$centerLatitude,$centerLongitude', tileRegionLoadOptions, (progress) {
final percentage =
progress.completedResourceCount / progress.requiredResourceCount;
if (!_tileRegionLoadProgress.isClosed) {
_tileRegionLoadProgress.sink.add(percentage);
}
}).then((value) {
_tileRegionLoadProgress.sink.add(1);
}).catchError((error) {
print('Error loading tile region: $error');
});
}
This is my map widget at a different app page
builder: (context, state) {
_itinerary = state.selectedItinerary;
_userLocation = state.userLocation;
initLocation();
MapboxOptions.setAccessToken("Key");
return MapWidget(
key: ValueKey("Key"),
textureView: true,
onMapCreated: (MapCreatedCallback) {
_controller = MapCreatedCallback;
_controller?.loadStyleURI('mapbox://styles/mapbox/streets-v11');
_controller?.scaleBar.updateSettings(ScaleBarSettings(enabled: false));
_controller?.location.updateSettings(LocationComponentSettings(
enabled: true, locationPuck: LocationPuck(locationPuck2D: DefaultLocationPuck2D(),),),);
_initMapComponents(_itinerary!);
},
onTapListener: (contextGesture) {
_resetSelectedSymbol();
},
);
},
Just to advice, if I just enter the map without downloading and with internet connection, its shows perfectly, the problem is trying to download the map information and entering it without internet connection.
from mapbox-maps-flutter.
Hi @Miguelstucom sorry for late reply, could you provide a minimal sample app to help investigating this?
from mapbox-maps-flutter.
Hi @maios I was able to reproduce it using the example app you mentioned here: #609 (comment)
- Open the map and download a tile for
geometry: Point(coordinates: Position(-80.1263, 25.7845)).toJson(),
(Miami, Florida) - Turn on the airplane mode on the phone.
- Zoom in on Miami Beach in Florida - no detailed map is available. I can see only a low-poly contour from the cache (see attached image).
from mapbox-maps-flutter.
@maios @wnowak-vialytics
any update on this? im also facing same
from mapbox-maps-flutter.
Related Issues (20)
- How to listen event camera zoom change or rotate change
- Branch protection on main not adhering to best practices
- How can i load local xyz tiles on map?
- Is there a way to show different marker-point pictures within one cluster layer when use clusters scheme?
- Not able to show count on cluster HOT 2
- Tapped layer color change using layer's id within properties
- No implementation found for method subscribeToEvents HOT 2
- Raster Source not working with http tiles url HOT 1
- 3D file asset (gbl) is not working HOT 2
- Not able to place LocationPuck3D below map 3d models (specifically building extrusions)
- Black screen (offline map) HOT 30
- Is there a way to display the gbl file from the device's local storage HOT 2
- onPointAnnotationClick and onTapListener both called when tapping on a Point HOT 1
- Feature Request: Adding Perimeters
- Sometimes my heatmap doesn't show up (VectorSource)
- It is not possible to fit the map to a bounds using the cameraForCoordinates... methods on iOS
- Map flickers or turns black when zooming/panning HOT 3
- Location pulse does not work in 2.1.0 HOT 1
- SymbolLayer and FillLayer not showing with VectorTiles Style HOT 3
- Polyline not rendered correctly 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 mapbox-maps-flutter.