Feedback requested: pixi.js as an overlayView inside Google maps

[dinther]

Not so much a question as sharing and hopefully receive critical feedback. I spend a few days revisiting on how best to implement Pixi inside Google maps. My starting point was the work from Pedro Sousa and examples from Google

However, I didn't just want to show graphics in Google maps, I wanted to place them exactly where I want them world wide and at the correct size. That is a bit of a challenge since Google maps uses a Mercator projection and scale varies with latitude. On this page I am running a demo showing my pixioverlay class simplifying the use of pixi in google maps. The dome shows accurate polygon positioning at an exact size of 500 x 500 meters. It is also interactive. click/Tap the orange rectangle for it to start and stop spinning. 

function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		zoom: 16,
		center: {lat: 51.906144, lng: 4.492393},
		mapTypeId: google.maps.MapTypeId.SATELLITE			
	});
	// The custom PixiOverlay object contains the pixi world
	overlay = new PixiOverlay(map, initPixi, update);
};

In the above example a new overlay is created. The overlay object creates it's own Pixi Renderer and world stage. An init handler and update handler is passed in as an option.

function initPixi(){
	poly = new PIXI.Graphics();
	poly.beginFill(0xFF3300);
	poly.fillAlpha = 0.5;
	poly.moveTo(0,0);
	poly.lineTo(500, 0);
	poly.lineTo(500, 500);
	poly.lineTo(0, 500);
	poly.lineTo(0, 0);
	poly.endFill();
	overlay.world.addChild(poly);
	overlay.setCoord(poly, 51.906144,4.492393);
}

In initPixi you can create your pixi objects. Note how I created a polygon measuring 500 units wide and high. The Polygon is then added to overlay.world (Stage). You can place your pixi object anywhere on the planet by using overlay.setCoord passing in the pixi object, latitude and longitude. The pixi object will also be scaled automatically so that one whole pixi unit is exactly one meter at any latitude. (This won't work for very large polygons as map scale varies over latitude)

function update(deltaTime){
	poly.rotation += 0.1 * deltaTime;
}

The update handler receives a deltaTime in seconds and this handler is used to drive all the pixi animations.

The whole thing appears to run quite smooth both on mobile devices and desktop but I can't help but think that my code is still inefficient. In particular the repositioning of the div inside the overlayView seems counter productive but so far I have failed to get accurate positioning in any other way.

Javascript units used in addition to pixi.js:

pixioverlay.js
animate.js
geodesy.js

I'd be grateful for any tips, links or feedback.

[dinther]

I ended up with a very different solution because I need both static and scaling content and this didn't work too well. Google Maps overlayView's scroll and scale when the map does. So especially on mobile devices I ended up with the entire UI that is supposed to be static, moving during a pan action on the map and only restore when the pan finishes. Not even close to good enough. In fact, worse then the solution I had before. But for anyone that just wants to use Pixi to paint on the map this is a good way to go.

Thinking about it now I suppose I could have used two Pixi renderers. Once for the map and one for the UI and use the UI. Mmmm, food for thought.