feat: support value filter

README.md

@@ -84,17 +84,32 @@ sequenceDiagram
 
 - **Integration API Base URL**: Base URL of your CMS Integration API
 - **Integration API Key**: Authentication key for API access
+- **CMS Project ID**: ID of the CMS project
 - **CMS Model ID**: ID of the CMS model to visualize
+- **Filters**: Optional value filters to limit displayed data
 
 ### Location Data Types
 
 1. **Longitude & Latitude Fields**: Separate fields for coordinates
 2. **Longitude & Latitude Array Field**: Single field containing coordinate array
 3. **GeoJSON Field**: Field containing GeoJSON geometry data
 
+### Data Filtering
+
+The plugin supports filtering CMS data when using the Integration API:
+
+- **Filter Format**: `field===value|value2;field2===value3`
+- **Multiple Values**: Use pipe `|` to separate multiple values for the same field
+- **Multiple Fields**: Use semicolon `;` to separate different field filters
+- **Example**: `status===published|reviewed;category===news`
+
+This example will show only items where:
+- `status` field equals "published" OR "reviewed"
+- AND `category` field equals "news"
+
 ### Customization
 
-- **Infobox Fields**: Comma-separated list of fields to display in markers
+- **Display Fields**: Comma-separated list of fields to display in inspector block
 - **Marker Appearance**: JSON configuration for marker styling
 
 ## Architecture

public/reearth.yml

@@ -60,6 +60,15 @@ extensions:
                 field: data_source_type
                 type: string
                 value: cms_integration_api
+            - id: value_filters
+              title: Filters
+              description: "Optional, specify value filters, Example: status===published|reviewed;category===news"
+              type: string
+              ui: multiline
+              availableIf:
+                field: data_source_type
+                type: string
+                value: cms_integration_api
         - id: visualization
           title: Visualization
           fields:

src/extensions/visualizer/main/hooks.ts

@@ -11,6 +11,7 @@ type WidgetProperty = {
     integration_api_key?: string;
     cms_project_id?: string;
     cms_model_id?: string;
+    value_filters?: string;
   };
   appearance: {
     marker_appearance?: string;
@@ -254,6 +255,25 @@ export default () => {
             ],
           }));
 
+          // Apply value filters if any
+          // Example: status===published|reviewed;category===news
+          if (widgetProperty.api.value_filters) {
+            const filters = widgetProperty.api.value_filters
+              .split(";")
+              .map((filter) => {
+                const [key, values] = filter.split("===");
+                return { key, values: values.split("|") };
+              });
+
+            allItems = allItems.filter((item) =>
+              filters.every((filter) => {
+                const field = item.fields.find((f) => f.key === filter.key);
+                if (!field) return false;
+                return filter.values.includes(String(field.value));
+              })
+            );
+          }
+
           postMsg("addLayer", allItems);
         } catch (error) {
           console.error("Error fetching data:", error);

src/extensions/visualizer/visualizer.ts

@@ -8,7 +8,6 @@ type VisualizationConfig = {
   longitude_field_key?: string;
   longitude_latitude_array_field_key?: string;
   geojson_field_key?: string;
-  infobox_fields?: string;
   marker_appearance?: string;
 };