Fragger · johnd0e · Jul 17, 2013 · Jul 31, 2013 · Aug 2, 2013 · Aug 2, 2013
diff --git a/.gitmodules b/.gitmodules
diff --git a/README.md b/README.md
@@ -1,14 +1,44 @@
-[Leaflet.Geodesic](http://fragger.github.io/Leaflet.Geodesic/)
+[Leaflet.Geodesic][example]
 ================
 
-### Description
-Geodesic polylines and polygons for [Leaflet](https://github.com/Leaflet/Leaflet)
-
-Adds:
-```
-L.GeodesicPolyline( <LatLng[]> latlngs, <Polyline options> options? )
-L.GeodesicPolygon( <LatLng[]> latlngs, <Polyline options> options? )
-L.GeodesicMultiPolyline( <LatLng[][]> latlngs, <Polyline options> options? )
-L.GeodesicMultiPolygon( <LatLng[][]> latlngs, <Polyline options> options? )
-```
-These will follow the curvature of the Earth and are used just like the normal versions of the constructors that are rendered as straight lines on the screen
+Geodesic polylines, polygons and circles for [Leaflet](https://github.com/Leaflet/Leaflet) 1.x.
+
+These will follow the curvature of the Earth and are used just like the normal versions of the constructors that are rendered as straight lines on the screen.
+
+[example]: https://raw.githack.com/IITC-CE/Leaflet.Geodesic/master/examples/index.html
+
+
+`L.GeodesicPolyline`
+------------------
+
+**L.geodesicPolyline**(<LatLng[]> _latlngs_, <[Polyline options]> _options?_)
+
+- [Example]
+
+[Polyline options]: https://leafletjs.com/reference-1.5.0.html#polyline-option
+
+
+`L.GeodesicPolygon`
+------------------
+
+**L.geodesicPolygon**(<LatLng[]> _latlngs_, <[Polyline options]> _options?_)
+
+
+`L.GeodesicCircle`
+------------------
+
+**L.geodesicCircle**(<[LatLng]> _latlng_, <[Circle options]> _options?_)
+
+- [Example][example-circle]
+
+[example-circle]: https://raw.githack.com/IITC-CE/Leaflet.Geodesic/master/examples/circle.html
+
+<details><summary>
+(obsolete way)
+</summary>
+
+**L.geodesicCircle**(<[LatLng]> _latlng_, <Number> _radius_, <[Circle options]> _options?_)
+</details>
+
+[LatLng]: https://leafletjs.com/reference-1.5.0.html#latlng
+[Circle options]: https://leafletjs.com/reference-1.5.0.html#circle-option
diff --git a/examples/circle.html b/examples/circle.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Leaflet.Geodesic example</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
+    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
+    <script src="../src/L.Geodesic.js" ></script>
+    <style>
+      html, body {
+        height: 100%;
+        margin: 0;
+      }
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script>
+      var map = L.map('map').setView([0, 0], 1);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors, CC-BY-SA',
+        maxZoom: 18
+      }).addTo(map);
+
+      var center = [75,0];
+      var point = [62,0]
+      var radius = map.distance(center,point);
+      var geodesiccircle = L.geodesicCircle(center, {radius: radius, color: 'red'}).addTo(map);
+      var circle = L.circle(center, {radius: radius, color: 'blue'}).addTo(map);
+
+      var pointMark = L.marker(point, {draggable: true}).addTo(map).on('drag',function () {
+        point = pointMark.getLatLng();
+        radius = map.distance(center,point);
+        circle.setRadius(radius);
+        geodesiccircle.setRadius(radius);
+      });
+      var centerMark = L.marker(center, {draggable: true}).addTo(map).on('drag',function () {
+        center = centerMark.getLatLng();
+        circle.setLatLng(center);
+        geodesiccircle.setLatLng(center);
+        var bounds = circle.getBounds();
+        pointMark.setLatLng([bounds.getSouth(), center.lng]);
+      });
+     </script>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -1,22 +1,31 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>Leaflet.Geodesic example</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="lib/Leaflet/dist/leaflet.css" />
-    <!--[if lte IE 8]>
-        <link rel="stylesheet" href="lib/Leaflet/dist/leaflet.ie.css" />
-    <![endif]-->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
+    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
+    <script src="../src/L.Geodesic.js" ></script>
+    <style>
+      html, body {
+        height: 100%;
+        margin: 0;
+      }
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <div id="map"></div>
-    <script src="lib/Leaflet/dist/leaflet.js"></script>
-    <script src="../src/L.Geodesic.js" ></script>
-    <script src="lib/leaflet-tilejson/src/tilejson.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-    <script src="osm.tilejson.js"></script>
     <script>
-      var map = L.TileJSON.createMap('map', osmTileJSON);
+      var map = L.map('map').setView([11.9, 57.7], 8);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors, CC-BY-SA',
+        maxZoom: 18
+      }).addTo(map);
+
       var latlngs = [[40.71435280, -74.0059731],[48.8566140, 2.35222190]]
 
       var mark1 = L.marker(latlngs[0], {draggable: true}).addTo(map).on('drag', update);
@@ -37,4 +46,4 @@
       }
     </script>
   </body>
-</html>
+</html>
diff --git a/examples/lib/Leaflet b/examples/lib/Leaflet
diff --git a/examples/lib/leaflet-tilejson b/examples/lib/leaflet-tilejson
diff --git a/examples/osm.tilejson.js b/examples/osm.tilejson.js
diff --git a/examples/style.css b/examples/style.css