Implement PluginTileOverlay.js
MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180820-1409" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180820-1821" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordova-plugin-googlemaps</name>
<js-module name="BaseClass" src="www/BaseClass.js">
<runs/>

MODIFY
src/browser/PluginTileOverlay.js
src/browser/PluginTileOverlay.js
-
-
var utils = require('cordova/utils'),
event = require('cordova-plugin-googlemaps.event'),
BaseClass = require('cordova-plugin-googlemaps.BaseClass'),
@@ -12,17 +10,35 @@ function TileOverlay(mapId, hashCode, options) {
tileCaches = {};
var mapType = {
- name: hashCode,
+ zIndex: options.zIndex || 0,
+ name: options.name || hashCode,
mapTypeId: hashCode,
+ fadeIn: options.fadeIn === false ? false : true,
+ visible: true,
getTileFromCache: function(cacheId) {
return tileCaches[cacheId];
},
+ getZIndex: function() {
+ return this.zIndex;
+ },
+ setZIndex: function(zIndexVal) {
+ this.zIndex = parseInt(zIndexVal, 10);
+ },
opacity: 'opacity' in options ? options.opacity : 1,
tileSize: new google.maps.Size(tileSize, tileSize),
+ setVisible: function(visible) {
+ this.visible = visible;
+ var visibility = visible ? 'visible': 'hidden';
+ var keys = Object.keys(tileCaches);
+ keys.forEach(function(key) {
+ tileCaches[key].style.visibility = visibility;
+ });
+ },
+
getTile: function(coord, zoom, owner) {
var cacheId = [mapId, hashCode, coord.x, coord.y, zoom].join("-");
@@ -32,6 +48,9 @@ function TileOverlay(mapId, hashCode, options) {
var div = document.createElement('div');
div.style.width = tileSize + 'px';
div.style.height = tileSize + 'px';
+ div.style.opacity = 0;
+ div.style.visibility = 'hidden';
+
if (options.debug) {
div.style.borderLeft = "1px solid red";
div.style.borderTop = "1px solid red";
@@ -40,6 +59,7 @@ function TileOverlay(mapId, hashCode, options) {
div.style.padding = '1em';
div.innerHTML = "x = " + coord.x + ", y = " + coord.y + ", zoom = " + zoom;
}
+
div.setAttribute('cacheId', cacheId);
tileCaches[cacheId] = div;
@@ -80,7 +100,6 @@ PluginTileOverlay.prototype._create = function(onSuccess, onError, args) {
mapId = self.pluginMap.id,
getTileEventName = mapId + "-" + hashCode + "-tileoverlay";
-
pluginOptions.getTile = function(x, y, zoom, urlCallbackId) {
cordova.fireDocumentEvent(getTileEventName, {
key: urlCallbackId,
@@ -92,10 +111,43 @@ PluginTileOverlay.prototype._create = function(onSuccess, onError, args) {
var tileoverlay = new TileOverlay(self.pluginMap.id, hashCode, pluginOptions);
- map.overlayMapTypes.push(tileoverlay);
+ var layers = map.overlayMapTypes.getArray();
+ layers = layers.filter(function(layer) {
+ return !!layer;
+ });
+ layers.forEach(function(layer, idx) {
+ if (!layer) {
+ return;
+ }
+ if (layer.zIndex === undefined) {
+ layer.zIndex = idx;
+ }
+ if (!layer.getZIndex) {
+ layer.getZIndex = function() {
+ return layer.zIndex;
+ };
+ }
+ if (!layer.setZIndex) {
+ layer.setZIndex = function(zIndexVal) {
+ layer.zIndex = zIndexVal;
+ };
+ }
+ });
+ layers.push(tileoverlay);
+ layers = layers.sort(function(a, b) {
+ return a.getZIndex() - b.getZIndex();
+ });
+ layers.forEach(function(layer, idx) {
+ if (idx < map.overlayMapTypes.getLength()) {
+ layer.zIndex = idx;
+ map.overlayMapTypes.setAt(idx, layer);
+ } else {
+ layer.zIndex = idx;
+ map.overlayMapTypes.push(layer);
+ }
+ });
self.pluginMap.objects[tileoverlayId] = tileoverlay;
- self.pluginMap.objects['tileoverlay_property_' + tileoverlayId] = pluginOptions;
onSuccess({
'id': tileoverlayId
@@ -116,11 +168,64 @@ PluginTileOverlay.prototype.onGetTileUrlFromJS = function(onSuccess, onError, ar
var tileLayer = self.pluginMap.objects[tileoverlayId];
if (tileLayer.getTileFromCache(cacheId)) {
- tileLayer.getTileFromCache(cacheId).style.backgroundImage = "url('" + tileUrl + "')";
+ var tile = tileLayer.getTileFromCache(cacheId);
+ tile.style.backgroundImage = "url('" + tileUrl + "')";
+ tile.style.visibility = tileLayer.visible ? 'visible': 'hidden';
+
+ if (tileLayer.fadeIn) {
+ fadeIn(tile, 500, tileLayer.opacity);
+ } else {
+ tile.style.setOpacity = tileLayer.opacity;
+ }
}
onSuccess();
};
+PluginTileOverlay.prototype.setVisible = function(onSuccess, onError, args) {
+ var self = this;
+ var overlayId = args[0];
+ var tileoverlay = self.pluginMap.objects[overlayId];
+ if (tileoverlay) {
+ tileoverlay.setVisible(args[1]);
+ }
+ onSuccess();
+};
+
+PluginTileOverlay.prototype.setFadeIn = function(onSuccess, onError, args) {
+ var self = this;
+ var overlayId = args[0];
+ var tileoverlay = self.pluginMap.objects[overlayId];
+ if (tileoverlay) {
+ tileoverlay.fadeIn = args[1] === false ? false : true;
+ }
+ onSuccess();
+};
+PluginTileOverlay.prototype.setZIndex = function(onSuccess, onError, args) {
+ var self = this;
+ var overlayId = args[0];
+ var map = self.pluginMap.get('map');
+ var tileoverlay = self.pluginMap.objects[overlayId];
+ if (tileoverlay) {
+ tileoverlay.setZIndex(args[1]);
+
+ var layers = map.overlayMapTypes.getArray();
+ layers = layers.sort(function(a, b) {
+ return a.getZIndex() - b.getZIndex();
+ });
+ layers.forEach(function(layer, idx) {
+ if (idx < map.overlayMapTypes.getLength()) {
+ map.overlayMapTypes.setAt(idx, layer);
+ } else {
+ map.overlayMapTypes.push(layer);
+ }
+ });
+
+ }
+
+
+ onSuccess();
+};
+
PluginTileOverlay.prototype.remove = function(onSuccess, onError, args) {
var self = this;
var overlayId = args[0];
@@ -131,9 +236,24 @@ PluginTileOverlay.prototype.remove = function(onSuccess, onError, args) {
tileoverlay = undefined;
self.pluginMap.objects[overlayId] = undefined;
delete self.pluginMap.objects[overlayId];
- delete self.pluginMap.objects['tileoverlay_property_' + overlayId];
}
onSuccess();
};
module.exports = PluginTileOverlay;
+
+function fadeIn(el, time, maxOpacity) {
+ el.style.opacity = 0;
+
+ var last = +new Date();
+ var tick = function() {
+ el.style.opacity = +el.style.opacity + (new Date() - last) / time;
+ last = +new Date();
+
+ if (+el.style.opacity < maxOpacity) {
+ (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
+ }
+ };
+
+ tick();
+}

Implement PluginTileOverlay.js