传单控制层：选择器

Question

I am displaying two Geojson files on leaflet. The two files are displaying fine on my map but I want to be able to have the selector working on both layers.

As you can see here, my selector only display on province : http://bl.ocks.org/renauld94/8493ca671ce8de63bfab9fafd3f3f574/363f40907203cc431de22e16987669b7bae13fe8

var ward = [];
var wardOverlay = L.d3SvgOverlay(function(sel, proj) {

  var upd = sel.selectAll('path').data(ward);
  upd.enter()
    .append('path')
    .attr('d', proj.pathFromGeojson)
    .attr('stroke', 'red')
    .attr('fill-opacity', '0.2');
  upd.attr('stroke-width', 1 / proj.scale);
});


var province = [];
var provinceOverlay = L.d3SvgOverlay(function(sel, proj) {

  var upd = sel.selectAll('path').data(province);
  upd.enter()
    .append('path')
    .attr('d', proj.pathFromGeojson)
    .attr('stroke', 'black')
    .attr('fill-opacity', '0.1');
  upd.attr('stroke-width', 1 / proj.scale);
}); 

L.control.layers({"Geo Tiles": tiles}, {"province": provinceOverlay}, {"ward": wardOverlay}).addTo(map);



d3.json("ward.geo.json", function(data) { ward = data.features; wardOverlay.addTo(map) });
d3.json("province.geo.json", function(data) { province = data.features; provinceOverlay.addTo(map) });  


</script>

</body>
</html>

How I can have a selector for both layers?

Answer 1

Have a look at the creation of Control.Layers :

L.control.layers(<Object> baselayers?, <Object> overlays?, <Control.Layers options> options?)

Creates an attribution control with the given layers. Base layers will be switched with radio buttons, while overlays will be switched with checkboxes. [...]

It means that the second object contains the entries for each switchable layer. Try:

L.control.layers({"Geo Tiles": tiles}, {
    "province": provinceOverlay, 
    "ward": wardOverlay
}).addTo(map);