DataTables, Highcharts, and Leaflet integration

DataTables, Highcharts, and Leaflet integration

Loren MaxwellLoren Maxwell Posts: 406Questions: 99Answers: 10

I saw this recent article concerning integrating DataTables and Highcharts:
https://webdesign.tutsplus.com/tutorials/data-visualization-with-datatablesjs-and-highchartsjs--cms-29691

I wondered if I could add Leaflet to the mix as well and here's the result I got:
http://ghsfha.org/datatables_highcharts_leaflet.html

This page incorporates:
1) Datatables
2) Highcharts
3) Leaflet

Styling is Bootstrap 4.0.0 Beta 3 and Font Awesome 4.7.0 with some Animate thrown in there.

I've included Allan's experimental DataTables SearchPane and a modified Awesome Markers library to add Font Awesome icons to Leaflet.

I had never even heard of Highcharts before today and I have never used Leaflet before today, so while the page is working I'm certain the code could be improved.

My real question is whether anyone sees an opportunity to improve the code or to even make a package that would integrate these three packages tighter.

I can't help but to wonder if there's not a better way to cycle through the datatable and if what is passed along to Leaflet wouldn't be better as GeoJSON, but I'm not an expert in any of these.

Anyway, any thoughts are welcomed!

Loren

Replies

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    That's a really impressive mash up - nice one! It looks good to me.

    I can't really comment on Leaflet as I've never used it, but I do like Highcharts. I'm sure it would be possible to make a package to integrate the two (or three) together - the trick is making sure it is generic enough to still be useable for the majority of cases. That can only really be answered by scoping what you would want such a package to do.

    Allan

This discussion has been closed.