0

I am trying to display a color bar (it is a legend for my map layers). I am doing this by combining d3 and leaflet. Here is my current implementation.

var map = L.map('map', {
        center: [19.2436590371, 96.8861699425],
        zoom: 9,
        minZoom: 4,
        maxZoom: 9,
        layers: [osm, lyr1] // These are some generated layers
});

// Add tile layers for my map ....

let svg = d3.select(map.getPanes().overlayPane).append('svg').attr('id', 'svg');
length = 100;
color = d3.scaleLinear().domain([1, length])
        .interpolate(d3.interpolateHcl)
        .range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);

for (var i = 0; i < length; i++) {
  svg.append('div').attr('style', function (d) {
     return 'background-color: ' + color(i);
  });
}

The problem is that nothing get displayed on top of leaflet maps. Has anybody a solution for this ? Thanks for you help.

Rekopx
  • 119
  • 1
  • 1
  • 11
  • You write `color[i]`, while `color` is continuous scale. Perhaps, you wanted to write `color(i)`. – Yaroslav Sergienko Nov 23 '18 at 15:15
  • Yes there was a typo my actual code is `color(i)` but I wrote the opposite. I updated the question. – Rekopx Nov 23 '18 at 15:16
  • Also, you need to set some `width` and `height` of `div`. – Yaroslav Sergienko Nov 23 '18 at 15:16
  • 2
    You are trying to append an HTML element inside an SVG [which is not possible unless you use foreignObject](https://stackoverflow.com/questions/17595813/is-it-possible-to-append-a-div-inside-an-svg-element). Instead, use a `rect` or a legend using [`L.Control`](https://leafletjs.com/reference-1.3.4.html#control) – chazsolo Nov 23 '18 at 15:39

0 Answers0