I am looking for a solution to place 3 d3 svgs on a leaflet map and control them as easily as leaflet layers.
Check out this code example, which works but is not ideal.
The key part is from line 75 onwards, where I create a custom layer control linked to my d3 svg group, initialize it, and add it to the overlays before putting it into the map using addTo(map).
var lineLayer = L.Class.extend({
initialize: function () {
return;
},
onAdd: function (map) {
railLineGroup.style("display", "block");
},
onRemove: function (map) {
railLineGroup.style("display", "none");
},
});
var railLineLayer = new lineLayer();
overlays["Rail Lines"] = railLineLayer;
L.control.layers(baseLayers, overlays).addTo(map);
There must be a more efficient way to achieve this. Since it's currently a workaround, the layer control doesn't recognize that the layer is already activated, resulting in an unchecked checkbox.
Any assistance would be greatly appreciated!