update readme and examples

Author: henrythasler

README.md

@@ -22,6 +22,8 @@ Leaflet.Geodesic is available from [unpkg](https://unpkg.com/browse/leaflet.geod
 
 Add it in your nodejs-project with `npm i leaflet.geodesic`.
 
+If possible, pin the plug-in to a specific version and use [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). Check the [release page](https://github.com/henrythasler/Leaflet.Geodesic/releases) for the latest version, links and checksum. A checksum can by verified with `npm run build`, is stored in `dist/leaflet.geodesic.umd.min.js.sha256` on [jsDelivr](https://www.jsdelivr.com/package/npm/leaflet.geodesic?path=dist) and [unpkg](https://unpkg.com/browse/leaflet.geodesic@2.5.1/dist/leaflet.geodesic.umd.min.js.sha256) and is shown in the [build-log](https://travis-ci.org/henrythasler/Leaflet.Geodesic/builds) for a tagged version.
+
 ## Basic usage
 
 - `L.Geodesic` draws geodesic lines between all points of a given line- or multiline-string. 

docs/circle-interactive.html

@@ -53,8 +53,8 @@
 
         var map = L.map('map', {
             maxBounds: [
-                [-90, -180],
-                [90, 180]
+                [-90, -200],
+                [90, 200]
             ],
             center: [50, 0],
             zoom: 4
@@ -90,16 +90,16 @@
 
         // method that we will use to update the control based on feature properties passed
         info.update = function (stats) {
-            const circumfenceString = (stats.totalDistance ? (stats.totalDistance>10000)?(stats.totalDistance/1000).toFixed(0)+' km':(stats.totalDistance).toFixed(0)+' m' : 'invalid')
-            const radiusString = (geodesiccircle.radius ? (geodesiccircle.radius>10000)?(geodesiccircle.radius/1000).toFixed(0)+' km':(geodesiccircle.radius).toFixed(0)+' m' : 'invalid')
-            this._div.innerHTML = '<h4>Statistics</h4><b>Radius</b><br/>' + radiusString + 
-                '<br/><br/><b>Circumfence</b><br/>' + circumfenceString + 
+            const circumfenceString = (stats.totalDistance ? (stats.totalDistance > 10000) ? (stats.totalDistance / 1000).toFixed(0) + ' km' : (stats.totalDistance).toFixed(0) + ' m' : 'invalid')
+            const radiusString = (geodesiccircle.radius ? (geodesiccircle.radius > 10000) ? (geodesiccircle.radius / 1000).toFixed(0) + ' km' : (geodesiccircle.radius).toFixed(0) + ' m' : 'invalid')
+            this._div.innerHTML = '<h4>Statistics</h4><b>Radius</b><br/>' + radiusString +
+                '<br/><br/><b>Circumfence</b><br/>' + circumfenceString +
                 '<br/><br/><b>Vertices</b><br/>' + stats.vertices;
-        };   
+        };
 
         info.update(geodesiccircle.statistics);
 
-        var diff = {lat:0, lng:0};
+        var diff = { lat: 0, lng: 0 };
         A.on('dragstart', function () {
             diff = { lat: A.getLatLng().lat - B.getLatLng().lat, lng: A.getLatLng().lng - B.getLatLng().lng };	// remember difference between A and B
         });
@@ -110,8 +110,9 @@
                 lat: Math.max(-90, Math.min(90, A.getLatLng().lat - diff.lat)),
                 lng: A.getLatLng().lng - diff.lng
             });	// move B parallel to A            
-            geodesiccircle.setLatLng(e.latlng);
-            geodesiccircle.setRadius(geodesiccircle.distanceTo(B.getLatLng()));
+
+            const radius = geodesiccircle.geom.distance(e.latlng, B.getLatLng());
+            geodesiccircle.setLatLng(e.latlng, radius);
             info.update(geodesiccircle.statistics);
         });
         B.on('drag', (e) => {

docs/testing-circle.html

@@ -52,10 +52,10 @@
     <script type="text/javascript">
 
         var map = L.map('map', {
-            // maxBounds: [
-            //     [-90, -180],
-            //     [90, 180]
-            // ],
+            maxBounds: [
+                [-90, -200],
+                [90, 200]
+            ],
             center: [50, 0],
             zoom: 4
         });
@@ -117,13 +117,23 @@
             geodesiccircle.setLatLng(e.latlng, radius);
             info.update(geodesiccircle.statistics);
 
+            // console.log(geodesiccircle.getLatLngs().length);
+
+            geodesiccircle.setStyle({
+                color: (geodesiccircle.getLatLngs().length === 1)?'red':'blue'
+            })
+
             // this is only valid for small radii where the resulting circle is flat compared to the earth surface
             geodesiccircle.setTooltipContent(`Area: ${Math.round(geodesiccircle.radius ** 2 * Math.PI / 1000 ** 2)} km²`);
         });
         B.on('drag', (e) => {
             B.setTooltipContent(`${Math.round(10000 * e.latlng.lat) / 10000} ${Math.round(10000 * e.latlng.lng) / 10000}`);
             geodesiccircle.setRadius(geodesiccircle.distanceTo(e.latlng));
             info.update(geodesiccircle.statistics);
+
+            geodesiccircle.setStyle({
+                color: (geodesiccircle.getLatLngs().length === 1)?'red':'blue'
+            })
 
             // this is only valid for small radii where the resulting circle is flat compared to the earth surface
             geodesiccircle.setTooltipContent(`Area: ${Math.round(geodesiccircle.radius ** 2 * Math.PI / 1000 ** 2)} km²`);

docs/testing.html

@@ -106,7 +106,9 @@
         });
         B.on('drag', (e) => {
             // console.log(`B=${e.latlng}`);
-            B.setTooltipContent(`${Math.round(10000 * e.latlng.lat) / 10000} ${Math.round(10000 * e.latlng.lng) / 10000}`);
+            // B.setTooltipContent(`${Math.round(10000 * e.latlng.lat) / 10000} ${Math.round(10000 * e.latlng.lng) / 10000}`);
+            B.setTooltipContent(`${map.latLngToLayerPoint(e.latlng)}`);
+            
             geodesic.setLatLngs([A.getLatLng(), e.latlng])
             info.update(geodesic.statistics);
         });