<commit_before><!--To modify the default number of maps, simply change the value for the <input id="numOfMaps".-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>MultMaps</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- REFERENCE STYLES/////////////////////////////////////////////////////////////////////////////////// -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <!-- MapBox -->
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
    <!-- Marker Cluster - LOCAL -->
    <link rel="stylesheet" type="text/css" href="./markerCluster/MarkerCluster.Default.css">
    <!-- Esri Leaflet Geocoder -->
    <link rel="stylesheet" type="text/css" href="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
    <!-- custom -->
    <!--<link rel="stylesheet" href="/css/style.css">-->
</head>
<style>
body {
    margin: 10px
}
.mapClass {
    margin: 10px;
    height: 400px;
}
</style>

<body>
    This sample demonstrates how to add multiple maps with linked extents. The application can be easily modified to increase or decrease the number of maps displayed in the browser.
    </hr>
    <br /><b>Connect maps</b>
    <input type='checkbox' class='list_item' id='ToggleBox' value=0 checked=true />
    </br>
    <b>How many maps would you like?</b>
    <input type="number" id="numOfMaps" value=6 max="9" step="1" onkeypress="return enterPress(event)" length=2>
    <input id="executeButton" type="button" value="Go!" onclick="updateMaps()" />
    </form>
    </br>
    <span id="mapSpan">
    </span>
    <!-- REFERENCE SCRIPTS/////////////////////////////////////////////////////////////////////////////////// -->
    <!-- Leaflet -->
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <!-- MapBox -->
    <script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
    <!-- Esri Leaflet -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.4/esri-leaflet.js"></script>
    <!-- Stamen -->
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
    <!-- markerCluster - LOCAL -->
    <script src="./markerCluster/leaflet.markercluster.js"></script>
    <!-- Load Clustered Feature Layer from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clustered-feature-layer.js"></script>
    <!-- Load Geocoder -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>
    <!-- Include heat map - LOCAL -->
    <script src="./heat/leaflet-heat.js"></script>
    <!-- Load Heatmap Feature Layer from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-heatmap-feature-layer/1.0.0-rc.1/esri-leaflet-heatmap-feature-layer.js"></script>


    <script>
    var mapCount = document.getElementById("numOfMaps").value;
    var mapArray = [];
    var lastMap = 0;
    var updated = false;

    //add a toggle to disconnect/connect the map extents
    var mapToggle = document.getElementById("ToggleBox");
    mapToggle.addEventListener('change', onMapMove);

    window.onload = function() {
            //create the initial divs based on the input div id=numOfMaps
            updateMaps();
            //create the maps and add their layers
            createMaps();
            //start the maps as connected
            onMapMove();
        }
        //create the initial divs based on the input div id=numOfMaps
    updateMaps();
    //create the maps and add their layers
    createMaps();
    //start the maps as connected
    onMapMove();


    //################################################################################################################################
    //################################################################################################################################

    //if enter key is pressed, update maps
    function enterPress(e) {
        e = e || event;
        var keycode = e.keyCode
        if (keycode === 13) {
            console.log("enter");
            updateMaps();
        }
    }

    //update maps from input
    function updateMaps() {
        console.log("update");
        mapCount = document.getElementById("numOfMaps").value;
        //limit the number of maps to 9
        if (mapCount > 10 || mapCount.length > 1) {
            alert("Please choose an integer less than 10.");
        } else {
            var parent = document.getElementById("mapSpan");
            while (parent.firstChild) {
                parent.removeChild(parent.firstChild);
            }
            var spanInnerHtml;
            var mapDivA;
            var mapDivB;
            var j = 0;
            for (var i = 0; i < mapCount; i++) {
                var spanRow = document.createElement("span");
                spanRow.id = "row" + j;
                spanRow.class = "row-fluid";
                var mapHtml = "<div class=\"col-md-4 col-sm-6 height-css\"><div id=\"map" + i + "\"  class=\"mapClass\"></div></div>";
                spanRow.innerHTML = mapHtml;
                parent.appendChild(spanRow);
                j = j + 1;
            }
            createMaps();
            onMapMove();
        }
    }

    //################################################################################################################################
    //################################################################################################################################

    function onMapMove() {
        //when reconnecting the maps, set extents to last modified map
        if (mapToggle.checked == true) {
            for (var i = 0; i < mapCount; i++) {
                mapArray[i].on('moveend', onMapMove);
                var mapNum = lastMap;
                //console.log(lastMap);
                var newZoom = mapArray[mapNum].getZoom();
                var newCenter = mapArray[mapNum].getCenter();

                //prevent other maps from changing the extent of active map
                for (var i = 0; i < mapCount; i++) {
                    // console.log(i);
                    mapArray[i].off('moveend', onMapMove);
                    mapArray[i].setView(newCenter, newZoom);
                }
            }
            //turn mapMove listeners back on
            for (var i = 0; i < mapCount; i++) {
                mapArray[i].on('moveend', onMapMove);
            }
        }
        //disconnect the maps
        else {
            for (var i = 0; i < mapCount; i++) {
                mapArray[i].off('moveend', onMapMove);
            }
        }
        console.log(mapToggle.checked);
    }

    //################################################################################################################################
    //################################################################################################################################

    function createMaps() {
        console.log(">>>> create maps");
        for (var i = 0; i < mapCount; i++) {
            mapArray[i] = L.map('map' + i).setView([42.3314, -83.0458], 8);
            ///////////////////////////////////////////////////////////////////////////////////////////////////

            if (i == 0) {
                L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
                    accessToken:'<KEY>'
                }).addTo(mapArray[i]);

                //Add geocoder to map
                var searchMap = mapArray[i];
                var searchControl = new L.esri.Controls.Geosearch({
                    zoomToResult: true
                }).addTo(mapArray[i]);
                var results = new L.LayerGroup().addTo(mapArray[i]);

                searchControl.on('results', function(data) {
                    results.clearLayers();
                    results.addLayer(L.marker(data.results[0].latlng));
                    searchMap.fitBounds(data.results[0].bounds);
                });

            } ///////////////////////////////////////////////////////////////////////////////////////////////////
            else if (i == 1) {
                mapArray[i].addLayer(new L.StamenTileLayer("watercolor", {
                    detectRetina: true<commit_msg>Switch to map box tilelayer<commit_after><!--To modify the default number of maps, simply change the value for the <input id="numOfMaps".-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>MultMaps</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- REFERENCE STYLES/////////////////////////////////////////////////////////////////////////////////// -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <!-- MapBox -->
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
    <!-- Marker Cluster - LOCAL -->
    <link rel="stylesheet" type="text/css" href="./markerCluster/MarkerCluster.Default.css">
    <!-- Esri Leaflet Geocoder -->
    <link rel="stylesheet" type="text/css" href="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
    <!-- custom -->
    <!--<link rel="stylesheet" href="/css/style.css">-->
</head>
<style>
body {
    margin: 10px
}
.mapClass {
    margin: 10px;
    height: 400px;
}
</style>

<body>
    This sample demonstrates how to add multiple maps with linked extents. The application can be easily modified to increase or decrease the number of maps displayed in the browser.
    </hr>
    <br /><b>Connect maps</b>
    <input type='checkbox' class='list_item' id='ToggleBox' value=0 checked=true />
    </br>
    <b>How many maps would you like?</b>
    <input type="number" id="numOfMaps" value=6 max="9" step="1" onkeypress="return enterPress(event)" length=2>
    <input id="executeButton" type="button" value="Go!" onclick="updateMaps()" />
    </form>
    </br>
    <span id="mapSpan">
    </span>
    <!-- REFERENCE SCRIPTS/////////////////////////////////////////////////////////////////////////////////// -->
    <!-- Leaflet -->
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <!-- MapBox -->
    <script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
    <!-- Esri Leaflet -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.4/esri-leaflet.js"></script>
    <!-- Stamen -->
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
    <!-- markerCluster - LOCAL -->
    <script src="./markerCluster/leaflet.markercluster.js"></script>
    <!-- Load Clustered Feature Layer from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clustered-feature-layer.js"></script>
    <!-- Load Geocoder -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>
    <!-- Include heat map - LOCAL -->
    <script src="./heat/leaflet-heat.js"></script>
    <!-- Load Heatmap Feature Layer from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-heatmap-feature-layer/1.0.0-rc.1/esri-leaflet-heatmap-feature-layer.js"></script>


    <script>
    var mapCount = document.getElementById("numOfMaps").value;
    var mapArray = [];
    var lastMap = 0;
    var updated = false;

    //add a toggle to disconnect/connect the map extents
    var mapToggle = document.getElementById("ToggleBox");
    mapToggle.addEventListener('change', onMapMove);

    window.onload = function() {
            //create the initial divs based on the input div id=numOfMaps
            updateMaps();
            //create the maps and add their layers
            createMaps();
            //start the maps as connected
            onMapMove();
        }
        //create the initial divs based on the input div id=numOfMaps
    updateMaps();
    //create the maps and add their layers
    createMaps();
    //start the maps as connected
    onMapMove();


    //################################################################################################################################
    //################################################################################################################################

    //if enter key is pressed, update maps
    function enterPress(e) {
        e = e || event;
        var keycode = e.keyCode
        if (keycode === 13) {
            console.log("enter");
            updateMaps();
        }
    }

    //update maps from input
    function updateMaps() {
        console.log("update");
        mapCount = document.getElementById("numOfMaps").value;
        //limit the number of maps to 9
        if (mapCount > 10 || mapCount.length > 1) {
            alert("Please choose an integer less than 10.");
        } else {
            var parent = document.getElementById("mapSpan");
            while (parent.firstChild) {
                parent.removeChild(parent.firstChild);
            }
            var spanInnerHtml;
            var mapDivA;
            var mapDivB;
            var j = 0;
            for (var i = 0; i < mapCount; i++) {
                var spanRow = document.createElement("span");
                spanRow.id = "row" + j;
                spanRow.class = "row-fluid";
                var mapHtml = "<div class=\"col-md-4 col-sm-6 height-css\"><div id=\"map" + i + "\"  class=\"mapClass\"></div></div>";
                spanRow.innerHTML = mapHtml;
                parent.appendChild(spanRow);
                j = j + 1;
            }
            createMaps();
            onMapMove();
        }
    }

    //################################################################################################################################
    //################################################################################################################################

    function onMapMove() {
        //when reconnecting the maps, set extents to last modified map
        if (mapToggle.checked == true) {
            for (var i = 0; i < mapCount; i++) {
                mapArray[i].on('moveend', onMapMove);
                var mapNum = lastMap;
                //console.log(lastMap);
                var newZoom = mapArray[mapNum].getZoom();
                var newCenter = mapArray[mapNum].getCenter();

                //prevent other maps from changing the extent of active map
                for (var i = 0; i < mapCount; i++) {
                    // console.log(i);
                    mapArray[i].off('moveend', onMapMove);
                    mapArray[i].setView(newCenter, newZoom);
                }
            }
            //turn mapMove listeners back on
            for (var i = 0; i < mapCount; i++) {
                mapArray[i].on('moveend', onMapMove);
            }
        }
        //disconnect the maps
        else {
            for (var i = 0; i < mapCount; i++) {
                mapArray[i].off('moveend', onMapMove);
            }
        }
        console.log(mapToggle.checked);
    }

    //################################################################################################################################
    //################################################################################################################################

    function createMaps() {
        console.log(">>>> create maps");
        for (var i = 0; i < mapCount; i++) {
            mapArray[i] = L.map('map' + i).setView([42.3314, -83.0458], 8);
            ///////////////////////////////////////////////////////////////////////////////////////////////////

            if (i == 0) {
                L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=<KEY>', {
                }).addTo(mapArray[i]);

                //Add geocoder to map
                var searchMap = mapArray[i];
                var searchControl = new L.esri.Controls.Geosearch({
                    zoomToResult: true
                }).addTo(mapArray[i]);
                var results = new L.LayerGroup().addTo(mapArray[i]);

                searchControl.on('results', function(data) {
                    results.clearLayers();
                    results.addLayer(L.marker(data.results[0].latlng));
                    searchMap.fitBounds(data.results[0].bounds);
                });

            } ///////////////////////////////////////////////////////////////////////////////////////////////////
            else if (i == 1) {
                mapArray[i].addLayer(new L.StamenTileLayer("watercolor", {
                    detectRetina: true
{'fraction_non_alphanumeric': 0.2673963133640553, 'fraction_numerical': 0.010887096774193548, 'mean_word_length': 1.9520489712633906, 'pattern_counts': {'":': 0, '<': 167, '<?xml version=': 0, '>': 165, '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': '3134752', 'n_tokens_mistral': 4938, 'n_tokens_neox': 4662, 'n_words': 994}