Use maps inside plugin

[Sheereen (Sheereen Hamza)]

Hi,

I am creating an external custom plugin inside Kibana 8.8.1 using React.

I want to have a map visualization inside the plugin. I was referring to the example process https://github.com/elastic/kibana/tree/main/x-pack/examples/third_party_maps_source_example.

But here, the code just navigates to Analytics>Maps.

How can I have the map visualization alone inside the plugin. Meaning I do not want the user to create the map, rather, given the inputs, a map should be created. Just like creating charts using Elastic Charts (Storybook).

Thanks

[Nathan_Reese]

Embeddables are re-usable widgets that can be rendered on dashboard, but also in other apps. Developers can embed them directly in their plugin. For more information, see embeddable README. You can also run example plugins by starting kibana with run-examples flag yarn start --run-examples. Then checkout "Embedded Lens" and "Embeddables" examples. Here is an example of where ml uses map embeddable to render a map

[Sheereen (Sheereen Hamza)]

Hi,

Thanks for the reply

The data that I want to show is stored in my local database. Can use the same when creating maps as embeddable?

And how do I convert the location property to geo_point? In Kibana Maps, I found that the location field should be of the type geo_point.

Thanks

[Nathan_Reese]

you will have to index your location field as geo_point . Or you could create a geo point runtime field.

[Sheereen (Sheereen Hamza)]

Hi,

The data is not in elasticsearch and I donot plan to bring it jn ES either... it is in local sequel DB.

When data is in ES, I tried with geo_point and it works perfectly.

But what about when the data is in another DB. How do I create a geo_point field with the latitude and longitude values?

Thanks

[Nathan_Reese]

you would have to create a custom map source to fetch data from your local sequel DB.

[Sheereen (Sheereen Hamza)]

Hi,

Thanks for the response

I was able to have the maps inside my custom plugin using maps-embeddable, as you had suggested. I created a dummy index in ES with geo-point field for location, and was able to locate the same on maps.

Now, to get the data from custom source, I was looking into the classes folder of maps-plugin and found the following types of sources (inside maps/public/classes/sources):

1. ems_file_source
2. ems_tms_source
3. es_agg_source
4. es_geo_grid_source
5. es_geo_line_source
6. es_pew_pew_source
7. es_search_source
8. es_source
9. es_term_source
10. geojson_file_source
11. kibana_tilemap_source
12. mvt_single_layer_vector_source
13. raster_source
14. table_source
15. term_join_source
16. tms_source
17. vector_source
18. wms_source
19. xyz_tms_source

So I believe, according to what you said, I have to create a source myself (which will fetch the data from provided db). If that's the case. do you have any references or examples on how to do the same?

Thanks

[nickpeihl]

Hi Sheereen. The Third Party Maps Source example is the best example to use. Please note that any sources are limited to the client (browser). So your local database will also likely need to serve a backend API that the Maps source connects to via the Fetch browser API.