<commit_before><!DOCTYPE html>
<html>
<head>
    <title>Draw Great Circle Arcs with Leaflet</title>
    <meta charset="utf-8" />
    
    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->

    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
    
    <script src="./arc.js"></script>

</head>

<body>
    
    <div>Draw Great Circle Arcs with Leaflet 
      <a href="https://github.com/springmeyer/arc.js">source code on github</a>
    </div>
    
    <div id="map" style="width: 600px; height: 400px"></div>

    <script>
        var map = new L.Map('map');
        
        var url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var attribution = 'Map data &copy; 2011 OpenStreetMap contributors';
        var osm = new L.TileLayer(url, {maxZoom: 18, attribution: attribution});
        
        map.setView(new L.LatLng(30, -50), 2).addLayer(osm);
        
        // number of intermediate arc points
        var npoints = 50;
        var coords = [];
        
        map.on('click', onMapClick);

        function draw(coords) {
            var len = coords.length;<commit_msg>add instructions to demo page<commit_after><!DOCTYPE html>
<html>
<head>
    <title>Draw Great Circle Arcs with Leaflet</title>
    <meta charset="utf-8" />
    
    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->

    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
    
    <script src="./arc.js"></script>

</head>

<body>
    
    <div style="padding:20px;">
      <h3>Draw Great Circle Arcs with Leaflet</h3> 
      <p>Single clicks on the map will plot points. Once you have drawn two points a great circle arc (curved path) should automatically be drawn between the first point and the second.</p>
      <p><a href="https://github.com/springmeyer/arc.js">source code on github</a></p>
    
    <div id="map" style="width: 600px; height: 400px"></div>

    </div>

    <script>
        var map = new L.Map('map');
        
        var url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var attribution = 'Map data &copy; 2011 OpenStreetMap contributors';
        var osm = new L.TileLayer(url, {maxZoom: 18, attribution: attribution});
        
        map.setView(new L.LatLng(30, -50), 2).addLayer(osm);
        
        // number of intermediate arc points
        var npoints = 50;
        var coords = [];
        
        map.on('click', onMapClick);

        function draw(coords) {
            var len = coords.length;
{'fraction_non_alphanumeric': 0.16715542521994134, 'fraction_numerical': 0.01686217008797654, 'mean_word_length': 2.4720101781170483, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '700204', 'n_tokens_mistral': 954, 'n_tokens_neox': 882, 'n_words': 218}