Add "Text" options to styles of geometry

Created on 29 May 2023, over 1 year ago
Updated 5 June 2023, over 1 year ago

Good afternoon, please tell me, I'm confused, I can't figure out where my mistake is.
I want to add the ability to specify text for any type of geometry in the style settings, I decided to just fix the existing Circle style plugin and not create a separate module

To do this, I made edits in the files:

  • \src\Plugin\Style\Circle\Circle.php
  • \src\Plugin\Style\Circle\js\Circle.js

In Circle.php add next:

    /* Begin new */

    $form['options']['default']['text'] = array(
      '#type' => 'fieldset',
      '#title' => 'Text options',
    );
    $form['options']['default']['text']['value'] = array(
      '#type' => 'textfield',
      '#title' => 'Text value',
      '#default_value' => $this->getOption(
        array('default', 'text', 'value'),
        ''
      ),
      '#required' => FALSE,
    );

    /* End new */

and

      /* Begin new */

      $form['options'][$geometry_type]['text'] = array(
        '#type' => 'fieldset',
        '#title' => 'Text options',
      );
      $form['options'][$geometry_type]['text']['value'] = array(
        '#type' => 'textfield',
        '#title' => 'Text value',
        '#default_value' => $this->getOption(
          array($geometry_type, 'text', 'value'),
          ''
        ),
      );

      /* End new */

and accordingly in the Circle.js added:

      // Begin new

      var textValue = geometry_style.text.value || '';

      // End new
            // Begin new

            textValue = textValue.replace('${' + key + '}', featureProperties[key]);

            // End new

      // Begin new

      if (textValue == '') {
        textValue = undefined;
      } else {
        textValue = '';
      }

      // End new
          // Begin new

          text: new ol.style.Text({
            text: textValue,
            fill: new ol.style.Fill({
              color: '#fff'
            })
          })

          // End new

In other words, I just repeated the pieces of code on the example Fill - Color

However, when I view the styles page now, I get an error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
...
var textValue = geometry_style.text.value || '';

And here I can't understand why he doesn't see the value variable, because I described it in Circle.php
Or am I not doing everything right

In the attachments I added my original corrected files. Help me please

💬 Support request
Status

Active

Version

3.3

Component

OL Styles

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bad.shape.guy
  • 🇬🇧United Kingdom ken-g

    Hi @bad.shape.guy,

    This error is almost certainly caused by the fact that you are not passing any value from your new text field in the Circle.php form into the Circle.js plugin.

    Have you edited the relevant style used by the map and made sure that there is a value saved in the relevant text field ? Specifically, you need to check your new text field in the "GEOMETRY CIRCLE" section. Also, you need to ensure that you have ticked "Enable this geometry type ?" in the same section of the circle configuration.

    Does this help ?

  • Hello ken-g, thanks for the reply!

    It turns out the problem was the missing default settings in the files

    /includes/openlayers.default_openlayers_styles.inc
    /modules/openlayers_geofield/includes/openlayers_geofield.default_openlayers_styles.inc

    As I understood in the file \src\Plugin\Style\Circle\Circle.php a form is being processed that puts the settings in the database, but by default it initially expects to get them from the code where they were just missing

    As a result, I similarly set up Text in these files and the problem disappeared

    Issue can be closed. The only question is, why is the style called Circle? =) Why not polygon, shape, geometry? After all, anything is drawn there, but not a circle =) Or does this concept come from the Openlayers library itself?

Production build 0.71.5 2024