How can we use your service tile to load our map in Kibana?

Elastic Stack Kibana
1

We have created a map from mapbox gl in our plugin in Kibana. My map codes are very simple, please look at them and guide me what to give as options which include layer and source to my map so that your basemap can be shown to me.

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<HTMLDivElement | null>(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 (
    <Fragment>
      <div id="mapContainer" style={{ width: '750px', height: '500px' }} ref={refDiv} />
    </Fragment>
  );
};

For example if I give something like this to my map as input it will show me a map. This is exactly what I want except that I want your map to be displayed instead. So tell me what address should I put for loading your tiles or what options should I give as input?

{
container: 'mapContainer', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'],
tileSize: 256,
attribution:
'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA',
},
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22,
},
],
},
center: [-74.5, 40], // starting position
zoom: 2, // starting zoom
}

2

This is a duplicate of How to use your default defined layer as input for our simple mapbox GL map?.

3

Closed as duplicate