<commit_before><!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>MapboxCircle Demo</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet'/>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <script src='dist/mapbox-gl-circle.min.js'></script>
    <script src='https://npmcdn.com/mapbox-gl-circle/dist/mapbox-gl-circle.min.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #menu {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.75);
            padding-left: 5px;
            font-family: 'Open Sans', sans-serif;
            font-size: x-small;
            z-index: 100;
        }

        #menu > label {
            padding-right: 5px;
        }

        #version {
            position: absolute;
            font-family: "Consolas", monospace;
            font-weight: bold;
            font-size: x-small;
            padding-right: 3px;
            top: 0;
            right: 0;
            z-index: 100;
        }

        #info {
            position: absolute;
            font-family: "Consolas", monospace;
            font-size: x-small;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background-color: rgba(255, 255, 255, 0.75);
        }
    </style>
</head>
<body>
<div id='info'>
    <div style="text-align: center;">
        <strong>Tips! Right-click on map to add new circle. Left-click on a circle to remove it.</strong>
    </div>
    <div id="debug"></div>
</div>
<div id='menu'>
    <strong>Map Style:</strong>
    <input id='basic' type='radio' name='styleSwitcher' value='basic'>
    <label for='basic'>basic</label>
    <input id='streets' type='radio' name='styleSwitcher' value='streets' checked='checked'>
    <label for='streets'>streets</label>
    <input id='bright' type='radio' name='styleSwitcher' value='bright'>
    <label for='bright'>bright</label>
    <input id='light' type='radio' name='styleSwitcher' value='light'>
    <label for='light'>light</label>
    <input id='dark' type='radio' name='styleSwitcher' value='dark'>
    <label for='dark'>dark</label>
    <input id='satellite' type='radio' name='styleSwitcher' value='satellite'>
    <label for='satellite'>satellite</label>
    <input id='satellite-streets' type='radio' name='styleSwitcher' value='satellite-streets'>
    <label for='satellite-streets'>satellite-streets</label>
</div>
<div id='version'></div>
<div id='map'></div>
<!--suppress ES6ConvertVarToLetConst, ES6ModulesDependencies -->
<script>
    document.getElementById('version').textContent = 'mapbox-gl-circle-' + MapboxCircle.VERSION;

    // noinspection SpellCheckingInspection
    mapboxgl.accessToken = '<KEY>';

    function boundsTo5percentRadius(bounds) {
        // noinspection JSCheckFunctionSignatures
        // noinspection JSUnresolvedVariable
        return Math.round(
            turf.distance(bounds.getSouthWest().toArray(), bounds.getNorthEast().toArray(), 'meters') * .05);
    }

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [18.059678, 59.322465],
        zoom: 12.305430
    }).addControl(new mapboxgl.ScaleControl({maxWidth: 300}), 'top-right');

    var layerList = document.getElementById('menu');<commit_msg>Version lock turf.js to 4.7.3; breaking changes to turf.distance introduced with 5.x<commit_after><!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>MapboxCircle Demo</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet'/>
    <script src='https://npmcdn.com/@turf/turf@4.7.3/turf.min.js'></script>
    <script src='dist/mapbox-gl-circle.min.js'></script>
    <script src='https://npmcdn.com/mapbox-gl-circle/dist/mapbox-gl-circle.min.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #menu {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.75);
            padding-left: 5px;
            font-family: 'Open Sans', sans-serif;
            font-size: x-small;
            z-index: 100;
        }

        #menu > label {
            padding-right: 5px;
        }

        #version {
            position: absolute;
            font-family: "Consolas", monospace;
            font-weight: bold;
            font-size: x-small;
            padding-right: 3px;
            top: 0;
            right: 0;
            z-index: 100;
        }

        #info {
            position: absolute;
            font-family: "Consolas", monospace;
            font-size: x-small;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background-color: rgba(255, 255, 255, 0.75);
        }
    </style>
</head>
<body>
<div id='info'>
    <div style="text-align: center;">
        <strong>Tips! Right-click on map to add new circle. Left-click on a circle to remove it.</strong>
    </div>
    <div id="debug"></div>
</div>
<div id='menu'>
    <strong>Map Style:</strong>
    <input id='basic' type='radio' name='styleSwitcher' value='basic'>
    <label for='basic'>basic</label>
    <input id='streets' type='radio' name='styleSwitcher' value='streets' checked='checked'>
    <label for='streets'>streets</label>
    <input id='bright' type='radio' name='styleSwitcher' value='bright'>
    <label for='bright'>bright</label>
    <input id='light' type='radio' name='styleSwitcher' value='light'>
    <label for='light'>light</label>
    <input id='dark' type='radio' name='styleSwitcher' value='dark'>
    <label for='dark'>dark</label>
    <input id='satellite' type='radio' name='styleSwitcher' value='satellite'>
    <label for='satellite'>satellite</label>
    <input id='satellite-streets' type='radio' name='styleSwitcher' value='satellite-streets'>
    <label for='satellite-streets'>satellite-streets</label>
</div>
<div id='version'></div>
<div id='map'></div>
<!--suppress ES6ConvertVarToLetConst, ES6ModulesDependencies -->
<script>
    document.getElementById('version').textContent = 'mapbox-gl-circle-' + MapboxCircle.VERSION;

    // noinspection SpellCheckingInspection
    mapboxgl.accessToken = '<KEY>';

    function boundsTo5percentRadius(bounds) {
        // noinspection JSUnresolvedVariable
        // noinspection JSCheckFunctionSignatures
        return Math.round(
            turf.distance(bounds.getSouthWest().toArray(), bounds.getNorthEast().toArray(), 'meters') * .05);
    }

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [18.059678, 59.322465],
        zoom: 12.305430
    }).addControl(new mapboxgl.ScaleControl({maxWidth: 300}), 'top-right');

    var layerList = document.getElementById('menu');
{'fraction_non_alphanumeric': 0.16284616403869087, 'fraction_numerical': 0.02530806943156221, 'mean_word_length': 2.486374133949192, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 125, 'https://': 8, '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': '441036', 'n_tokens_mistral': 2633, 'n_tokens_neox': 2408, 'n_words': 464}