Update examples to use new bootstrap tooltip

examples/.eslintrc

@@ -2,14 +2,15 @@
   "globals": {
     "$": false,
     "arc": false,
-    "common": false,
+    "bootstrap": false,
     "chroma": false,
+    "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
-    "html2canvas": false,
     "geojsonvt": false,
     "gifler": false,
     "GyroNorm": false,
+    "html2canvas": false,
     "jspdf": false,
     "jsts": false,
     "JSZip": false,

examples/button-title.css

@@ -1,3 +0,0 @@
-.tooltip-inner {
-  white-space: nowrap;
-}

examples/button-title.html

@@ -7,7 +7,6 @@ docs: >
   For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
 tags: "custom, tooltip"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---

examples/button-title.js

@@ -17,11 +17,10 @@ const map = new Map({
   }),
 });
 
-$('.ol-zoom-in, .ol-zoom-out').tooltip({
+document
-  placement: 'right',
+  .querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
-  container: '#map',
+  .forEach(function (el) {
-});
+    new bootstrap.Tooltip(el, {
-$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
+      container: '#map',
-  placement: 'left',
+    });
-  container: '#map',
+  });
-});

examples/geographic.html

@@ -8,7 +8,6 @@ docs: >
   not geographic).
 tags: "geographic"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---

examples/geographic.js

@@ -36,9 +36,7 @@ const element = document.getElementById('popup');
 
 const popup = new Overlay({
   element: element,
-  positioning: 'bottom-center',
   stopEvent: false,
-  offset: [0, -10],
 });
 map.addOverlay(popup);
 
@@ -59,31 +57,34 @@ map.on('moveend', function () {
   info.innerHTML = formatCoordinate(center);
 });
 
+let popover;
 map.on('click', function (event) {
-  $(element).popover('dispose');
+  if (popover) {
-
+    popover.dispose();
-  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+    popover = undefined;
-  if (feature) {
-    const coordinate = feature.getGeometry().getCoordinates();
-    popup.setPosition([
-      coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
-      coordinate[1],
-    ]);
-    $(element).popover({
-      container: element.parentElement,
-      html: true,
-      sanitize: false,
-      content: formatCoordinate(coordinate),
-      placement: 'top',
-    });
-    $(element).popover('show');
   }
+  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+  if (!feature) {
+    return;
+  }
+  const coordinate = feature.getGeometry().getCoordinates();
+  popup.setPosition([
+    coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
+    coordinate[1],
+  ]);
+
+  popover = new bootstrap.Popover(element, {
+    container: element.parentElement,
+    content: formatCoordinate(coordinate),
+    html: true,
+    offset: [0, 20],
+    placement: 'top',
+    sanitize: false,
+  });
+  popover.show();
 });
 
 map.on('pointermove', function (event) {
-  if (map.hasFeatureAtPixel(event.pixel)) {
+  const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
-    map.getViewport().style.cursor = 'pointer';
+  map.getViewport().style.cursor = type;
-  } else {
-    map.getViewport().style.cursor = 'inherit';
-  }
 });

examples/icon.html

@@ -6,7 +6,6 @@ docs: >
   Example using an icon to symbolize a point.
 tags: "vector, style, icon, marker, popup"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---

examples/icon.js

@@ -59,22 +59,29 @@ const popup = new Overlay({
 });
 map.addOverlay(popup);
 
+let popover;
+function disposePopover() {
+  if (popover) {
+    popover.dispose();
+    popover = undefined;
+  }
+}
 // display popup on click
 map.on('click', function (evt) {
   const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
     return feature;
   });
-  if (feature) {
+  disposePopover();
-    popup.setPosition(evt.coordinate);
+  if (!feature) {
-    $(element).popover({
+    return;
-      placement: 'top',
-      html: true,
-      content: feature.get('name'),
-    });
-    $(element).popover('show');
-  } else {
-    $(element).popover('dispose');
   }
+  popup.setPosition(evt.coordinate);
+  popover = new bootstrap.Popover(element, {
+    placement: 'top',
+    html: true,
+    content: feature.get('name'),
+  });
+  popover.show();
 });
 
 // change mouse cursor when over marker
@@ -84,6 +91,4 @@ map.on('pointermove', function (e) {
   map.getTarget().style.cursor = hit ? 'pointer' : '';
 });
 // Close the popup when the map is moved
-map.on('movestart', function () {
+map.on('movestart', disposePopover);
-  $(element).popover('dispose');
-});

examples/kml-earthquakes.html

@@ -6,8 +6,9 @@ docs: >
   This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
 tags: "KML, vector, style, tooltip"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---
-<div id="map" class="map"><div id="info"></div></div>
+<div id="map" class="map">
+  <div id="info"></div>
+</div>

examples/kml-earthquakes.js

@@ -58,33 +58,46 @@ const map = new Map({
   }),
 });
 
-const info = $('#info');
+const info = document.getElementById('info');
-info.tooltip({
+info.style.pointerEvents = 'none';
+const tooltip = new bootstrap.Tooltip(info, {
   animation: false,
+  customClass: 'pe-none',
+  offset: [0, 5],
+  title: '-',
   trigger: 'manual',
 });
 
+let currentFeature;
 const displayFeatureInfo = function (pixel) {
-  info.css({
-    left: pixel[0] + 'px',
-    top: pixel[1] - 15 + 'px',
-  });
   const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
     return feature;
   });
   if (feature) {
-    info.attr('data-original-title', feature.get('name')).tooltip('show');
+    info.style.left = pixel[0] + 'px';
+    info.style.top = pixel[1] + 'px';
+    if (feature !== currentFeature) {
+      tooltip.setContent({'.tooltip-inner': feature.get('name')});
+    }
+    if (currentFeature) {
+      tooltip.update();
+    } else {
+      tooltip.show();
+    }
   } else {
-    info.tooltip('hide');
+    tooltip.hide();
   }
+  currentFeature = feature;
 };
 
 map.on('pointermove', function (evt) {
   if (evt.dragging) {
-    info.tooltip('hide');
+    tooltip.hide();
+    currentFeature = undefined;
     return;
   }
-  displayFeatureInfo(map.getEventPixel(evt.originalEvent));
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
 });
 
 map.on('click', function (evt) {

examples/kml-timezones.html

@@ -7,8 +7,9 @@ docs: >
   yellow with an opacity calculated based on the current offset to local noon.
 tags: "KML, vector, style"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---
-<div id="map" class="map"><div id="info"></div></div>
+<div id="map" class="map">
+  <div id="info"></div>
+</div>

examples/kml-timezones.js

@@ -82,33 +82,46 @@ const map = new Map({
   }),
 });
 
-const info = $('#info');
+const info = document.getElementById('info');
-info.tooltip({
+info.style.pointerEvents = 'none';
+const tooltip = new bootstrap.Tooltip(info, {
   animation: false,
+  customClass: 'pe-none',
+  offset: [0, 5],
+  title: '-',
   trigger: 'manual',
 });
 
+let currentFeature;
 const displayFeatureInfo = function (pixel) {
-  info.css({
-    left: pixel[0] + 'px',
-    top: pixel[1] - 15 + 'px',
-  });
   const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
     return feature;
   });
   if (feature) {
-    info.attr('data-original-title', feature.get('name')).tooltip('show');
+    info.style.left = pixel[0] + 'px';
+    info.style.top = pixel[1] + 'px';
+    if (feature !== currentFeature) {
+      tooltip.setContent({'.tooltip-inner': feature.get('name')});
+    }
+    if (currentFeature) {
+      tooltip.update();
+    } else {
+      tooltip.show();
+    }
   } else {
-    info.tooltip('hide');
+    tooltip.hide();
   }
+  currentFeature = feature;
 };
 
 map.on('pointermove', function (evt) {
   if (evt.dragging) {
-    info.tooltip('hide');
+    tooltip.hide();
+    currentFeature = undefined;
     return;
   }
-  displayFeatureInfo(map.getEventPixel(evt.originalEvent));
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
 });
 
 map.on('click', function (evt) {

examples/overlay.html

@@ -6,7 +6,6 @@ docs: >
   <p>The popups are created using <a href="https://getbootstrap.com/docs/5.2/components/popovers/">Popovers</a> from Bootstrap.</p>
 tags: "overlay, popup, bootstrap, popover"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
 ---
@@ -16,5 +15,5 @@ resources:
   <a class="overlay" id="vienna" target="_blank" href="https://en.wikipedia.org/wiki/Vienna">Vienna</a>
   <div id="marker" title="Marker"></div>
   <!-- Popup -->
-  <div id="popup" title="Welcome to OpenLayers"></div>
+  <div id="popup"></div>
 </div>

examples/overlay.js

@@ -43,19 +43,22 @@ const vienna = new Overlay({
 });
 map.addOverlay(vienna);
 
+const element = popup.getElement();
 map.on('click', function (evt) {
-  const element = popup.getElement();
   const coordinate = evt.coordinate;
   const hdms = toStringHDMS(toLonLat(coordinate));
-
-  $(element).popover('dispose');
   popup.setPosition(coordinate);
-  $(element).popover({
+  let popover = bootstrap.Popover.getInstance(element);
-    container: element,
+  if (popover) {
-    placement: 'top',
+    popover.dispose();
+  }
+  popover = new bootstrap.Popover(element, {
     animation: false,
-    html: true,
+    container: element,
     content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
+    html: true,
+    placement: 'top',
+    title: 'Welcome to OpenLayers',
   });
-  $(element).popover('show');
+  popover.show();
 });