CODEWITHSUNDEEP
javascriptleafletgeojsonsvgd3.js
Amiri Barksdale
Amiri Barksdale

Reputation: 65

How can I use a leaflet layer control to toggle a d3 svg overlay?

I have 3 d3 svgs I want to put on the same leaflet map. I would like to be able to control them with the same ease as leaflet layers.

Here is code that works, but is janky.

The relevant part is lines 75 to the end, where I create a custom layer control tied specifically to my d3 svg group, instantiate it, and pop it in the overlays hash before 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's got to be a better way to do this. For instance, because this is a hack, the layer control does not know that the layer has already been activated, so the checkbox is unchecked.

Any help would be greatly appreciated!

Upvotes: 4

Views: 1998

Answers (1)

geraldo
geraldo

Reputation: 552

I really would recommend you to have a look at Vector OSM, specially at tilejson.js. There you see a proper implementation which makes layer control work with SVG overlay.

Upvotes: 0

Related Questions