GroundOverlay alignment differs from Google Earth

[marct83]

I have some KML and KMZ files that show different in google earth than in leaflet. The alignment is off on the leaflet map. Is there something I should check?

[Raruto]

Hi marct83,
please if you are looking for help you must provide as much information as possible (a working demo describing the issue, some screenshots, code samples, ...). The most likely thing is that the file you use is saved in a different coordinate system (the lat-lng order may also give you some problems).

Have a nice day,
Raruto

[marct83]

I thought it might be something simple. I can provide more details.

This is the kmz in google earth:

This is the kmz in my leaflet app:

You can see its shifted to right and up in the leaflet app. The shaded areas should be over top of the town names.

I have included the file (.kmz) (I had to rename it to zip so it would upload).

850.zip

[Raruto]

Given the extent of the mapped area I think there could be an excessive approximation performed by leaflet itself.

To be clear, the following is pretty much all the code used to handle GroundOverlays:

leaflet-kmz/src/KMZLayer.js

Lines 132 to 139 in 29057ad

	let el = xml.getElementsByTagName('GroundOverlay');
	for (let l, k = 0; k < el.length; k++) {
	l = _.parseGroundOverlay(el[k], data.properties);
	if (l) {
	layer.addLayer(l);
	}
	}
	return layer;

leaflet-kmz/src/utils.js

Lines 97 to 117 in 29057ad

	export function parseGroundOverlay(xml, props) {
	let [bounds, rotation] = parseLatLonBox(xml.getElementsByTagName('LatLonBox')[0]);
	let href = xml.getElementsByTagName('href')[0];
	let color = xml.getElementsByTagName('color')[0];
	let icon = xml.getElementsByTagName('Icon')[0];
	let options = {};
	if (!href && icon) {
	href = icon.getElementsByTagName('href')[0];
	}
	href = href.childNodes[0].nodeValue;
	href = props.icons[href] || href;
	if (color) {
	color = color.childNodes[0].nodeValue;
	options.opacity = parseInt(color.substring(0, 2), 16) / 255.0;
	options.color = '#' + color.substring(6, 8) + color.substring(4, 6) + color.substring(2, 4);
	}
	if (rotation) {
	options.rotation = rotation;
	}
	return new L.KMZImageOverlay(href, bounds, { opacity: options.opacity, angle: options.rotation });
	}

leaflet-kmz/src/KMZImageOverlay.js

Lines 6 to 34 in 29057ad

	L.KMZImageOverlay = L.ImageOverlay.extend({
	options: {
	angle: 0
	},
	_reset: function() {
	L.ImageOverlay.prototype._reset.call(this);
	this._rotate();
	},
	_animateZoom: function(e) {
	L.ImageOverlay.prototype._animateZoom.call(this, e);
	this._rotate();
	},
	_rotate: function() {
	if (L.DomUtil.TRANSFORM) {
	// use the CSS transform rule if available
	this._image.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
	} else if (L.Browser.ie) {
	// fallback for IE6, IE7, IE8
	var rad = this.options.angle * (Math.PI / 180),
	costheta = Math.cos(rad),
	sintheta = Math.sin(rad);
	this._image.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
	costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
	}
	},
	getBounds: function() {
	return this._bounds;
	}
	});

I recommend that you use the geometryToLayer option to try to find out the cause of this problem (you can also use it to completely override the built-in parser if you want), otherwise, try asking on dedicated forums like gis.stackexchange.com or stackoverflow.com (I apologize but honestly I have no idea what the causes could be 🤷).

Reference:

• Hook into KML parsing method to display GroundOverlay as ImageOverlay #11 (comment)
• BalloonStyle not supported #13 (comment)
• Missing icons when loading plain kml #10 (comment)

Raruto

---

PS if it can help, you can also take a look at this library as well: https://github.com/ahalota/Leaflet.KMLGroundOverlay