Capture the IntelMap

caputuremap.user.js

// ==UserScript==
// @id             iitc-plugin-CaptureMap@spiralray
// @name           IITC plugin: CaptureMap
// @category       Info
// @version        0.0.2
// @namespace      https://www.spiralray.net/iitc_plugin/
// @description    [spiralray-2016-11-23-235400] Capture map
// @include        https://www.ingress.com/intel*
// @include        http://www.ingress.com/intel*
// @match          https://www.ingress.com/intel*
// @match          http://www.ingress.com/intel*
// @include        https://www.ingress.com/mission/*
// @include        http://www.ingress.com/mission/*
// @match          https://www.ingress.com/mission/*
// @match          http://www.ingress.com/mission/*
// @grant          none
// ==/UserScript==

function wrapper(plugin_info) {
    // ensure plugin framework is there, even if iitc is not yet loaded
    if (typeof window.plugin !== 'function') window.plugin = function () { };

    //PLUGIN AUTHORS: writing a plugin outside of the IITC build environment? if so, delete these lines!!
    //(leaving them in place might break the 'About IITC' page or break update checks)
    plugin_info.buildName = 'spiralray';
    plugin_info.dateTimeVersion = '0.0.1';
    plugin_info.pluginId = 'CaptureMap';
    //END PLUGIN AUTHORS NOTE



    // PLUGIN START ////////////////////////////////////////////////////////

    /* whatsnew
    * 0.0.1  : initial release
    */

    window.plugin.capturemap = function() {};

    window.plugin.capturemap.capture = function() {
        var mapPane = $(".leaflet-map-pane")[0];
        var mapTransform = mapPane.style.transform.replace("translate3d(", "").split(",");
        var mapX = parseFloat(mapTransform[0].replace("px", ""));
        var mapY = parseFloat(mapTransform[1].replace("px", ""));
        mapPane.style.transform = "translate3d(0px,0px,0px)";

        var myTiles = $("img.leaflet-tile");
        var tilesLeft = [];
        var tilesTop = [];
        for (var i = 0; i < myTiles.length; i++) {
            tilesLeft.push(parseFloat(myTiles[i].style.left.replace("px", "")));
            tilesTop.push(parseFloat(myTiles[i].style.top.replace("px", "")));
            myTiles[i].style.left = (tilesLeft[i] + mapX) + "px";
            myTiles[i].style.top = (tilesTop[i] + mapY) + "px";
        }

        var myDivicons = $(".leaflet-marker-icon");
        var dx = [];
        var dy = [];
        var mLeft = [];
        var mTop = [];
        for (var i = 0; i < myDivicons.length; i++) {
            mLeft.push(parseFloat(myDivicons[i].style.marginLeft.replace("px", "")));
            mTop.push(parseFloat(myDivicons[i].style.marginTop.replace("px", "")));
            var curTransform = myDivicons[i].style.transform;
            var splitTransform = curTransform.replace("translate3d(", "").split(",");
            dx.push(parseFloat(splitTransform[0].replace("px", "")));
            dy.push(parseFloat(splitTransform[1].replace("px", "")));
            myDivicons[i].style.transform = "translate3d(" + (dx[i] + mLeft[i] + mapX) + "px, " + (dy[i] + mTop[i] + mapY) + "px, 0px)";
            myDivicons[i].style.marginLeft = "0px";
            myDivicons[i].style.marginTop = "0px";
        }

        var linesLayer = $(".leaflet-zoom-animated")[0];
        var linesTransform = linesLayer.style.transform.replace("translate3d(", "").split(",");
        var linesX = parseFloat(linesTransform[0].replace("px", ""));
        var linesY = parseFloat(linesTransform[1].replace("px", ""));
        //linesLayer.style.transform = "translate3d(" + ((linesX + mapX) / 2) + "px," + ((linesY + mapY) / 2) + "px, 0px)";
        linesLayer.style.transform = "translate3d(0px,0px,0px)";
        linesLayer.style.left = (linesX + mapX) + "px";
        linesLayer.style.top = (linesY + mapY) + "px";

        html2canvas(document.getElementById("map"), {
            useCORS: true,
            onrendered: function(canvas) {
            	for (var i = 0; i < myTiles.length; i++) {
                    myTiles[i].style.left = (tilesLeft[i]) + "px";
                    myTiles[i].style.top = (tilesTop[i]) + "px";
                }
                for (var i = 0; i < myDivicons.length; i++) {
                    myDivicons[i].style.transform = "translate3d(" + dx[i] + "px, " + dy[i] + "px, 0)";
                    myDivicons[i].style.marginLeft = mLeft[i] + "px";
                    myDivicons[i].style.marginTop = mTop[i] + "px";
                }
                linesLayer.style.left = "0px";
                linesLayer.style.top = "0px";
                linesLayer.style.transform = "translate3d(" + (linesX) + "px," + (linesY) + "px, 0px)";
                mapPane.style.transform = "translate3d(" + (mapX) + "px," + (mapY) + "px, 0px)";
                
                
                var base64 = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
                var bin = atob(base64.replace(/^.*,/, ''));
                var buffer = new Uint8Array(bin.length);
                for (var i = 0; i < bin.length; i++) {
                    buffer[i] = bin.charCodeAt(i);
                }
                var blob = new Blob([buffer.buffer], {
                    type: "image/jpeg"
                });
                var image_link = document.createElement('a');
                //image_link.href = base64;
                image_link.href = window.URL.createObjectURL(blob);
                var date = new Date();
                var latlng = map.getCenter();
                var zoom = map.getZoom();
                image_link.download = [ date.getFullYear(), ( '0' + (date.getMonth() + 1) ).slice( -2 ), ( '0' + date.getDate() ).slice( -2 ), ( '0' + date.getHours() ).slice( -2 ), ( '0' + date.getMinutes() ).slice( -2 ), ( '0' + date.getSeconds() ).slice( -2 ) ].join( '' )+'_'+Math.round(latlng.lat*1000000)+'_'+Math.round(latlng.lng*1000000)+'_'+zoom+'.jpg';
                image_link.click();
            }
        });


    }

    var setup = function () {
        $('#toolbox').append(' <a onclick="window.plugin.capturemap.capture();return false;">Capture</a>');

        var head = document.getElementsByTagName('head')[0];
        
        var script_h2c = document.createElement('script');
        script_h2c.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js";
        head.appendChild(script_h2c);

        var script_h2csvg = document.createElement('script');
        script_h2csvg.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.svg.min.js";
        head.appendChild(script_h2csvg);

        //window.addHook('mapDataRefreshEnd', function() { setTimeout ( function() { window.plugin.capturemap.capture(); }, 3000); });
    }

    // PLUGIN END //////////////////////////////////////////////////////////


    setup.info = plugin_info; //add the script info data to the function as a property
    if (!window.bootPlugins) window.bootPlugins = [];
    window.bootPlugins.push(setup);
    // if IITC has already booted, immediately run the 'setup' function
    if (window.iitcLoaded && typeof setup === 'function') setup();
} // wrapper end
// inject code into site context
var script = document.createElement('script');
var info = {};
if (typeof GM_info !== 'undefined' && GM_info && GM_info.script) info.script = { version: GM_info.script.version, name: GM_info.script.name, description: GM_info.script.description };
script.appendChild(document.createTextNode('(' + wrapper + ')(' + JSON.stringify(info) + ');'));
(document.body || document.head || document.documentElement).appendChild(script);