diff --git a/examples/.eslintrc b/examples/.eslintrc index 00aa283c79..403c6377f4 100644 --- a/examples/.eslintrc +++ b/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, diff --git a/examples/button-title.css b/examples/button-title.css deleted file mode 100644 index 894dc8157f..0000000000 --- a/examples/button-title.css +++ /dev/null @@ -1,3 +0,0 @@ -.tooltip-inner { - white-space: nowrap; -} diff --git a/examples/button-title.html b/examples/button-title.html index f8eac80295..94ed7b2571 100644 --- a/examples/button-title.html +++ b/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 --- diff --git a/examples/button-title.js b/examples/button-title.js index 74629ff70e..07b1820be6 100644 --- a/examples/button-title.js +++ b/examples/button-title.js @@ -17,11 +17,10 @@ const map = new Map({ }), }); -$('.ol-zoom-in, .ol-zoom-out').tooltip({ - placement: 'right', - container: '#map', -}); -$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({ - placement: 'left', - container: '#map', -}); +document + .querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset') + .forEach(function (el) { + new bootstrap.Tooltip(el, { + container: '#map', + }); + }); diff --git a/examples/geographic.html b/examples/geographic.html index e2b39a762b..183ce50cbe 100644 --- a/examples/geographic.html +++ b/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 --- diff --git a/examples/geographic.js b/examples/geographic.js index 84623e4663..02e6090195 100644 --- a/examples/geographic.js +++ b/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'); - - const feature = map.getFeaturesAtPixel(event.pixel)[0]; - 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'); + if (popover) { + popover.dispose(); + popover = undefined; } + 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)) { - map.getViewport().style.cursor = 'pointer'; - } else { - map.getViewport().style.cursor = 'inherit'; - } + const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit'; + map.getViewport().style.cursor = type; }); diff --git a/examples/icon.html b/examples/icon.html index 8076927a20..a0d58d3181 100644 --- a/examples/icon.html +++ b/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 --- diff --git a/examples/icon.js b/examples/icon.js index 123049ed8a..ea1fb3e53b 100644 --- a/examples/icon.js +++ b/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) { - popup.setPosition(evt.coordinate); - $(element).popover({ - placement: 'top', - html: true, - content: feature.get('name'), - }); - $(element).popover('show'); - } else { - $(element).popover('dispose'); + disposePopover(); + if (!feature) { + return; } + 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 () { - $(element).popover('dispose'); -}); +map.on('movestart', disposePopover); diff --git a/examples/kml-earthquakes.html b/examples/kml-earthquakes.html index 56f59077ae..0fa33c9140 100644 --- a/examples/kml-earthquakes.html +++ b/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 style 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 --- -
+
+
+
diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js index 0462230a81..71c8484980 100644 --- a/examples/kml-earthquakes.js +++ b/examples/kml-earthquakes.js @@ -58,33 +58,46 @@ const map = new Map({ }), }); -const info = $('#info'); -info.tooltip({ +const info = document.getElementById('info'); +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) { diff --git a/examples/kml-timezones.html b/examples/kml-timezones.html index b2da0940c2..8668f9089a 100644 --- a/examples/kml-timezones.html +++ b/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 --- -
+
+
+
diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index 2aba012ca9..61200f32f0 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -82,33 +82,46 @@ const map = new Map({ }), }); -const info = $('#info'); -info.tooltip({ +const info = document.getElementById('info'); +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) { diff --git a/examples/overlay.html b/examples/overlay.html index 43ec49bcbc..936b52461f 100644 --- a/examples/overlay.html +++ b/examples/overlay.html @@ -6,7 +6,6 @@ docs: >

The popups are created using Popovers from Bootstrap.

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: Vienna
- + diff --git a/examples/overlay.js b/examples/overlay.js index f84271782e..a8b6097c3a 100644 --- a/examples/overlay.js +++ b/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({ - container: element, - placement: 'top', + let popover = bootstrap.Popover.getInstance(element); + if (popover) { + popover.dispose(); + } + popover = new bootstrap.Popover(element, { animation: false, - html: true, + container: element, content: '

The location you clicked was:

' + hdms + '', + html: true, + placement: 'top', + title: 'Welcome to OpenLayers', }); - $(element).popover('show'); + popover.show(); });