width: 100%;
height: 100vh;
}
+
+ .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>
+
+ <!-- Popup -->
+ <div id="popup" class="ol-popup">
+ <div id="popup-content"></div>
+ </div>
</body>
</html>
\ No newline at end of file