From 026fcc66c93734d297fbf9ed32aa69871fb6fc8b Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Fri, 12 May 2017 09:56:18 +0200
Subject: [PATCH] Display country name on click select

And not only when the box selection is used
---
 examples/box-selection.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/examples/box-selection.js b/examples/box-selection.js
index ec78262945..f49a44eaac 100644
--- a/examples/box-selection.js
+++ b/examples/box-selection.js
@@ -45,29 +45,29 @@ var dragBox = new ol.interaction.DragBox({
 
 map.addInteraction(dragBox);
 
-var infoBox = document.getElementById('info');
-
 dragBox.on('boxend', function() {
   // features that intersect the box are added to the collection of
-  // selected features, and their names are displayed in the "info"
-  // div
-  var info = [];
+  // selected features
   var extent = dragBox.getGeometry().getExtent();
   vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
     selectedFeatures.push(feature);
-    info.push(feature.get('name'));
   });
-  if (info.length > 0) {
-    infoBox.innerHTML = info.join(', ');
-  }
 });
 
 // clear selection when drawing a new box and when clicking on the map
 dragBox.on('boxstart', function() {
   selectedFeatures.clear();
-  infoBox.innerHTML = '&nbsp;';
 });
-map.on('click', function() {
-  selectedFeatures.clear();
-  infoBox.innerHTML = '&nbsp;';
+
+var infoBox = document.getElementById('info');
+
+selectedFeatures.on(['add', 'remove'], function() {
+  var names = selectedFeatures.getArray().map(function(feature) {
+    return feature.get('name');
+  });
+  if (names.length > 0) {
+    infoBox.innerHTML = names.join(', ');
+  } else {
+    infoBox.innerHTML = 'No countries selected';
+  }
 });