Skip to content

Add a Map Component to the No-Code Editor + Generator #479

Description

@ArmenSl

Description

Add a Map view component to the GUI metamodel and the No-Code visual editor, allowing users to drag-and-drop a map widget into their application designs. The component should be supported end-to-end: from the metamodel definition, through the editor UI, to the code generators that produce working map views in the target frameworks.

Motivation

Maps are a common UI element in modern web and mobile applications (e.g., store locators, delivery tracking, geospatial data visualization). Supporting a map component in the No-Code editor enables users to build location-aware applications without writing code.

Design Considerations

  • Default provider: Use OpenStreetMap (Leaflet) as the default since it requires no API key
  • Data binding: Markers should be bindable to class from the class diagram (e.g., a Location class with 'json' name attributes)
  • Responsive: Generated map components should be responsive by default
  • Update to the GUI Metamodel: update to the react generator and backend generator to have the link to fetch into the backend

Acceptance Criteria

  • A user can add a map component to a screen in the No-Code editor
  • The map component can be configured with center, zoom, and marker bindings
  • ReactGenerator produces a working map with markers from bound data
  • FlutterGenerator produces a working map with markers from bound data
  • The component round-trips through JSON serialization
  • Generated projects include all necessary dependencies for the map library
  • Documentation is updated

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions