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 < ***@***.***> 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 <#88 (comment)>, 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 < ***@***.***> 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 <#88 (comment)>, 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 < ***@***.***> 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 <#88 (comment)>, 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 < ***@***.***> 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 <#88 (comment)>, 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.