Adding a map of the features in HTMLReportGenerator

nielsgerrits wrote:

Yes.

 

Great answer.

nielsgerrits wrote:

Yes.

 

Thank you very much! :)

From the 4 pre-configured options, the other 3 either require an access token, or very clearly state something about “for development purposes only” (so probably need an access toen as well, or something...).

If you want to have a bit more control (or, like me, simply do not want to use any of the proprietary versions...), it is not that difficult to add a Custom HTML section, and use Openlayers and a bit of Javascript. Getting the geometry from the features is easy enough using a GeometryExtractor set to GeoJson. This way you have full control over the background maps as well.

It’s the solution I chose instead of one of the 4 preconfigured ones. So something like this:

<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css"/>
<script src="https://openlayers.org/en/v6.15.1/build/ol.js"> </script>
<div id="map" class="map" style="border: 2px solid black; widht:500px; height:500px;"></div>
<script>
  function getBufferedExtent(olFeature)
  {
    var geom = olFeature.getGeometry();
    var ext = geom.getExtent();
    var buffer = ol.extent.buffer(ext, 50);
    return buffer;
  };
  function zoomTo(olFeature)
  {
    var zext = getBufferedExtent(olFeature);
    map.getView().fit(zext, map.getSize());
  };
  var brtachtergrond = new ol.layer.Tile({
      visible:true,
      source: new ol.source.XYZ({attributions: '&copy; <a href="https://www.pdok.nl" target="_blank">PDOK</a>',
                                 url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:3857/{z}/{x}/{y}.png',
                                 projection: 'EPSG:3857'
                                 })
                                });
  var perceelSource = new ol.source.Vector();
  var perceelLayer = new ol.layer.Vector({
      source: perceelSource,
      style: new ol.style.Style ({
             stroke: new ol.style.Stroke({ color: 'rgba(00, 00, 150, 1)', width: 2}),
             fill: new ol.style.Fill({ color: 'rgba(00, 00, 150, 0.25)' })
        })
    });
  var pol = @Value(_GeoJson);
  var format = new ol.format.GeoJSON();
  var perceelFeature = format.readFeature(pol);
  perceelSource.addFeature(perceelFeature);
  var scaleLineControl = new ol.control.ScaleLine();
  scaleLineControl.setUnits('metric');
  var map= new ol.Map({
    layers: [brtachtergrond,
             perceelLayer
            ],
    target: 'map',
    controls:ol.control.defaults({attributionOptions: ({collapsible: false}) }).extend([scaleLineControl]),
    view: new ol.View({ projection: 'EPSG:3857',
                        center: [650946, 5788365],
                        zoom: 5
      })
  });
  zoomTo(perceelFeature);
</script>

Note the line

var pol = @Value(_GeoJson);

_GeoJson is the attribute I used to extract the geometry to, using a GeometryExtractor, with GeoJson as Geometry Encoding.

I could think of a lot of additions, but the question was clear so is the answer 😁 but I’ll admit it is a bit sparse.  

This is an answer to bookmark! Working samples are the best.