デフォルトのリーフレットコントロールを個々のボタンのセットに置き換える方法

Question

マップに3つの基本レイヤーとマーカーを持つ3つのレイヤーがあります。今では、私はスタンドアラムリーフレットコントロールを使ってそれらの間を切り替えています。マップの下にある各レイヤーの個々のボタンのセットに置き換える必要があります。

誰かがカスタムボタンのセットにデフォルトのリーフレットの制御に

L.control.layers(baseLayers, overlays).addTo(map); 

を交換する方法を教えてもらえます：下の写真のようにそれはすべきに見えますか？ 私のフィドルです：http://jsfiddle.net/anton9ov/eu1840f1/

また、私は左上のセレクターに初期値を追加する必要があります。 JSONの最初の価値は今そこに来ていますが、私はそれを«場所を選択»のようなものに置き換える必要があります。

Answer 1

モックアップのように中央のコントロールを作成するには、@ghybsが前の質問に投稿したthis solutionを修正することができます。基本的に、あなたはマップペイン内のコントロールを中央にCSSクラスを作成します。

.leaflet-horizontalcenter { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    padding-top: 10px; 
} 

.leaflet-horizontalcenter .leaflet-control { 
    margin-bottom: 10px; 
} 

、マップコンテナに取り付けたそのクラスに新しいプレースホルダを作成します。

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('horizontalcenter', 'bottom'); 
} 
addControlPlaceholders(map); 

あなたが好きな任意の方法を使用することができますthis codepen exampleは、ラジオボタンを長方形のボックスとしてスタイルするのに合理的に簡単な方法を示しています。これらのボタンでカスタムコントロールを作成すると、次のように行くだろう：

var buttonBar = L.control({ 
    position: 'horizontalcenterbottom' 
}); 

buttonBar.onAdd = function(map) { 
    //create div container for control 
    var div = L.DomUtil.create('div', 'myButtonBar'); 
    //prevent mouse events from propagating through to the map 
    L.DomEvent.disableClickPropagation(div); 
    //create custom radio buttons 
    div.innerHTML = '<div class="switch-field noselect"><div class="switch-title">MAPS</div>' 
    + '<input type="radio" id="switch_map1" name="map_switch" checked/>' 
    + '<label for="switch_map1">Map 1</label>' 
    + '<input type="radio" id="switch_map2" name="map_switch" />' 
    + '<label for="switch_map2">Map 2</label>' 
    + '<input type="radio" id="switch_map3" name="map_switch" />' 
    + '<label for="switch_map3">Map 3</label></div>' 
    + '<div class="switch-field noselect">' 
    + '<input type="radio" id="switch_marker1" name="marker_switch" checked/>' 
    + '<label for="switch_marker1">Marker 1</label>' 
    + '<input type="radio" id="switch_marker2" name="marker_switch" />' 
    + '<label for="switch_marker2">Marker 2</label>' 
    + '<input type="radio" id="switch_marker3" name="marker_switch" />' 
    + '<label for="switch_marker3">Marker 3</label>' 
    + '<div class="switch-title">MARKERS</div></div>'; 
    return div; 
}; 

buttonBar.addTo(map); 

これは、手動でボタン名などを入力する必要があるため、少し不便標準層制御よりもですが、もう少し作業で、既に作成したbaseLayersとoverlaysオブジェクトからプログラムで行うことができます。変化に層を得るために、最後に

.myButtonBar { 
    background: white; 
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.25); 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    text-align: center; 
    padding: 0px 10px; 
    position: relative; 
} 

：あなたが視覚的にマップからそれを隔離するためのボタンの周りにボックスを作成したい場合は、コントロールのために作成さのdivのスタイルを次のようにいくつかのCSSを追加することができますボタンをクリックすると、いくつかのイベントリスナをアタッチします。あなたは既にjQueryのを使用しているので、私たちはそれを使用します：

switchLayerはそのキーに基づいて baseLayersまたは overlaysオブジェクトからレイヤを取得する機能であり、その後、マップに追加し、削除し

$("#switch_map1").click(function() { 
    switchLayer(baseLayers, "Map 1"); 
}); 
$("#switch_map2").click(function() { 
    switchLayer(baseLayers, "Map 2"); 
}); 
$("#switch_map3").click(function() { 
    switchLayer(baseLayers, "Map 3"); 
}); 
$("#switch_marker1").click(function() { 
    switchLayer(overlays, "Marker 1"); 
}); 
$("#switch_marker2").click(function() { 
    switchLayer(overlays, "Marker 2"); 
}); 
$("#switch_marker3").click(function() { 
    switchLayer(overlays, "Marker 3"); 
}); 

をその他：ここに

function switchLayer(collection, layerKey) { 
    if (layerKey in collection) { 
    $.each(collection, function(key, layer) { 
     if (key === layerKey) { 
     if (!map.hasLayer(layer)) { 
      map.addLayer(layer); 
     } 
     } else if (map.hasLayer(layer)) { 
     map.removeLayer(layer); 
     } 
    }); 
    } else { 
    console.log('There is no layer key by the name "' + layerKey + '" in the specified object.'); 
    } 
} 

はフィドルで一緒に働くすべてのこのです：

http://jsfiddle.net/nathansnider/j0abypqf/