feat(@capacitor/google-maps): Custom tile overlay

[LaravelFreelancerNL]

This PR adds the custom tile overlay ability.

Note that this isn't my code. The programmer we hired for the job wasn't able to see it through; however it should be fully functional.

Anyway, we could use some help in case anything needs to be changed.

[IT-MikeS]

@LaravelFreelancerNL could you provide a example of how to use this new functionality?

[LaravelFreelancerNL]

Sure, time allowing I'll supply an example this week.

[LaravelFreelancerNL]

It's basically a port of the tileOverlay in the Cordova Google Maps plugin:

import { GoogleMap } from "@capacitor/google-maps";

const apiKey = "YOUR_API_KEY_HERE";
const mapRef = document.getElementById("map");

const newMap = await GoogleMap.create({
    id: "my-map", // Unique identifier for this map instance
    element: mapRef, // reference to the capacitor-google-map element
    apiKey, // Your Google Maps API Key
    config: {
        center: {
            // The initial position to be rendered by the map
            lat: 33.6,
            lng: -117.9,
        },
        zoom: 8, // The initial zoom level to be rendered by the map
    },
});

await newMap.addTileOverlay({
    debug: true,
    visible: true,
    opacity: 1.0,
    zIndex: 1,
    getTile(x, y, zoom) {
        const tileUrl = "your-image-url/{x}/{y}/{z}/image.gif"
            .replace("{z}", zoom)
            .replace("{x}", x)
            .replace("{y}", y);
        return tileUrl;
    },
});

Is this what you need?

[IT-MikeS]

Added feature request tag so it can be tracked internally

[clopio]

Hello
Below is my test page for the creation of a googleMaps map followed by the coverage of this map by an IGN map (France 1/25000)

Here's the error: It seems that googlemaps doesn't yet know addTileOverlay!

ERROR TypeError: _this2.map.addTileOverlay is not a function
ajoute_map_ign home.page.ts:60
Babel 3
ZoneAwarePromise Angular
_asyncToGenerator Babel
ajoute_map_ign home.page.ts:87
loadMap home.page.ts:51
Babel 2
Angular 12

Can you help me ?

home.page.ts :

import { Component } from '@angular/core';

import { GoogleMap } from '@capacitor/google-maps';

@component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})

export class HomePage {
map: any;

constructor() {}

ngOnInit() {
this.loadMap();
}

async loadMap() {
console.log("loadMap");

	const apikey:string= 'AIzaSyCy0...wCDM-o';
	const mapRef: any  = document.getElementById('map');

	this.map = await GoogleMap.create({
	  id: 'myMap', // Unique identifier for this map instance
	  element: mapRef, // reference to the capacitor-google-map element
	  apiKey: apikey, // Your Google Maps API Key
	  config: {
		center: {
		  // The initial position to be rendered by the map
		  lat: 46.904,
		  lng: 6.354,
		},

		zoom: 8, // The initial zoom level to be rendered by the map
	  },
	});
	
	this.ajoute_map_ign('cartes','GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2','image/png');

}// fin loadMap()

async ajoute_map_ign(ignKey:string,layer:string,format:string) {
console.log('ajoute_map_ign');

	var url_ign2="https://wxs.ign.fr/" + ignKey + "/geoportail/wmts?";
	
	await this.map.addTileOverlay({
		  debug: true,  // draw the debug information : quadrillage ave x,y et zoom
		  visible: true,
		  opacity: 1.0,  // from 0.0 to 1.0
		  zIndex: 1,
		  // tileSize: 256,
		  
		  getTile(x:number,y:number,zoom:number) {
			  
				const url_ign=
				url_ign2 + 
				"LAYER=" +layer +
				"&EXCEPTIONS=text/xml" +
				"&FORMAT=" + format +
				"&SERVICE=WMTS" +
				"&VERSION=1.0.0" +
				"&REQUEST=GetTile" +
				"&STYLE=normal" +
				"&TILEMATRIXSET=PM" +
				"&TILEMATRIX=" + zoom +
				"&TILEROW=" + y +
				"&TILECOL=" + x ;
				
					
				return url_ign;
				
		  },
  });
  
} // fin ajoute_map_ign(ignKey,layer,format)

} // fin class HomePage

Ionic Info:

Ionic CLI : 7.2.0 (C:\Users\Utilisateur\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.8.0
@angular-devkit/build-angular : 17.3.0
@angular-devkit/schematics : 17.3.0
@angular/cli : 17.3.0
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.7.2
@capacitor/android : 5.7.0 (C:\Users\Utilisateur\node_modules@capacitor\android)
@capacitor/core : 5.7.2
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.16.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.4
OS : Windows 10

[LaravelFreelancerNL]

Thanks @clopio, I'll look in to it later this week

[clopio]

Hello,
I'm surprised: No answer to my question !

[LaravelFreelancerNL]

Hello, I'm surprised: No answer to my question !

Sorry, more pressing matters have been keeping me busy. The extension is not forgotten though. This plugin was moved to a separate package. So, I'll redo the PR as soon as I have time for it.

[clopio]

With Ionic 3 and Cordova, it was very easy to display all sorts of maps with addTileoverlay.
Moving on to Ionic 7 capacitor 5 or 6, who can explain why the “addtileoverlay” function isn’t defined?
For my part, I’m stuck and won’t be able to modify my obsolete Ionic 3 application.
if you have some time, I think that you are the person who can save me !

[FlossyWeb]

Hi there, @LaravelFreelancerNL it seems your addTileOverlay feature only works on Web platform.
I'm trying to figure out why it doesn't work neither on Android or iOS, do you have any why ? or is it working for you ?

[LaravelFreelancerNL]

Hi @FlossyWeb,

I've managed to scrounge together the other parts. However, it was originally implemented on capacitor v5. With v6 being out and v7 in the works I haven't been able to get it to work just yet. I've seen it work in the webversion on v5 though.

I've forked the separate plugin repo and added the code there in a v6 branch. It will take work and testing to get working.

If anyone wants to contribute please do. I'm just the messenger in this case.