Custom icons in plotly panel

Grafana 9.6.3 (we could upgrade if needed)

Using Plotly plugin (nline) to display openstreetmaps tiles and then show objects on the map based on their current location returned by a query. This is set up with “scattermapbox” type and a layout with a style of “white-bg” and then layers with “source” set to the url of a map tile server.

When I add nodes to the plot, the default symbol is a circle.

All of that works but I’d like to add custom symbols instead of the default circle.

I have set the symbol to “url(http:///custom_image.svg)”.
The svg exists on the server (if I paste the url in the browser it shows the image).
I have also enabled CORS on the server url.

However, the icon does not appear in the map and I get the following error when tracing in the browser:

Image “url(http:///custom_image.svg)-15” could not be loaded. Please make sure you have added the image with map.addImage() or a “sprite” property in your style.

EDIT: I can’t even get any of the Maki icons except “circle” to show up on the map

Questions:

  1. How do I apply the map.addImage() or sprite property to the Plotly plugin?
  2. Is this even possible to use custom icons?

do you see any errors in your browser console?

Using Dynamic Text plugin

I get this
image

from

    marker: {
      size: 14,
      symbol: ["zoo"],  --Maki icon
    },

The syntax in the plotjs panel is slightly different, but “zoo” does not display.

"marker": {
      "size": 14,
      "symbol": "circle"
    },

Using “circle” works but replacing it with “zoo” does not work.
There are errors in the browser console but nothing that stands out. Is there some error in particular I should be looking for?

Is this the plugin repo?

https://raw.githubusercontent.com/plotly/plotly.js/master/dist/plot-schema.json

Check the schema out

Thanks!

So the way I read that schema for scattermapbox is that I should be able to select any one of the icons from the url (https://www.mapbox.com/maki-icons) and it should work except that size and color can only be used for “circle”. I’m looking at line 56,525 of the schema.

Icon still does not appear when I remove the “size” property and simply have the marker have only the symbol property.

1 Like

Can you check the img folder of the plugin and see how many icons are there

img folder only has the plotly images (-large and -small)
as seen here: https://github.com/nline/nline-plotlyjs-panel/tree/main/src/img

that one is under traces node. Check out the one on line 3289

Isn’t line 3289 the symbol of “layers” of the “layout”?
The layers for my layout is set up to use open street map tiles (e.g., “source” is a tile server, “sourcetype” is raster)

I’m trying to change the icon of individual objects added to the plot for the scattermapbox type which are part of the “data” array not the layout.

gotcha, please post your js code. I think you answer will be better answered in that plugin repo but we can try to help.

Here’s a “minimal” code example. This code is in the “Script” section of the plotly panel.
The query returns latitude and longitude.

console.log(data)

// Loop over all the entries in query which is node positions.
var nodeArray = [];
if (0 in data.series) 
{
  let nodeCount = data.series[0].length;
  for (let i = 0; i < nodeCount; i++)
  {
    var newNode = {
      "mode": "markers",
      "showlegend": false,
      "type": "scattermapbox",
      "lat":[data.series[0].fields[1].values.get(i)],
      "lon":[data.series[0].fields[2].values.get(i)],
      "marker": {
          "symbol": "circle",
          "size": 24
      }
    }

    nodeArray.push(newNode);
  }
}

customLayout = {
  "dragmode": "zoom",
  "mapbox": {
    "bearing": 0,
    "center": {
      "lat": 42.459332,
      "lon": -97.266983
    },
    "layers": [
      {
        "below": "traces",
        "source": [
          "http://localhost:8000/{z}/{x}/{y}.png"
        ],
        "sourcetype": "raster"
      }
    ],
    "pitch": 0,
    "style": "white-bg",
    "zoom": 8
  },
  "margin": {
    "b": 0,
    "l": 0,
    "r": 0,
    "t": 0
  }
}

return {
	data: nodeArray,
	config: {
		displayModeBar: true,
	},
	layout: customLayout
};
1 Like

check this out. Again this is not grafana issue you should really reach out to the developer of that plugin.

1 Like