geography-search-box

Chart style

The geographic search box allows you to customize the size, position, color, and text style of the search box and result box. Use it with a map widget to search for regions and display results on a visual application.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Search box style

  Parameter	Description
  Prompt Text	The prompt text displayed in the input field.
  Width	The width of the search box.
  Height	The height of the search box.
  Lateral Offset	The distance between the left boundary of the search box and the widget edge.
  Longitudinal Offset	The distance between the search box and the edge of the widget.
  Font size	The size of the font in the search box.
  Font weight	The weight of the font in the search box.
  Color	The color of the font in the search box. For more information, see color picker description.
  Background color	The background color of the search box. For more information, see color picker description.
  Borders	The style of the border of the search box. Border Width: the width of the search box border. Border Color: the color of the search box border. Border Type: the type of the search box border. Valid values: Solid Line, Dashed Line, and Dotted Line.

• Result Box Style

  Parameter	Description
  Maximum Width (Height)%	The maximum width of the result box.
  Maximum height	The maximum height of the result box.
  Top Spacing	The distance between the result box and the search box.
  The color of the font. For more information, see Color setting parameters.	The color of the font in the result box.
  Font Size	The size of the font in the result box.
  Border Color	The color of the outer border of the result box.
  Bottom Border Color	The color of the bottom border of the result box.
  Background color	The background color of the result box.
  Hover Style	The hover style when you move the pointer over the result box, including font color, bottom border color, and font size.

  Note

  The result box style is visible only on the Preview or Publish page.

• Interaction: the callback ID used for interaction between the timeline widget and other widgets. The callback ID must be a parameter on the Data tab.

  Important

  This feature has been moved to the Advanced panel and will be deprecated in the Style panel. Configure callback IDs in the Interaction tab.

Data Sources panel

Advanced Panel

Turn on the switch to enable the associated global variable feature. When the search box data changes, a data request is triggered and temporary variables are emitted to dynamically load data from different regions. By default, the name and adcode values are emitted. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Notes
     When the data interface request is completed	The event is triggered with the processed JSON data after a data interface request is responded to and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When the current value changes	Triggered when the current value changes. The event emits the search place name and area code. See the data example. { "name": "Zaozhuang", "adcode": "370400" }

   • Action

     Action	Notes
     Import data	After the widget data is processed into its drawing format, it is imported for redrawing without requesting server data again. See the data example. [ { "name": "Zaozhuang", "adcode": "370400", "level": "city", "parent": "Shandong Province" } ]
     Request Data Interface	Requests server data again. Data from an upstream converter or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Obtain the current selected value	Gets the currently selected value. No parameters are required.
     Clear a component to its default value	Resets the component to its default value. No parameters are required.
     Move	Moves the widget to a specified location. See the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. See the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. See the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates the style configurations of the widget. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then, modify the style field for the data processing node in Blueprint Editor.