Update example

Use latest Leaflet version. Add meta viewport tag for the page to look OK on mobile. Update broken URL in README.
heyman · Nov 21, 2023 · bc675f2 · bc675f2
1 parent f2222df
commit bc675f2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ but doesn't support keeping the aspect ratio.
 ## Example Code
 ```javascript
     // Add it to the map
-    var areaSelect = L.areaSelect({width:200, height:300, minWidth:40, minHeight:40, minHorizontalSpacing:40, minVerticalSpacing:100});
+    var areaSelect = L.areaSelect({width:200, height:300, minWidth:40, minHeight:40, minHorizontalSpacing:40, minVerticalSpacing:100, keepAspectRatio:false});
     areaSelect.addTo(map);
 
     // Read the bouding box
@@ -44,8 +44,7 @@ but doesn't support keeping the aspect ratio.
 
 ## See it in action
 
-Check out the [bundled example](http://heyman.github.com/leaflet-areaselect/example/), 
-or this [JSFiddle](http://jsfiddle.net/heyman/3N2DN/) where I've set *keepAspectRatio:true*.
+Check out the [bundled example](http://heyman.github.io/leaflet-areaselect/example/).
 
 ## Author
 

diff --git a/example/index.html b/example/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <link rel="stylesheet" href="../src/leaflet-areaselect.css" />
@@ -26,10 +27,10 @@
             <button id="setDimensions">Set Dimensions</button>     
         </div>
     </div>
-    <a href="https://github.com/heyman/leaflet-areaselect"><img style="position:absolute; top:0; right:0; border:0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
+    <a href="https://github.com/heyman/leaflet-areaselect"><img style="position:absolute; top:0; right:0; border:0; z-index: 1000;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" alt="Fork me on GitHub"></a>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="../src/leaflet-areaselect.js"></script>
     <script>
         // initialize map
@@ -43,6 +44,8 @@
             var bounds = this.getBounds();
             $("#result .sw").val(bounds.getSouthWest().lat + ", " + bounds.getSouthWest().lng);
             $("#result .ne").val(bounds.getNorthEast().lat + ", " + bounds.getNorthEast().lng);
+            $(".width").val(this.getDimensions().width);
+            $(".height").val(this.getDimensions().height);
         });
         areaSelect.addTo(map);
 

diff --git a/example/style.css b/example/style.css
@@ -20,15 +20,25 @@ html, body {
     bottom: 0;
     width: 100%;
     height: 150px;
+    display: flex;
+    gap: 10px;
 
     -webkit-box-shadow: 0 -1px 15px rgba(0,0,0, 0.2);
     box-shadow: 0 -1px 15px rgba(0,0,0, 0.2);
 }
 
-#result input[type='text'] {
-    width: 260px;
+@media (max-width: 500px) {
+    #result {
+        flex-direction: column;
+    }
 }
-.left, .right {
-    float: left;
-    width: 50%;
+
+
+#result input[type='text'] {
+    width: 100%;
 }
+
+#result .left,.right {
+    max-width: 300px;
+    flex-grow: 1;
+}