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 ?