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).
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
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.
you will have to index your location field as geo_point . Or you could create a geo point runtime field.
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?
you would have to create a custom map source to fetch data from your local sequel DB.
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):
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?
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.
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.