Use maps inside plugin

Elastic Stack Kibana
1

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).

image

Thanks

2

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

Screen Shot 2023-09-21 at 7.28.12 AM
Screen Shot 2023-09-21 at 7.28.12 AM1920×971 125 KB

3

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

4

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

5

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

6

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

7

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

8

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.

9

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