Offline Map with Mbtiles

rothdevcon · May 22, 2018, 11:51pm

Hi, I am new with ionic and i am trying to build an application with offline map using mbtiles and i need to use tiles from allmapsoft.com but when i use the map is not coming it only comes with tiles from tilemill. Can any body help
Thanks.

wf9a5m75 · May 23, 2018, 12:45am

@ionic-native/google-maps (with cordova-plugin-googlemaps) supports offline tile layer with local stored files.

Basic usage:

github.com

mapsplugin/ionic-googlemaps-quickdemo/blob/master/src/pages/tile-overlay/tile-overlay.ts

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent
} from '@ionic-native/google-maps';

/**
 * Generated class for the TileOverlayPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-tile-overlay',
  templateUrl: 'tile-overlay.html',
})

This file has been truncated. show original

github.com

mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/class/TileOverlay/addTileOverlay/README.md#demo-code

# map.addTileOverlay()

The map.addTileOverlay() method adds a tile layer on the map.

```
(from v2.3.0 to current)
var tileOverlay = map.addTileOverlay(options)

(from v2.0.0 to current)
map.addTileOverlay(options, callback);
```

## Options

params         | type               | description
---------------|--------------------|-----------------------------------------------------------------
getTile        | Function(x,y,zoom) | callback function that returns a tile image url. If return `null`, the tile is not drawn.
opacity?       | number             | (optional) tile image opacity
debug?         | boolean            | (optional) set `true` to draw debug information
visible?       | boolean            | (optional) set `false` to create invisible tile layer

This file has been truncated. show original

rothdevcon · May 25, 2018, 9:09am

Thank you very much.

Regards

Christoph Roth

+225 08 00 33 46

Skype: croth53
LinkedIn: www.linkedin.com/pub/christoph-roth/24/989/286

JeongJun · March 20, 2019, 12:26pm

Is it possible fully offline app with google-maps-plugin? because when I made a app with the plugin, the plugin requires internet connection to get a Google Maps Javascript API v3. the error is like below.

CordovaGoogleMaps.js:57 GET https://maps.googleapis.com/maps/api/js net::ERR_INTERNET_DISCONNECTED
document.addEventListener.once @ CordovaGoogleMaps.js:57
CordovaGoogleMaps.js:45 Can not load the Google Maps JavaScript API v3
CordovaGoogleMaps.js:46 Event {isTrusted: true, type: “error”, target: script, currentTarget: script, eventPhase: 2, …}

Topic		Replies	Views
MBTiles files ionic-v3	0	650	January 27, 2019
Offline (mbtiles) map with ionic and mapbox Ionic Angular	0	938	October 20, 2020
Offline vector map ionic-v3	6	1843	July 19, 2021
Offline map with capacitor, mapbox and mbtiles Capacitor	0	1584	December 10, 2021
Offline map using and native map (IOs) ionic-v1	2	2817	May 20, 2015

Offline Map with Mbtiles

Related topics