openlayers/map-overview.html

   1 <html lang="en">
   2 <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
   3 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css"/>
   4     <style>
   5
   6       .ol-popup {
   7         position: absolute;
   8         background-color: white;
   9         box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  10         padding: 5px;
  11         border-radius: 10px;
  12         border: 1px solid #cccccc;
  13         bottom: 12px;
  14         left: -50px;
  15         min-width: 130px;
  16       }
  17       .ol-popup:after, .ol-popup:before {
  18         top: 100%;
  19         border: solid transparent;
  20         content: " ";
  21         height: 0;
  22         width: 0;
  23         position: absolute;
  24         pointer-events: none;
  25       }
  26       .ol-popup:after {
  27         border-top-color: white;
  28         border-width: 10px;
  29         left: 48px;
  30         margin-left: -10px;
  31       }
  32       .ol-popup:before {
  33         border-top-color: #cccccc;
  34         border-width: 11px;
  35         left: 48px;
  36         margin-left: -11px;
  37       }
  38       .ol-popup-closer {
  39         text-decoration: none;
  40         position: absolute;
  41         top: 2px;
  42         right: 8px;
  43       }
  44       .ol-popup-closer:after {
  45         content: "✖";
  46       }
  47
  48       #popup-content {
  49         font: 16px sans-serif;
  50       }
  51     </style></head>
  52 <body>
  53         <div id="map" class="map"></div>
  54
  55    <div id="popup" class="ol-popup">
  56       <div id="popup-content"></div>
  57     </div>
  58 <script
  59         src="/pkg/org.argeo.app.geo.swt.openlayers/map.js"></script>
  60 </body>
  61 </html>