Элемент управления слоями листовок автоматически управляет z-index слоев, которые вы передаете ему, если вы позволите опции autoZIndex равным true (значение по умолчанию):
Если true, элемент управления назначит zIndexes в порядке возрастания для всех своих слоев, чтобы сохранить порядок при их включении / выключении.
Таким образом, ваши 2 Tile Layers googleearth и googleTerrain имеют z-index из 1 и 2. соответственно.
Теперь у вашего 3-го уровня плиток (OpenTopoMap, тот, который вы пытаетесь управлять извне с помощью своего собственного флажка) есть только z-index1 (значение по умолчанию), поэтому оно будет ниже googleTerrain.
Решение состоит в том, чтобы просто указать высокое значение z-index для вашего 3-го слоя плитки OpenTopoMap.
Вы также можете включить autoZIndex в false, чтобы все ваши слои листов по умолчанию имели значение z-index, равное 1, и в этом случае последний добавленный слой листов отображается сверху.
var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
minZoom: 6,
maxZoom: 17,
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
// Note: replacing the Tile Server to comply with Google Maps Terms.
var googleTerrain = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var map = L.map("mapid", {
zoom: 10,
center: [55.7363, -6.1771],
layers: [googleearth, googleTerrain],
zoomControl: false,
attributionControl: true,
measureControl: true
});
var baseLayers = {
"Aerial Imagery": googleearth,
"googleTerrain": googleTerrain
};
L.control.layers(baseLayers, null, {
collapsed: false,
//autoZIndex: false,
}).addTo(map);
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
zIndex: 100, // Make sure you specify a high enough value.
maxZoom: 17,
visibility: true,
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
$(document).ready(function() {
$("#layercontrol2").change(function() {
if ($(this).prop("checked")) {
OpenTopoMap.addTo(map);
return;
} else {
OpenTopoMap.remove();
return;
}
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style></style>
</head>
<body>
<div id="mapid" style="height: 160px"></div>
<div id="layercontrol">
<input id="layercontrol2" type="checkbox" /> Topo Map
<br />
<!--input id="layercontrol3" type="checkbox" /> Satellite
<br /-->
</div>
</body>
</html>