Color bar does not get displayed on top of my map (leaflet using d3)
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.
javascript d3.js leaflet
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
add a comment |
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.
javascript d3.js leaflet
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
You writecolor[i], whilecoloris continuous scale. Perhaps, you wanted to writecolor(i).
– Yaroslav Sergienko
Nov 23 '18 at 15:15
Yes there was a typo my actual code iscolor(i)but I wrote the opposite. I updated the question.
– Rekopx
Nov 23 '18 at 15:16
Also, you need to set somewidthandheightofdiv.
– 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. Instead, use arector a legend usingL.Control
– chazsolo
Nov 23 '18 at 15:39
add a comment |
0
0
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.
javascript d3.js leaflet
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
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.
javascript d3.js leaflet
javascript d3.js leaflet
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
edited Nov 23 '18 at 15:15
Rekopx
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
asked Nov 23 '18 at 15:08
RekopxRekopx
741110
741110
You writecolor[i], whilecoloris continuous scale. Perhaps, you wanted to writecolor(i).
– Yaroslav Sergienko
Nov 23 '18 at 15:15
Yes there was a typo my actual code iscolor(i)but I wrote the opposite. I updated the question.
– Rekopx
Nov 23 '18 at 15:16
Also, you need to set somewidthandheightofdiv.
– 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. Instead, use arector a legend usingL.Control
– chazsolo
Nov 23 '18 at 15:39
add a comment |
You writecolor[i], whilecoloris continuous scale. Perhaps, you wanted to writecolor(i).
– Yaroslav Sergienko
Nov 23 '18 at 15:15
Yes there was a typo my actual code iscolor(i)but I wrote the opposite. I updated the question.
– Rekopx
Nov 23 '18 at 15:16
Also, you need to set somewidthandheightofdiv.
– 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. Instead, use arector a legend usingL.Control
– chazsolo
Nov 23 '18 at 15:39
You write
color[i], while color is continuous scale. Perhaps, you wanted to write color(i).– Yaroslav Sergienko
Nov 23 '18 at 15:15
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
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
Also, you need to set some
width and height of div.– Yaroslav Sergienko
Nov 23 '18 at 15:16
2
2
You are trying to append an HTML element inside an SVG which is not possible unless you use foreignObject. Instead, use a
rect or a legend using L.Control– chazsolo
Nov 23 '18 at 15:39
You are trying to append an HTML element inside an SVG which is not possible unless you use foreignObject. Instead, use a
rect or a legend using L.Control– chazsolo
Nov 23 '18 at 15:39
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449043%2fcolor-bar-does-not-get-displayed-on-top-of-my-map-leaflet-using-d3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449043%2fcolor-bar-does-not-get-displayed-on-top-of-my-map-leaflet-using-d3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You write
color[i], whilecoloris continuous scale. Perhaps, you wanted to writecolor(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
widthandheightofdiv.– 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. Instead, use a
rector a legend usingL.Control– chazsolo
Nov 23 '18 at 15:39