Last Forest

f2

###### Widget Code
  <div id="treeCoverGainMapId" style="height: 400px; width: 100%">
    <a target="_blank" href="https://bit.ly/2g3UnjN">
        <div class="gfw-link leaflet-control"></div>
    </a>
    <div class="leaflet-bar chk-panel leaflet-bottom leaflet-left ">
        <label class="chk-label leaflet-control "><input type="checkbox" id="chkShowLoss">Показать потери</label>
    </div>
 </div>
 

<script lang="javascript">
    function addControlPlaceholders(map) {
        var corners = map._controlCorners,
            l = 'leaflet-',
            container = map._controlContainer;

        function createCorner(vSide, hSide) {
            var className = l + vSide + ' ' + l + hSide;

            corners[vSide + hSide] = L.DomUtil.create('div', className, container);
        }

        createCorner('verticalcenter', 'left');
        createCorner('verticalcenter', 'right');
        createCorner('upperbottom', 'right');
    }
var baseLayer2 = L.tileLayer('https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', {
		maxZoom: 18
	});

    var treeCoverGainMap = L.map('treeCoverGainMapId', {scrollWheelZoom: false}).setView([41.19, 44.69], 12);
    addControlPlaceholders(treeCoverGainMap);
    treeCoverGainMap.zoomControl.setPosition('verticalcenterleft');
    baseLayer2.addTo(treeCoverGainMap);

    L.mask([[41.12, 44.49], [41.24, 44.85]]).addTo(treeCoverGainMap);

    var gainLayer = L.tileLayer('https://earthengine.google.org/static/hansen_2013/gain_alpha/{z}/{x}/{y}.png', {
		maxZoom: 18,
        attribution: '<a href="http://glad.umd.edu/"> Hansen|UMD|Google|USGS|NASA </a>'
	});
    gainLayer.addTo(treeCoverGainMap);

    $("#chkShowLoss").change(function() {
        if($(this).is(":checked")) {
            loosLayer2 = new L.GFWLayer();
            loosLayer2.addTo(treeCoverGainMap);
        }
        else {
            treeCoverGainMap.removeLayer(loosLayer2);
        }
    });
</script>

gistfile1.txt

###### Widget Code
 <div id="treeCoverLossMapId" style="height: 400px; width: 100%">
    <a target="_blank" href="https://bit.ly/2g3UnjN">
        <div class="gfw-link leaflet-control"></div>
    </a>
 </div>

 <script lang="javascript">
    function addControlPlaceholders(map) {
        var corners = map._controlCorners,
            l = 'leaflet-',
            container = map._controlContainer;

        function createCorner(vSide, hSide) {
            var className = l + vSide + ' ' + l + hSide;

            corners[vSide + hSide] = L.DomUtil.create('div', className, container);
        }

        createCorner('verticalcenter', 'left');
        createCorner('verticalcenter', 'right');
        createCorner('upperbottom', 'right');
    }

    var baseLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
		maxZoom: 18,
		attribution: '',
   		id: 'mapbox.streets'
	});

	var treeCoverLossMap = L.map('treeCoverLossMapId', {scrollWheelZoom: false}).setView([41.19, 44.69], 12);
    addControlPlaceholders(treeCoverLossMap);
    treeCoverLossMap.zoomControl.setPosition('verticalcenterleft');
    baseLayer.addTo(treeCoverLossMap);

    var loosLayer = new L.GFWLayer();
    loosLayer.addTo(treeCoverLossMap);

    L.mask([[41.12, 44.49], [41.24, 44.85]]).addTo(treeCoverLossMap);
 </script>


###### HEAD
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ScanEx/GMXPluginGFW/master/dist/gmxPluginGfw.css"/>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
    <script src="https://rawgit.com/ScanEx/GMXPluginGFW/master/dist/gmxPluginGfw.js" type="text/javascript"></script>
    <script src="https://rawgit.com/turban/Leaflet.Mask/master/L.Mask.js" type="text/javascript"></script>

    <style>
        .gfw-link {
                z-index: 99999;
                right: -30px;
                width: 60px;
                height: 60px;
                background-image: url(http://www.globalforestwatch.org/assets/logo-new-c84df4ee1f85536a7c0b574378f21ab0.png);
                background-size: contain;
        }
        .leaflet-verticalcenter {
            position: absolute;
            top: 47%;
            -webkit-transform: translateY(-50.5%);
                    transform: translateY(-50.5%);
            z-index: 1000;
        }

        .chk-panel {
	        background: #fff;
	        background: rgba(255, 255, 255, 0.7);
	        margin: 5px;
        }

        .chk-label {
            margin: 3px !important;
        }

        #treeCoverLossMapId {
  			height: 100%;
  			width: 100%;
		}

  		#treeCoverGainMapId {
  			height: 100%;
  			width: 100%;
		}
    </style>