Decrease popup padding. #141

CHANGELOG.md

@@ -13,10 +13,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Enforce that every pull request includes updates to the CHANGELOG.md (this) file.
+- Add simple example of using the `instance.addPopup` method.
 
 ### Changed
 
 - Change the Github release workflow to use softprops/action-gh-release v0.1.13.
+- Decrease the popup padding.
 
 ## [v2.0.2] - 2021-09-13
 

examples/simple-html-consumer/static/index.html

@@ -36,6 +36,14 @@
       myMap.addBehavior("sidePanel");
       myMap.addBehavior("layerSwitcherInSidePanel");
       myMap.addBehavior("snappingGrid");
+
+      // Display popup with coordinates when not clicking a feature.
+      myMap.addPopup(function (event) {
+        var feature = myMap.map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; });
+        if (!feature) {
+          return '<div><h2>Coordinates</h2><p>' + event.coordinate + '</p></div>';
+        }
+      });
     </script>
   </body>
 </html>

src/styles.css

@@ -83,3 +83,8 @@
 .layer-switcher.shown {
   max-height: 300px;
 }
+
+/* Popup styles. */
+.ol-popup {
+  padding: 0.75em;
+}