-1

I need to use a few google aerial pictures for the image processing, and because I need many pictures, so it is hard to manually screen-shot these pictures on hand, so I am wondering is there a way to automatically export the satellite images given a geo location.

I am using node.js, and it seems zombie and phantom.js are the approach to simulate the human browser, it is possible to retrieve the html from the browser, but can the approaches render the google map html and then allow me to do the screenshot.

Cœur
  • 37,241
  • 25
  • 195
  • 267
user824624
  • 7,077
  • 27
  • 106
  • 183

1 Answers1

0

Yes, that is fairly easily done with plain PhantomJS. You can also use ZombieJS or CasperJS for this. They make it easier to handle many steps without running into callback hell or static code.

I added the neccessary functions for clicking and typing. Setting the user agent string is necessary, because otherwise Google will deliver code which might not be runnable on the (old) PhantomJS 1.x engine.

var page = require('webpage').create(),
    classical = true;

// This userAgent works good with GM
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.41 Safari/535.1';
page.viewportSize = {
    width: 1280,
    height: 800
};

function click(selector){
    page.evaluate(function(selector){
        // taken from here: http://stackoverflow.com/a/15948355
        var ev = document.createEvent("MouseEvent");
        ev.initMouseEvent(
            "click",
            true /* bubble */, true /* cancelable */,
            window, null,
            0, 0, 0, 0, /* coordinates */
            false, false, false, false, /* modifier keys */
            0 /*left*/, null
        );
        document.querySelector(selector).dispatchEvent(ev);
    }, selector);
}

function type(text){
    page.evaluate(function(text, classical){
        var el = document.querySelector(classical ? "#gbqfq" : "#searchboxinput");
        el.value = text;
        el.focus();
    }, text, classical);
    page.sendEvent('keypress', page.event.key.Enter);
}

page.open("https://www.google.com/maps", function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
        phantom.exit();
    } else {
        if (classical) {
            click("#paneltoggle2");
        }
        setTimeout(function(){
            page.render("1.png");
            click(classical ? "#mv-primary-container > .mv-primary" : "button.widget-minimap-shim");
        }, 1000); // +1 sec
        setTimeout(function(){
            page.render("2.png");
            type("bern");
        }, 11000); //+10 sec
        setTimeout(function(){
            if (classical) {
                click("#paneltoggle2");
            }
        }, 16000); //+5 sec
        setTimeout(function(){
            page.render("3.png");
            phantom.exit();
        }, 21000); //+5 sec
    }
});

If you're using PhantomJS version < 1.9.8, you should run it with --ssl-protocol=tlsv1. It might also be helpful to crop the images so that the controls are not visible using clipRect.

Artjom B.
  • 61,146
  • 24
  • 125
  • 222