Map feature popup

[gpl/argeo-suite.git] / org.argeo.app.geo.js / src / org.argeo.app.geo.js / index.html
diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.html b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.html

index f4371ceef66f26f09311cb02a4d3fb24a4e2577f..12fa0a1e4ab8fc0cdcf51f117982dade67a921d1 100644 (file)
--- a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.html
+++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.html
@@ -8,11 +8,68 @@
                         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