Merge pull request #14039 from MoonE/improve-examples

Improve some examples

examples/cartodb.js

@@ -10,17 +10,28 @@ const mapConfig = {
       'options': {
         'cartocss_version': '2.1.1',
         'cartocss': '#layer { polygon-fill: #F00; }',
-        'sql': 'select * from european_countries_e where area > 0',
       },
     },
   ],
 };
 
+function setArea(n) {
+  mapConfig.layers[0].options.sql =
+    'select * from european_countries_e where area > ' + n;
+}
+const areaSelect = document.getElementById('country-area');
+setArea(areaSelect.value);
+
 const cartoDBSource = new CartoDB({
   account: 'documentation',
   config: mapConfig,
 });
 
+areaSelect.addEventListener('change', function () {
+  setArea(this.value);
+  cartoDBSource.setConfig(mapConfig);
+});
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -32,17 +43,7 @@ const map = new Map({
   ],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: [8500000, 8500000],
     zoom: 2,
   }),
 });
-
-function setArea(n) {
-  mapConfig.layers[0].options.sql =
-    'select * from european_countries_e where area > ' + n;
-  cartoDBSource.setConfig(mapConfig);
-}
-
-document.getElementById('country-area').addEventListener('change', function () {
-  setArea(this.value);
-});

examples/kml-earthquakes.js

@@ -69,8 +69,10 @@ const tooltip = new bootstrap.Tooltip(info, {
 });
 
 let currentFeature;
-const displayFeatureInfo = function (pixel) {
-  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+const displayFeatureInfo = function (pixel, target) {
+  const feature = target.closest('.ol-control')
+    ? undefined
+    : map.forEachFeatureAtPixel(pixel, function (feature) {
         return feature;
       });
   if (feature) {
@@ -97,9 +99,14 @@ map.on('pointermove', function (evt) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  displayFeatureInfo(pixel);
+  displayFeatureInfo(pixel, evt.originalEvent.target);
 });
 
 map.on('click', function (evt) {
-  displayFeatureInfo(evt.pixel);
+  displayFeatureInfo(evt.pixel, evt.originalEvent.target);
+});
+
+map.getTargetElement().addEventListener('pointerleave', function () {
+  tooltip.hide();
+  currentFeature = undefined;
 });

examples/kml-timezones.js

@@ -93,8 +93,10 @@ const tooltip = new bootstrap.Tooltip(info, {
 });
 
 let currentFeature;
-const displayFeatureInfo = function (pixel) {
-  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+const displayFeatureInfo = function (pixel, target) {
+  const feature = target.closest('.ol-control')
+    ? undefined
+    : map.forEachFeatureAtPixel(pixel, function (feature) {
         return feature;
       });
   if (feature) {
@@ -121,9 +123,14 @@ map.on('pointermove', function (evt) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  displayFeatureInfo(pixel);
+  displayFeatureInfo(pixel, evt.originalEvent.target);
 });
 
 map.on('click', function (evt) {
-  displayFeatureInfo(evt.pixel);
+  displayFeatureInfo(evt.pixel, evt.originalEvent.target);
+});
+
+map.getTargetElement().addEventListener('pointerleave', function () {
+  tooltip.hide();
+  currentFeature = undefined;
 });

examples/reprojection-by-code.js

@@ -139,12 +139,19 @@ searchButton.onclick = function (event) {
 /**
  * Handle checkbox change events.
  */
-renderEdgesCheckbox.onchange = function () {
+function onReprojectionChange() {
   osmSource.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
-};
-showTilesCheckbox.onchange = function () {
-  debugLayer.setVisible(showTilesCheckbox.checked);
-};
-showGraticuleCheckbox.onchange = function () {
+}
+function onGraticuleChange() {
   graticule.setVisible(showGraticuleCheckbox.checked);
-};
+}
+function onTilesChange() {
+  debugLayer.setVisible(showTilesCheckbox.checked);
+}
+showGraticuleCheckbox.addEventListener('change', onGraticuleChange);
+renderEdgesCheckbox.addEventListener('change', onReprojectionChange);
+showTilesCheckbox.addEventListener('change', onTilesChange);
+
+onReprojectionChange();
+onGraticuleChange();
+onTilesChange();