1

The Planetary JS Earth plugin takes a config object that can define fill and stroke colors for oceans, land, and border. Unfortunately, the docs don’t give any information about can be passed into the configs for each of these. I’d like to control the stroke width of the borders, something like this:

const lightGray = 'rgb(222,224,223)';
const lightBlue = 'rgb(160,205,226)';
const blue = 'rgb(144,182,203)';
planet.loadPlugin(
  planetary.plugins.earth({
    topojson: {world: topojson},
    oceans: {fill: lightBlue},

    /* strokeWidth is ignored: */
    borders: {stroke: blue, strokeWidth: '5px'},

    land: {fill: lightGray, stroke: blue},
  })
);

Is there a way to do this?

keithjgrant
  • 12,421
  • 6
  • 54
  • 88
  • It's `stroke-width`, with hyphen and lowercase w. – Gerardo Furtado Apr 19 '17 at 14:13
  • @GerardoFurtado I tried that (`borders: {stroke: blue, 'stroke-width': '5px'}`) but it didn't work either. Both with and without the `px` units. – keithjgrant Apr 19 '17 at 14:19
  • I just read the docs and they don't use the regular CSS nomenclature, so it could be in fact `strokeWidth`. However, there is no `strokeWidth` in the docs... why don't you simply set a class and use the CSS (which is `stroke-width`) for styling this? – Gerardo Furtado Apr 19 '17 at 14:25
  • @GerardoFurtado It paints into a , so I can’t target painted items with CSS, as they have no DOM element. – keithjgrant Apr 19 '17 at 14:27
  • 1
    Oh, I see. Indeed, you can't set CSS styles in a canvas. A last question: did you try `lineWidth`? – Gerardo Furtado Apr 19 '17 at 14:55
  • 1
    Hey, it works! `lineWidth` and a value with no units (`lineWidth: '5'`). Thanks. Throw that in an Answer and I'll accept it – keithjgrant Apr 19 '17 at 15:04

1 Answers1

0

According to the documentation, it has to be lineWidth, and the value has to be a number, with no units.

Here is an example:

planetaryjs.plugins.borders({
    stroke: '#008000', lineWidth: 0.25
});
Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171