Google Maps Shape Editor, developed by valantic-lcs, is a powerful, interactive component for OutSystems 11 – Reactive Web applications. It offers advanced geospatial functionality, allowing users to create, edit, import, and export polygon data directly on a Google Map interface.
This component is specifically designed to integrate seamlessly into low-code development patterns, making it ideal for applications requiring map-based area management.Key Use Cases
The Shape Editor is perfectly suited for use cases such as:
Territory and Area Planning
Zoning and Land-Use Definition
Operational or Service Boundary Mapping
Environmental Monitoring and Mapping Tools
Core Features and Benefits
Feature
Description
Interactive Management
Allows end users to draw, edit, and manage polygons directly on the map surface, providing a highly intuitive experience.
Real-Time Data
Automatically calculates and updates polygon metrics, such as area and perimeter, immediately following any modification.
Data Compatibility
Supports polygon data exchange via JSON format, simplifying integration with external systems or for persistence in OutSystems storage.
OutSystems Native
Built specifically for OutSystems 11 Reactive Web applications, leveraging public client actions for seamless workflow integration.
Available Functionality
The component includes comprehensive tools for shape manipulation:
Drawing: Features include a live dashed preview, visual guides for precision, and enhanced keyboard/mouse interactions.
Editing: Supports dragging individual vertices, removing specific points, and moving the entire polygon.
Toggle Dragging: A toolbar control allows for enabling or disabling the drag-and-drop feature for polygons at runtime.
Safe Deletion: An optional confirmation dialog is available before any polygon is removed.
Import/Export: Polygons can be imported from JSON, and data is automatically exported (as a JSON structure) after every interaction (creation, edit, or deletion).
Customization: Appearance settings for polygons (color, opacity, stroke width) and the map type (roadmap, satellite) are fully configurable.
Client Actions: Instantaneously capture all polygon changes and propagate them to OutSystems workflows.
Example Scenario: City Zoning Application
A city planning application needs a tool to define and manage restricted zones.
The user draws the zoning boundaries as polygons on the map.
The Shape Editor automatically calculates data (coordinates, area, perimeter).
The data is exported to OutSystems in JSON format for validation and persistence.
The user edits boundaries by moving vertices or repositioning the polygon.
Real-time updates ensure the application immediately reflects the zoning changes.
Installation and Setup GuidePrerequisites
To successfully install and use the component, ensure you have:
Access to an OutSystems 11 environment.
Service Studio installed.
A valid Google Maps API Key with the Maps JavaScript API enabled.
Required libraries: drawing and geometry.
Familiarity with OutSystems Service Studio, Reactive Web applications, and Manage Dependencies.
Installation Procedure
Download the Asset: Obtain the latest version from the OutSystems Forge or an internal repository.
Open in Service Studio: Launch Service Studio and open your consumer application.
Reference Dependencies: In your module, open Manage Dependencies… and import:
The main ShapeEditor Block.
Required public Client Actions (e.g., InitializeMap).
Any exposed data structures or events.
Configure API Key:
Locate the map initialization Client Action (e.g., InitializeMap).
Provide your Google Maps API Key as an input parameter (preferably using a Site Property).
Verify the script loader includes the drawing and geometry libraries.
Add to Screen: Drag the ShapeEditor Block from the Reactive UI toolbox onto your desired Screen or Web Block.
Final Configuration: Set the ShapeEditor input parameters:
Initial map center (latitude / longitude).
Initial Zoom level.
Polygon style settings (FillColor, StrokeColor, etc.).
Event handlers (e.g., OnPolygonUpdated).
Loading Initial Polygons
To pre-load existing shapes, pass a valid JSON string to the StartPolygons input parameter.
Example JSON Structure:
{
"PolygonList": [
"Id": "polygon-1",
"Location": [
{ "Lat": 38.7516, "Lng": -9.2608 },
{ "Lat": 38.7508, "Lng": -9.2609 },
{ "Lat": 38.7509, "Lng": -9.2598 }
]
}
Handling Polygon Events
Client Actions capture changes (create, update, drag, delete) and output the full list of polygons, including calculated metrics.
Example Output (Client Action):
],
"AreaM2": 4255.23,
"PerimeterM": 185.23
Configuration Parameters
Parameter Name
Type
latitude
Number
The initial latitude coordinate for the map center.
longitude
The initial longitude coordinate for the map center.
Zoom
Defines the map's initial zoom level.
WigetId
String
The HTML container ID where the map will be rendered.
Editable
Boolean
Controls whether polygon vertices can be edited.
Draggable
Controls whether entire polygons can be moved (dragged).
FillColor
The interior fill color of the polygon (e.g., #1a73e8).
FillOpacity
The fill transparency, a value between 0 and 1.
StrokeColor
The color for the polygon's border/outline.
StrokeWeight
The width of the border line in pixels.
ShowConsoleLogs
Toggles the display of debug logs in the browser console.
Support Contact:
david.matias@lcs.valantic.com
Repository:
GitHub – Google Maps Shape Editor