Hi,
Is it possible to add a map of a feature/layer in an HTML report using the HTMLReportGenerator?
Thank you in advance
Solved
Adding a map of the features in HTMLReportGenerator
This post is closed to further activity.
It may be an old question, an answered question, an implemented idea, or a notification-only post.
Please check post dates before relying on any information in a question or answer.
For follow-up or related questions, please post a new question or idea.
If there is a genuine update to be made, please contact us and request that the post is reopened.
It may be an old question, an answered question, an implemented idea, or a notification-only post.
Please check post dates before relying on any information in a question or answer.
For follow-up or related questions, please post a new question or idea.
If there is a genuine update to be made, please contact us and request that the post is reopened.
+22- Influencer
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: '© <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.
+62Yes.
Great answer.
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.
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...).
...
This is an answer to bookmark! Working samples are the best.