fix: overlay example css

openlayers · Jul 4, 2024 · c7e160e · c7e160e
1 parent b76a0c8
commit c7e160e
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 5 deletions.
diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js
@@ -48,15 +48,72 @@ function initCodeSandboxButton(options) {
 <!DOCTYPE html>
 <html>
   <head>
-  <title>Ol-Cesium example in sandbox</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="node_modules/ol/ol.css">
-  <script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Cesium.js"></script>
+    <title>Ol-Cesium example in sandbox</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="node_modules/ol/ol.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Cesium.js"></script>
+    <style>
+      .ol-popup {
+        position: absolute;
+        background-color: white;
+        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px solid #cccccc;
+        bottom: 12px;
+        left: -50px;
+        min-width: 280px;
+      }
+      .ol-popup:after, .ol-popup:before {
+        top: 100%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      .ol-popup:after {
+        border-top-color: white;
+        border-width: 10px;
+        left: 48px;
+        margin-left: -10px;
+      }
+      .ol-popup:before {
+        border-top-color: #cccccc;
+        border-width: 11px;
+        left: 48px;
+        margin-left: -11px;
+      }
+      .ol-popup-closer {
+        text-decoration: none;
+        position: absolute;
+        top: 2px;
+        right: 8px;
+      }
+      .ol-popup-closer:after {
+        content: "✖";
+      }
+      .popover-content {
+        min-width: 180px;
+      }
+      code {
+        padding: 2px 4px;
+        font-size: 90%;
+        color: #c7254e;
+        background-color: #f9f2f4;
+        border-radius: 4px;
+      }
+    </style>
   </head>
   <body>
   ${indexHtmlContent}
   </body>
-  <script type="module" src="/index.js"></script>
+  <script type="module" src="/index.js"></script>  
+  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </html>`;
   const parameters = {
     template: 'parcel',

diff --git a/examples/overlay.html b/examples/overlay.html
@@ -53,6 +53,15 @@
       .popover-content {
         min-width: 180px;
       }
+
+      /* for Codesandbox */
+      code {
+        padding: 2px 4px;
+        font-size: 90%;
+        color: #c7254e;
+        background-color: #f9f2f4;
+        border-radius: 4px;
+      }
     </style>
   </head>
   <body>