OpenLayers 3: Need help in print tool

Question

I am developing a print map function in an OpenLayers 3 application it includes some functionality such as if its polygon then area of that polygon will be display OR if its line length will be display.

At present only line or polygon is displaying but its popup like feature length or feature area its not displaying

Please check attached screenshots.

After clicking on print button only map get printed as follows

But I want print of this with area only that feature is displaying

Answer 1

I have solved my overlays printing problem. I getting image of overlays numbers within map.

I have attached screenshot.

The code is as follows.

 var measure_source =  new ol.source.Vector({
       format: new ol.format.GeoJSON()
    })

var getText = function(feature) {
var text=measure_count[measure_dynamic_count];
measure_dynamic_count++;
 return text;
 };


var createTextStyle = function(feature) 
    {
     return new ol.style.Text({
      textAlign: 'center',
      font: 'Arial',
      fill: new ol.style.Fill({color: '#aa3300'}),
       stroke: new ol.style.Stroke({color: '#ffffff', width: 5}),
       //size:16px,
      text: getText(feature)

 });
 };


 function StyleFunction(feature) {
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      }),
      text: createTextStyle(feature)
    });
  } 


var measure_vector = new ol.layer.Vector({
    source: measure_source,
    style: StyleFunction

 });

Answer 2

I think what she want is to able to print the overlays. Problem is the div tag of the this measure tool is dynamic and the print pdf/png tool of openlayers-3 just use div so for the print tool these measure tool's div are invisible. I am wondering what will happen if we somehow include the these dynamic measure div tags into map tag .. give a try and hope it works.

Answer 3

Check your popover conditions. You've not indicated whether this features appears on hover or click. It may be that clicking away from the feature is causing the popover to disappear. My map works fine with this functionality and the code looks something like this:

    var clickFeatures = function (evt) {
        var element = session.popup.getElement();
        var coordinate = evt.coordinate;

        var pixel;
        var features = [];

        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function (feature, layer) {
                console.log(layer);
                features.push(feature);
                console.log(features);
                return feature;
            });
        if (feature) {
            $(popupContainer).popover('destroy');
            console.log(feature.getProperties());
            var featureProps = feature.getProperties();
            if (featureProps.geometry.layout == 'XYZM') {
                var coords = [featureProps.geometry.flatCoordinates[0], featureProps.geometry.flatCoordinates[1]];
                var coords4326 = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
                var lon = coords4326[0];
                var lat = coords4326[1];
            }
            var title = (feature.get('Description') || featureProps.name);
            var Longitude = (feature.get('Longitude') || lon);
            var Latitude = (feature.get('Latitude') || lat);
            if (Latitude) {
                var roundedLat = Latitude.toFixed(3);
                var roundedLon = Longitude.toFixed(3);
            }
            if (title === null) {
                title = "";
            }
            session.popup.setPosition(coordinate);
            var popoverContent = "";
            popoverContent += " <ul id=\"pointCard\" class=\"list-group\"></ul>"; // innerContent removed
            $(popupContainer).popover({
                'placement': 'top',
                'html': true,
                'content': popoverContent
            });
            $(popupContainer).popover('show');
        }
        else {
            $(popupContainer).popover('destroy');
            session.popup.setPosition(undefined);
        }
    }; // end of featureClick

Apologies for the long-winded code but I'm currently in the process of refining it!