66 < title > arc.js - Great Circle Routes Demo</ title >
77 < link rel ="stylesheet " href ="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css " integrity ="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY= " crossorigin ="" />
88 < script src ="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js " integrity ="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo= " crossorigin =""> </ script >
9- < script src ="./arc.js "> </ script >
109 < style >
1110 * {
1211 box-sizing : border-box;
@@ -340,8 +339,8 @@ <h3>Settings</h3>
340339 </ div >
341340
342341 < div class ="control-group ">
343- < button class =" btn " onclick =" clearMap() "> Clear All</ button >
344- < button class ="btn btn-danger " onclick =" resetView() "> Reset View</ button >
342+ < button id =" clear " class =" btn "> Clear All</ button >
343+ < button id =" reset " class ="btn btn-danger "> Reset View</ button >
345344 </ div >
346345 </ div >
347346
@@ -357,8 +356,9 @@ <h4>Generated GeoJSON</h4>
357356 </ div >
358357 </ div >
359358 </ div >
360-
361- < script >
359+ < script type ="module ">
360+ import { GreatCircle } from 'https://cdn.skypack.dev/arc@1' ;
361+
362362 // Initialize map
363363 var map = L . map ( 'map' ) . setView ( new L . LatLng ( 0 , 0 ) , 2 ) ;
364364 var idx = 1 ;
@@ -468,7 +468,7 @@ <h4>Generated GeoJSON</h4>
468468 distance : calculateDistance ( from , to )
469469 } ;
470470
471- var greatCircle = new arc . GreatCircle ( from , to , properties ) ;
471+ var greatCircle = new GreatCircle ( from , to , properties ) ;
472472 var gc = greatCircle . Arc ( npoints , { offset : offset } ) ;
473473 var line = new L . geoJson ( ) . addTo ( map ) ;
474474 var geojson_feature = gc . json ( ) ;
@@ -591,7 +591,7 @@ <h4>Generated GeoJSON</h4>
591591 } ;
592592
593593 try {
594- var greatCircle = new arc . GreatCircle ( nyc , london , properties ) ;
594+ var greatCircle = new GreatCircle ( nyc , london , properties ) ;
595595 var gc = greatCircle . Arc ( npoints , { offset : offset } ) ;
596596 var line = new L . geoJson ( ) . addTo ( map ) ;
597597 var geojson_feature = gc . json ( ) ;
@@ -629,6 +629,9 @@ <h4>Generated GeoJSON</h4>
629629
630630 // Initialize JSON output
631631 updateJsonOutput ( ) ;
632+
633+ document . querySelector ( '#clear' ) . addEventListener ( 'click' , clearMap ) ;
634+ document . querySelector ( '#reset' ) . addEventListener ( 'click' , resetView ) ;
632635 </ script >
633636</ body >
634637</ html >
0 commit comments