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

**URL:** <https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219>\
**Category:** Kibana\
**Tags:** maps, kibana-plugin-development\
**Created:** [April 3, 2023, 1:29pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219 "2023-04-03T13:29:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lilia](https://avatars.discourse-cdn.com/v4/letter/l/2bfe46/32.png) [@Lilia](https://discuss.elastic.co/u/Lilia)\
**Post date:** [April 3, 2023, 1:29pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219/1 "2023-04-03T13:29:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [April 3, 2023, 9:15pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219/2 "2023-04-03T21:15:22Z")

</div>

The source for [Kibana maps plugin](https://www.elastic.co/guide/en/kibana/8.6/maps.html) can be found at [kibana/x-pack/plugins/maps at main · elastic/kibana · GitHub](https://github.com/elastic/kibana/tree/main/x-pack/plugins/maps). This plugin use [maplibre-gl.js](https://github.com/maplibre/maplibre-gl-js) for map rendering.

You can also [create custom maps with vega](https://www.elastic.co/guide/en/kibana/8.6/vega.html#vega-with-a-map)

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

---

<div class="post-metadata">

**Author:** ![Lilia](https://avatars.discourse-cdn.com/v4/letter/l/2bfe46/32.png) [@Lilia](https://discuss.elastic.co/u/Lilia)\
**Post date:** [April 4, 2023, 4:05am UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219/3 "2023-04-04T04:05:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)\
**Post date:** [April 4, 2023, 11:53am UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219/4 "2023-04-04T11:53:18Z")

</div>

> [@Lilia](#):
>
> I will check the repo!

Apart from Nathan's references you may also want to take a look at [this Maps custom source example code](https://github.com/elastic/kibana/tree/main/x-pack/examples/third_party_maps_source_example).

> [@Lilia](#):
>
> Can you please tell me, why was desided not to use react-leaflet and leaflet for the development of Kibana maps plugin?

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.

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [April 4, 2023, 1:20pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219/5 "2023-04-04T13:20:58Z")

</div>

> [@Lilia](#):
>
> Can you please tell me, why was desided not to use react-leaflet and leaflet for the development of Kibana maps plugin?

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 2, 2023, 1:21pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-how-to-implement-a-react-leaflet-and-leaflet-libs/329219/6 "2023-05-02T13:21:33Z")

</div>

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