Search the Community

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.