--- /dev/null
+<html lang="en">
+<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css"/>
+ <style>
+
+ .ol-popup {
+ position: absolute;
+ background-color: white;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+ padding: 5px;
+ border-radius: 10px;
+ border: 1px solid #cccccc;
+ bottom: 12px;
+ left: -50px;
+ min-width: 130px;
+ }
+ .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: "✖";
+ }
+
+ #popup-content {
+ font: 16px sans-serif;
+ }
+ </style></head>
+<body>
+ <div id="map" class="map"></div>
+
+ <div id="popup" class="ol-popup">
+ <div id="popup-content"></div>
+ </div>
+<script
+ src="/pkg/org.argeo.app.geo.swt.openlayers/map.js"></script>
+</body>
+</html>
\ No newline at end of file