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