How to use your default defined layer as input for our simple mapbox GL map?

[jzarei1996]

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

[nickpeihl]

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

[jzarei1996]

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?

[nickpeihl]

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

[jzarei1996]

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?

[jzarei1996]

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?

[Nathan_Reese]

Use mousemove maplibre event

const throttledSetMouseCoordinates = _.throttle((e: MapMouseEvent) => {
  console.log('lat', e.lngLat.lat)
  console.log('lon', e.lngLat.lng)
}, 100);
mbMap.on('mousemove', throttledSetMouseCoordinates);

[jzarei1996]

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?

[Nathan_Reese]

You can find examples and API reference at Intro - MapLibre GL JS

[jzarei1996]

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?

[nickpeihl]

The APIs for accessing Elastic Maps Service tile services are provided by the maps_ems plugin.

The Vega Map View is one example of a consumer of the maps_ems plugin that should provide inspiration for your custom plugin.

[jzarei1996]

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.

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>
  );
};

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.

Please help me. @nickpeihl @Nathan_Reese

[jzarei1996]

Sorry. My problem is still not solved. Can you help me more?
@nickpeihl
@Nathan_Reese
@jsanz

[Nathan_Reese]

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

[jzarei1996]

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.

[Nathan_Reese]

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