Text Labels?

[jfuehner]

Hi! I’m not finding anything in the docs. Does nebula have a way to add text labels And associate them with a geometry snape drawn?

If not, I would love to have this capability/feature...

[xintongxia]

if you are using EditableGeoJsonLayer, you can benefit from deck.gl TextLayer.

[jfuehner]

@xintongxia safe to assume I can use the binary formats for TextLayer, PolygonLayer, etc with the EditableGeoJsonLayer?

[supersonicclay]

@jfuehner we do have this ability. An edit mode can provide a getTooltips function and that text will be rendered with a deck.gl TextLayer. See MeasureDistanceMode. https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-distance-mode.ts

[jfuehner]

@xintongxia @supersonicclay Just now getting back to this question...

I do plan to use the EditableGeoJsonLayer. I am using Vue; not React so I will be using the layer with pure JavaScript.

Looking at the documentation and the example @supersonicclay provided It looks like getTooltips which uses the deck.gl TextLayer is only available in certain edit or measuring modes...

It looks like the MeasureDistanceMode @supersonicclay provided extends the GeoJsonEditMode class.

Essentially, I have a use-case where I need to draw an object (Paths, Polygons, Point, etc) and display an optional text label with user-defined styling (i.e., font, color, size) with that object. The metadata for the text styling/label would be apart of the geojson features properties.

Would I need to create custom edit modes to support my use-case? Or... Would it be advisable to use the tooltips sublayer available _subLayerProps?

Not sure I am following how best to accomplish showing text labels with each feature...

[tazo90]

@jfuehner You should achieve it by creating a separate editable and text layers like the following:

1. Define your data

   const featuresData = {
   type: "FeatureCollection",
   features: [
   {
     type: "Feature",
     properties: {
       shape: "Rectangle",
       text: "Example text",
     },
     geometry: {
       type: "Polygon",
       coordinates: [
         [
           [17.04726551427537, 51.11083983868976],
           [17.027678944878765, 51.11083983868976],
           [17.027678944878765, 51.104858120796095],
           [17.04726551427537, 51.104858120796095],
           [17.04726551427537, 51.11083983868976],
         ],
       ],
     },
   },
   ...
   ]
   }

2. Create an editable layer

const editableLayer = new EditableGeoJsonLayer({
    id: "editable-layer",
    data: featuresData,
    ...
})

3. Create text layer

   const textLayer = new TextLayer({
   id: "text-layer",
   data: featuresData.features,
   pickable: false,
   getPosition: (d) => {
   const centroid = turfCentroid(d);
   return centroid.geometry.coordinates;
   },
   getText: (d) => d.properties.text,
   });

4. Finally pass editableLayer and textLayerto DeckGL