thumbnail generation code

[bartvde]

We should update the thumbnail generation code so that we can generate them from the canvas instead

[bartvde]

so the current code needs a global function called createMapThumbnail

var createMapThumbnail = function(obj_id) {
    var xmap = $('.olMapViewport');
    height = xmap.height();
    width = xmap.width();
    var map = xmap.clone();
    map.find('*').each(function(i) {
        e = $(this);
        if(e.css('display') === 'none' || (e.attr("class") !== undefined && (e.attr("class").indexOf('olControl') >= 0 || e.attr("class").indexOf('x-') >= 0))) {
            e.remove();
        } else if (e.attr('src') === '/static/geoexplorer/externals/ext/resources/images/default/s.gif') {
            e.remove();
        } else {
            e.removeAttr("id");
        }
    });

    var url = window.location.pathname.replace('/view', '');

    if (typeof obj_id != 'undefined' && url.indexOf('new')){
        url = url.replace('new', obj_id);
    }

    url+= '/thumbnail';

    $.ajax({
        type: "POST",
        url: url,
        data: ("<div style='height:" + height + "px; width: " + width + "px;'>" + map.html() + "</div>"),
        success: function(data, status, jqXHR) {
            return true;
        }
    });
    return true;
};

[jj0hns0n]

Do you need help with this one?

On Tue, Jan 31, 2017 at 7:12 AM, Bart van den Eijnden < notifications@github.com> wrote:

so the current code needs a global function called createMapThumbnail

var createMapThumbnail = function(obj_id) { var xmap = $('.olMapViewport'); height = xmap.height(); width = xmap.width(); var map = xmap.clone(); map.find('*').each(function(i) { e = $(this); if(e.css('display') === 'none' || (e.attr("class") !== undefined && (e.attr("class").indexOf('olControl') >= 0 || e.attr("class").indexOf('x-') >= 0))) { e.remove(); } else if (e.attr('src') === '/static/geoexplorer/externals/ext/resources/images/default/s.gif') { e.remove(); } else { e.removeAttr("id"); } });

var url = window.location.pathname.replace('/view', '');

if (typeof obj_id != 'undefined' && url.indexOf('new')){
    url = url.replace('new', obj_id);
}

url+= '/thumbnail';

$.ajax({
    type: "POST",
    url: url,
    data: ("<div style='height:" + height + "px; width: " + width + "px;'>" + map.html() + "</div>"),
    success: function(data, status, jqXHR) {
        return true;
    }
});
return true;

};

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/GeoNode/geonode-client/issues/88#issuecomment-276389784, or mute the thread https://github.com/notifications/unsubscribe-auth/AAe43nqE-JQj6_e8FyAbIiMfwAXXx8tvks5rX09pgaJpZM4Li-Xm .

[bartvde]

@jj0hns0n can you tell me a bit more about the thumbnail endpoint? Can I post a base64 encoded image? Is it server-side rendering of HTML what Ian did?

[jj0hns0n]

Yes, I think you can pass a base64 encoded image, but we will have to test. Yes the old server side generation code is something that Ian worked on long ago and it can go away.

On Tue, Jan 31, 2017 at 7:39 AM, Bart van den Eijnden < notifications@github.com> wrote:

@jj0hns0n https://github.com/jj0hns0n can you tell me a bit more about the thumbnail endpoint? Can I post a base64 encoded image? Is it server-side rendering of HTML what Ian did?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GeoNode/geonode-client/issues/88#issuecomment-276398358, or mute the thread https://github.com/notifications/unsubscribe-auth/AAe43gw_9ADNNDDelR_c-yTHGX-CE61kks5rX1W-gaJpZM4Li-Xm .

[bartvde]

We can do something similar to: http://openlayers.org/en/latest/examples/export-map.html

[jj0hns0n]

As long as we are not relying on geoserver and just using the browser, whatever works is fine with me :)

On Tue, Jan 31, 2017 at 8:01 AM, Bart van den Eijnden < notifications@github.com> wrote:

We can do something similar to: http://openlayers.org/en/ latest/examples/export-map.html

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GeoNode/geonode-client/issues/88#issuecomment-276405178, or mute the thread https://github.com/notifications/unsubscribe-auth/AAe43vEdrAknh0mzdXfoeIy8kMrXIJ3sks5rX1rJgaJpZM4Li-Xm .

[bartvde]

so it seems we need to also automatically update the thumbnail on save, like is done here? https://github.com/GeoNode/geonode/blob/cea5011c2f735e83005bea013fa784034736d057/geonode/maps/templates/maps/map_geoexplorer.js#L34:L37

[bartvde]

We also need to make sure that for our case thumbnail.js doesn't get included in the main geonode template: https://github.com/GeoNode/geonode/blob/23c42efc66b940875f76ea78ab457ffb3d07ebb6/geonode/maps/templates/maps/map_detail.html#L314

[jj0hns0n]

@bartvde, this is doing server side generation here I believe. We want it generated on the client and shipped to the server already in image form

On Thu, Feb 2, 2017 at 1:13 AM, Bart van den Eijnden < notifications@github.com> wrote:

We also need to make sure that for our case thumbnail.js doesn't get included in the main geonode template: https://github.com/GeoNode/ geonode/blob/23c42efc66b940875f76ea78ab457ffb3d07ebb6/geonode/maps/ templates/maps/map_detail.html#L314

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GeoNode/geonode-client/issues/88#issuecomment-276904816, or mute the thread https://github.com/notifications/unsubscribe-auth/AAe43kztPXEyu2hItMLcWynDxFD9IFVUks5rYZ5SgaJpZM4Li-Xm .

[bartvde]

Right that's what we are working on now, but the standard template includes that thumbnail.js file when it shouldn't for the react viewer. Mila is working on a fix for that.