Kibana custom plugin, how to implement a react-leaflet and leaflet libs?

Elastic Stack Kibana
,
1

Hi all,

Could you please tell me if anyone of you have successfully implement leaflet lib and react-leaflet to kibana custom plugin? Also I'm not able to find good explanation on how to implement map in custom plugin? Which kibana plugin is usually used to implement maps, does anyone have a good example i can check and study through?

Thank you all!

2

The source for Kibana maps plugin can be found at kibana/x-pack/plugins/maps at main · elastic/kibana · GitHub. This plugin use maplibre-gl.js for map rendering.

You can also create custom maps with vega

Any reason why you want a custom maps plugin instead of the provided maps plugin?

3

Thank you, Nathan!
I will try it today and see how will handle it. No actual reason to implement custom map, just I'm new in kibana and wanted to do it the hard way first to check how and with what it works, then to do it with the Kibana map plugin, also it was hard for me to find the documentation about development with kibana map plugin. I will check the repo!
Can you please tell me, why was desided not to use react-leaflet and leaflet for the development of Kibana maps plugin?

4

Apart from Nathan's references you may also want to take a look at this Maps custom source example code.

The Kibana Maps plugin leverages Maplibre for vector rendering. Leaflet is better suited for rendering raster images (WMS, raster tiles, etc.) while Mapbox GL (now Maplibre) is a better framework for rendering vector data; not only basemaps but also data coming from Elasticsearch, specially now that it supports vector tiles.

5

To add to @jsanz's answer, maplibre.js renders with webgl, which allows for displaying more points and polygons on screen with smoother zooming and scrolling.

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.