Plotly + Knime + choroplethmap: how to put labels on top of regions?

Question

I'm using Knime on a Mac, using Generic Javascript View. The code that I'm using:

var body = document.getElementsByTagName('body')[0];
var html = '<div id="myDiv">';
body.innerHTML = html;

var stateCoords = { 
    "opolskie": [17.9213, 50.6751],  
    "łódzkie": [19.4560, 51.7594]
};

var states = ["opolskie", "łódzkie"];

var data = [
  {
    type: "choroplethmap", 
    name: "asd", 
    geojson: "https://raw.githubusercontent.com/ppatrzyk/polska-geojson/master/wojewodztwa/wojewodztwa-min.geojson", 
    locations: states,
    z: [141, 140],  
    text: [ "test text1", "test text2" ],  // Labels for hover
    featureidkey: "properties.nazwa",
    colorbar: { title: 'Value' },
    zmin: 25, 
    zmax: 280, 
    colorscale: 'Viridis'
  },
  {
    type: 'scattergeo',
    geo: 'geo',  
    lon: states.map(state => stateCoords[state][1]), 
    lat: states.map(state => stateCoords[state][0]), 
    text: states,
    mode: 'text',
    textfont: {
        size: 14,
        color: 'black',
        weight: 'bold'
    }
  }
];

var layout = {
  map: {
    style: "light", 
    center: {lon: 19, lat: 52}, 
    zoom: 5.6
  },
  width: 1000, 
  height: 700, 
  margin: { t: 0, b: 0 }
};

Plotly.newPlot('myDiv', data, layout);

Which produces this (The label is only visible on hover):

What I'm after looks something like this:

Node configuration in Knime is this:

Clearly I'm not using scattergeo correctly, but it evades me what.

Answer 1

You can use the below code to get a map similar to this.

var body = document.getElementsByTagName('body')[0];
var html = '<div id="myDiv"></div>';
body.innerHTML = html;

var stateCoords = { 
    "opolskie": [17.9213, 50.6751],  
    "łódzkie": [19.4560, 51.7594]
};

var states = ["opolskie", "łódzkie"];

var data = [
  {
    type: "choropleth", 
    geojson: "https://raw.githubusercontent.com/ppatrzyk/polska-geojson/master/wojewodztwa/wojewodztwa-min.geojson", 
    locations: states,
    z: [141, 140],  
    text: ["test text1", "test text2"],  
    featureidkey: "properties.nazwa",  
    colorbar: { title: 'Value' },
    zmin: 25, 
    zmax: 280, 
    colorscale: 'Viridis',
    line: {
      color: 'black',  
      width: 2 
    }
  },
  {
    type: 'scattergeo',
    lon: [17.9213, 19.4560], 
    lat: [50.6751, 51.7594],  
    text: ["Opolskie", "Łódzkie"],  
    mode: 'markers+text', 
    textfont: {
      size: 15,
      color: 'black',
      weight: 'bold'
    }
  }
];

var layout = {
  geo: {
    scope: "europe",  
    projection: { 
      type: "mercator",  
      scale: 8  
    },
    center: { lon: 19, lat: 52 },  
    showcoastlines: false,  
    showland: true,  
    showocean: true,
    showsubunits: true,  
    landcolor: "lightgray",  
    subunitcolor: "black",  
    subunitwidth: 29
  },
  width: 1000, 
  height: 700, 
  margin: { t: 0, b: 0 }
};

Plotly.newPlot('myDiv', data, layout);

I would recommend checking the nodes from Geospatial Analytics Extension for KNIME for processing, analyzing and visualizing Geospatial data.