2020-12-14 20:01:21 +01:00
|
|
|
(function () {
|
|
|
|
farmOS.map.behaviors.popup = {
|
|
|
|
attach: function (instance) {
|
|
|
|
|
2021-05-20 01:45:47 +02:00
|
|
|
// Helper function to build the feature name as a link.
|
|
|
|
const featureName = function (feature) {
|
|
|
|
// Bail if either the name or url aren't defined.
|
|
|
|
const name = feature.get('name');
|
|
|
|
const url = feature.get('url');
|
|
|
|
if (name === undefined || url === undefined) {
|
|
|
|
return name;
|
|
|
|
}
|
|
|
|
// Build a link with the url and name.
|
|
|
|
return `<a href="${url}">${name}</a>`;
|
|
|
|
}
|
|
|
|
|
2021-04-08 21:13:00 +02:00
|
|
|
// Create a popup and add it to the instance for future reference.
|
|
|
|
instance.popup = instance.addPopup(function (event) {
|
|
|
|
var content = '';
|
|
|
|
var feature = instance.map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; });
|
|
|
|
if (feature) {
|
2020-12-14 20:01:21 +01:00
|
|
|
|
2021-04-08 21:13:00 +02:00
|
|
|
// If the feature is a cluster, then create a list of names and add it
|
|
|
|
// to the overall feature's description.
|
|
|
|
var features = feature.get('features');
|
|
|
|
if (features !== undefined) {
|
|
|
|
var names = [];
|
|
|
|
features.forEach(function (item) {
|
2021-05-20 01:45:47 +02:00
|
|
|
const name = featureName(item);
|
|
|
|
if (name !== undefined) {
|
|
|
|
names.push(name);
|
2020-12-14 20:01:21 +01:00
|
|
|
}
|
2021-04-08 21:13:00 +02:00
|
|
|
});
|
|
|
|
if (names.length !== 0) {
|
|
|
|
feature.set('description', '<ul><li>' + names.join('</li><li>') + '</li></ul>');
|
2020-12-14 20:01:21 +01:00
|
|
|
}
|
2021-04-08 21:13:00 +02:00
|
|
|
feature.set('name', names.length + ' item(s):');
|
|
|
|
}
|
2020-12-14 20:01:21 +01:00
|
|
|
|
2021-05-20 01:45:47 +02:00
|
|
|
var name = featureName(feature) || '';
|
2021-04-08 21:13:00 +02:00
|
|
|
var description = feature.get('description') || '';
|
|
|
|
var measurement = instance.measureGeometry(feature.getGeometry(), instance.units);
|
|
|
|
if (name !== '' || measurement !== '' || description !== '') {
|
|
|
|
content = '<h4 class="ol-popup-name">' + name + '</h4><div class="ol-popup-measurement"><small>' + measurement + '</small></div><div class="ol-popup-description">' + description + '</div>';
|
2020-12-14 20:01:21 +01:00
|
|
|
}
|
2021-04-08 21:13:00 +02:00
|
|
|
}
|
|
|
|
return content;
|
|
|
|
});
|
2020-12-14 20:01:21 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
}());
|