Does the dashboard support maps components?

[redherring917]

Does the dashboard support maps components that would allow us to embed a map plotting a set of custom points (we'd pull them from our database via a connector)? If so, would anyone be able to provide an example of such an integration?

Thanks!

[andrzej.b]

Hi,

Thank you for contacting us with your issue.

Yes, map components are supported in dashboards, since every type of chart is supported within 'highcharts component', please see a sample demo: https://www.highcharts.com/demo/dashboards/election
You can check the code there via jsfiddle or codepen. And there are more sample dashboards with maps there, maybe another demo would be closer to your needs, so please check them out.

I hope you will find it useful.

Best regards,

[redherring917]

Thanks for your reply. I've take a pretty good look at those examples, and to be honest, there's a lot going on there that's really challenging me here in the early stages of working with Highcharts. What I'm interested in pursuing is a simple map of North America showing pins / markers for a number of locations that I would define via a data connector. If each of those pins / markers could show some specific info on mouseover and be clickable to a specific url, so much the better.

Would anyone be able to point me in the direction of a simple dashboard maps integration like this? The examples previously cited are impressive, but truth be told they're far more complicated than I need at the moment and as such are really stretching the limits of my understanding.

Thanks!

[andrzej.b]

Hi,

You are right, demo samples are rather complex. Thus I have a simplified demo which, I hope, would suit you much better at this stage: https://jsfiddle.net/BlackLabel/06Lt3gaq/

Points are clickable, and as for extra info on hover, there is a separate tooltip configuration for that, you can get more information on how it works and how to customise it further here in the documentation.

Let me know if that is what you were looking for!

Best regards,

[redherring917]

Excellent. Thanks so much for the reply and for the example! Yes, this is indeed much better suited to my needs at this stage

[redherring917]

Hi there. I do have a follow-up question.

In my dashboard implementation I'm giving users the ability to save their customized views by saving the dashboard's getOptions JSON in editMode. The way this is currently structured, that JSON is saving a pretty significant amount of maps related content that isn't "necessary" (since the actual definition of the map isn't customizable and would be called anytime the map is loaded). Any thoughts on how can I save the fact that a user has chosen to include the map on their dashboard (and where in the layout) but not save the maps actual "content" (GeometryCollection etc.)? I suppose it might involve manually stripping this out of the getOptions JSON??

Thanks!

[dawid.d]

Hi, yes, exactly.

If you want to get rid of some options, you can simply remove them before stringifying them. Also, remember that callback function options are removed automatically because they can't be stored as a string. So if you care about them, save them outside the chart and load them together with the options from the saved JSON.

Demo: https://jsfiddle.net/BlackLabel/ky7n4w0z/

Best regards

[redherring917]

Thanks as always for the reply. I do have a follow-up question.

Since components is an array, as per your example I would need to know and specify the array index that holds the map component when deleting it.

const boardOptions = board.getOptions();
const chartOptions = boardOptions.components[0].chartOptions;
delete chartOptions.chart.map;

But (and forgive me if I'm way off base here), since the user can customize their dashboard and add / remove components at will, some of which might be maps - and I suppose I could at least theoretically foresee a scenario where more than one component might be a map - we would need to first search for and find the array index of any / all map components so that we can delete their JSON... right? It seems at very least like we're going to want to create a "custom" component (those that can be added by way of the editMode > Add Component option) version of any / all "default" defined components in the event that a user chooses to delete one of the "default" components only to then want it back. Presumably such a scenario would require us to find the array index holding the custom map component so that we know how to write that delete statement?

Continued thanks!

[dawid.d]

Hi,

It should be enough to filter the components according to whether they are map charts, as in the demo: https://jsfiddle.net/BlackLabel/h0rj1qdw/

Regards!

[redherring917]

Thank you David for your response. Please know that I greatly value and appreciate all of the support that I've received.

With regards to this use case, I have followed your most recent example to successfully remove the "chart.map" object from my boardOptions JSON prior to saving the user's board config. But now I'm afraid that I'm unclear as to how to load that content and therefore show the map when the user with such a saved board config returns to the dashboard. My initial, clearly too ignorant guess was that I could simply retrieve the user's saved board config JSON and replace

"chart": {},

with

"chart": {map: await fetch('https://code.highcharts.com/mapdata/cus ... .topo.json').then(response => response.json()),},

but that doesn't appear to work (for what I'm sure are very obvious reasons to you) - it results in a reported error of "Unexpected identifier 'fetch'". So, on loading a user's saved board config, how should I populate the "chart.map" object that has been stripped from the boardOptions JSON?

Thank you, thank you.

[dawid.d]

Hi,

I'm a bit missing the context of where you're calling fetch, but if you fetch that map data first and save it to a variable, you can then use it when loading data into imported chart options. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/2ve56kLr/

Hope it helps!
Best regards

[redherring917]

Thanks a lot for sticking with me on this one. Unless I'm kidding myself, I do believe I have this working now - stripping out chart.map object contents on a save of the user's board JSON and then using the map data variable that I saved to properly load the map on a refresh of the user's board.

Thanks again!