# How to use your default defined layer as input for our simple mapbox GL map? **URL:** \ **Category:** Kibana\ **Tags:** maps\ **Created:** [August 8, 2023, 1:58pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382 "2023-08-08T13:58:07Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 8, 2023, 1:58pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/1 "2023-08-08T13:58:07Z")
Hi everyone. We want to create a sample map from the Mapbox GL JS library in our own plugin according to its documentation. We want a simple mode and during the review we found out that your Maps plugin also uses this library, but it is very advanced and is managed with many props. Basically we want the simplest case to give it only one layer. What we want to do is to bring up an instance of the mapbox gl map and give it just the default layer defined by Elastic (the default layer defined in the Maps plugin). Is this workable? How? What address and API are you using to get the layer and display it? That is, if this is our simple map, how do we give it your default style and layer? const mbStyle = { version: 8 as 8, sources: {}, layers: , glyphs: 'your glyphs' , }; ``` Map = new mapboxgl.Map({ container: 'mapContainer', style: 'your style', center: [-74.5, 40], // starting position [lng, lat] zoom: 9, // starting zoom }); ``` Our goal is to display a map that uses your layer and everything else. Next, let's add other features of the map, such as add marker, which you don't have. Please guide us to do this. Thanks ---
**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\ **Post date:** [August 8, 2023, 2:09pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/2 "2023-08-08T14:09:00Z")
Hi @jzarei1996. The default basemaps in the Maps application in Kibana are strictly for use only in Kibana. We do not allow use of the basemaps in applications outside of Kibana. See our [Elastic Maps Service Terms of Service](https://www.elastic.co/elastic-maps-service-terms). For your application you will need to use a basemap from another service or create your own basemap. One of our engineers (@jsanz) put together a guide that shows how you can add feature data from Elasticsearch to a custom application. [https://github.com/jsanz/elastic-workshop/tree/main/lab/vector-tile-viewer](https://github.com/jsanz/elastic-workshop/tree/main/lab/vector-tile-viewer) ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 8, 2023, 2:24pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/3 "2023-08-08T14:24:16Z")
Sorry, I think I explained it wrong. We are using your Kibana version 7.12. And based on your document, we have created a plugin for ourselves and now we want to do what I explained. Can't we use your default layer and styles in our own plugin and get it from Elastic? ---
**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\ **Post date:** [August 8, 2023, 2:49pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/4 "2023-08-08T14:49:37Z")
My apologies. I misread your question. You are developing a custom plugin for Kibana. Parts of the Terms of Service may still apply to your use case. You might be compliant if you are developing your plugin for internal use and not redistributing the plugin. But you should do your own due diligence to make sure you are compliant. You might find [this example plugin](https://github.com/elastic/kibana/tree/main/x-pack/examples/third_party_maps_source_example) useful. It shows how to add a custom source to the Maps in Kibana. That plugin handles the creation of the `Map` (including the basemaps) and adds a new layer source referencing external data. To view the example in Kibana you need to start your development instance of Kibana with `yarn start --run-examples` and find the "Third party maps source example" in the "Examples" sidebar application. ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 9, 2023, 7:35am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/5 "2023-08-09T07:35:00Z")
Let me put my question in a different way. Is there any way to get latitude and longitude from mapbox gl when the cursor hovers over this place? ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 9, 2023, 7:50am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/6 "2023-08-09T07:50:12Z")
Let me put my question in a different way. Is there any way to get latitude and longitude from mapbox gl when the cursor hovers over this place? ---
**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:** [August 10, 2023, 3:34pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/7 "2023-08-10T15:34:18Z")
Use mousemove maplibre event ```auto const throttledSetMouseCoordinates = _.throttle((e: MapMouseEvent) => { console.log('lat', e.lngLat.lat) console.log('lon', e.lngLat.lng) }, 100); mbMap.on('mousemove', throttledSetMouseCoordinates); ``` ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 12, 2023, 9:19am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/8 "2023-08-12T09:19:44Z")
Hi @Nathan_Reese . Thank you. Now I have another question, how to add the marker in mapbox gl? And after that, how can I get the latitude and longitude and show it in the text field? ---
**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:** [August 13, 2023, 1:57pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/9 "2023-08-13T13:57:41Z")
You can find examples and API reference at [Intro - MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/API/) ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 14, 2023, 5:56am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/10 "2023-08-14T05:56:16Z")
Thanks, we will definitely look into it. Now let's get back to the main topic of this conversation. How can we use your Tile service for the map we made from mapbox gl? ---
**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\ **Post date:** [August 15, 2023, 1:52pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/11 "2023-08-15T13:52:18Z")
The APIs for accessing Elastic Maps Service tile services are provided by the [maps\_ems plugin](https://github.com/elastic/kibana/tree/main/src/plugins/maps_ems). The [Vega Map View](https://github.com/elastic/kibana/tree/main/src/plugins/vis_types/vega/public/vega_view/vega_map_view) is one example of a consumer of the maps\_ems plugin that should provide inspiration for your custom plugin. ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 16, 2023, 7:00am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/12 "2023-08-16T07:00:07Z")
Sorry @nickpeihl . I feel like this doesn't meet my needs or maybe I don't understand how to use it and put it in my map. I feel that you may not yet fully understand what I mean by what I am trying to do. So I leave you the code of the part where I created a map from mapbox gl. ```auto import React, { Fragment, useRef, useEffect } from 'react'; import { maplibregl } from '@kbn/mapbox-gl'; import { Map as MapboxMap, MapOptions, MapSourceDataEvent } from '@kbn/mapbox-gl'; export const MapSiem = () => { const refDiv = useRef(null); useEffect(() => { _initializeMap(); }, []); const _initializeMap = async () => { let mbMap: MapboxMap; try { mbMap = await _createMbMapInstance(); } catch (error: any) { console.log('etttttttttttttttteeeee', error); return; } }; const _createMbMapInstance = () => { return new Promise((resolve) => { const mbStyle = { version: 8 as 8, sources: {}, layers: [], // glyphs: getGlyphUrl(), }; const options: MapOptions = { attributionControl: false, container: 'mapContainer', maxZoom: 24, minZoom: 0, preserveDrawingBuffer: false, style: mbStyle, }; const mbMap = new maplibregl.Map(options); console.log({ mbMap }); mbMap.dragRotate.disable(); mbMap.touchZoomRotate.disableRotation(); mbMap.on('load', () => { resolve(mbMap); }); }); }; return (
); }; ``` Please guide me on what to input to my map (options, including layers, etc.) so that your basemap is loaded for me. Basically, we want to have our own map, but take the layer loading from you. We want it to show your basemap according to the photo of our map so that later we can add markers to it based on our needs. ![Screenshot](https://us1.discourse-cdn.com/elastic/original/3X/b/d/bde178e830543b6e7c8fcb9084087140683b1635.jpeg) Please help me. @nickpeihl@Nathan_Reese ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 26, 2023, 4:54am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/13 "2023-08-26T04:54:54Z")
Sorry. My problem is still not solved. Can you help me more? @nickpeihl @Nathan_Reese @jsanz ---
**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:** [August 26, 2023, 3:03pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/14 "2023-08-26T15:03:13Z")
Here is a link to where maps application initializes base layer in maplibre [https://github.com/elastic/kibana/blob/main/x-pack/plugins/maps/public/classes/layers/ems\_vector\_tile\_layer/ems\_vector\_tile\_layer.tsx#L281](https://github.com/elastic/kibana/blob/main/x-pack/plugins/maps/public/classes/layers/ems_vector_tile_layer/ems_vector_tile_layer.tsx#L281) ---
**Author:** ![jzarei1996](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jzarei1996/32/124442_2.png) [@jzarei1996](https://discuss.elastic.co/u/jzarei1996)\ **Post date:** [August 27, 2023, 5:00am UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/15 "2023-08-27T05:00:07Z")
Hello again @Nathan_Reese . We are a bit confused by your guidance and your colleagues. We still haven't figured out exactly how to load your map for us. Your friend says we should use maps\_ems plugin, but you introduce its function. What exactly should we do? How to use the function you say for our needs? Do we have access to it in our own plugin? Please guide us more or if possible create a plugin and implement our needs in any way you know and send it to us. ---
**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:** [August 27, 2023, 1:26pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/16 "2023-08-27T13:26:02Z")
> Please guide us more All of the answers you are looking for are in the file [https://github.com/elastic/kibana/blob/main/x-pack/plugins/maps/public/classes/layers/ems\_vector\_tile\_layer/ems\_vector\_tile\_layer.tsx](https://github.com/elastic/kibana/blob/main/x-pack/plugins/maps/public/classes/layers/ems_vector_tile_layer/ems_vector_tile_layer.tsx). You are going to have to spend time understanding how this works and extracting what you need. > if possible create a plugin and implement our needs in any way you know and send it to us. This is not possible. This is all the guidance we can provide on this issue. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [September 24, 2023, 1:26pm UTC](https://discuss.elastic.co/t/how-to-use-your-default-defined-layer-as-input-for-our-simple-mapbox-gl-map/340382/17 "2023-09-24T13:26:25Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.