Code Monkey home page Code Monkey logo

Comments (7)

maios avatar maios commented on September 17, 2024

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.

Miguelstucom avatar Miguelstucom commented on September 17, 2024

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.

maios avatar maios commented on September 17, 2024

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.

Miguelstucom avatar Miguelstucom commented on September 17, 2024

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.

maios avatar maios commented on September 17, 2024

Hi @Miguelstucom sorry for late reply, could you provide a minimal sample app to help investigating this?

from mapbox-maps-flutter.

wnowak-vialytics avatar wnowak-vialytics commented on September 17, 2024

Hi @maios I was able to reproduce it using the example app you mentioned here: #609 (comment)

  1. Open the map and download a tile for geometry: Point(coordinates: Position(-80.1263, 25.7845)).toJson(), (Miami, Florida)
  2. Turn on the airplane mode on the phone.
  3. 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).

1000000696

from mapbox-maps-flutter.

vijinhps avatar vijinhps commented on September 17, 2024

@maios @wnowak-vialytics
any update on this? im also facing same

from mapbox-maps-flutter.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.