Introduction

The Google Maps Shape Editor, developed by valantic-lcs, is an interactive component designed for OutSystems Developer Cloud (ODC) applications. It enables users to create, edit, import, and export polygons directly on Google Maps. The editor provides advanced functionality for geospatial use cases like territory planning, zoning, operational boundaries, and environmental monitoring.

Why Use this Asset?

• Interactive Design: Allows end users to draw, edit, and manage polygons dynamically.

• Real-Time Updates: Automatically calculates polygon metrics such as area and perimeter.

• JSON Compatibility: Imports and exports polygon data in JSON format for easy external processing.

• Seamless Integration: Designed specifically for OutSystems ODC for low-code development workflows.

Available Functionality

1. Drawing Polygons: Live dashed preview, keyboard shortcuts, and visual guides for intuitive shape creation.

2. Editing Polygons: Drag vertices, remove individual points, or move entire polygons.

3. Toggle Dragging: Enable or disable polygon drag-and-drop at runtime using a toolbar button.

4. Safe Deletion: Optional confirmation dialog for polygon removal.

5. Import and Export: JSON-based polygon import and automatic export upon any interaction (create, edit, delete).

6. Real-Time Updates: Client Actions capture polygon data changes and sync to OutSystems workflows.

7. Customizable Appearance: Easily configure polygon colors, opacity, stroke width, and map types.

Use Case Example

Scenario: A city zoning application needs an interactive tool for defining restricted areas.
Workflow:

1. The user draws polygons on a Google Map to represent zoning boundaries.

2. Polygon data (coordinates, area, perimeter) is automatically calculated and exported to OutSystems.

3. The user adjusts existing polygons by dragging vertices or removing invalid points.

4. Real-time updates allow the application to reflect zoning changes instantly.

Installation and SetupPre-requisites

1. Access to OutSystems Developer Cloud (ODC).

2. A valid Google Maps API Key with the JavaScript API enabled.

   • Required libraries: drawing, geometry.

3. Familiarity with OutSystems ODC Studio.

Installation Procedure

Follow these steps to install the Google Maps Shape Editor:

1. Download the Asset: Obtain the latest version of the Google Maps Shape Editor asset from the OutSystems Forge (or internal repository).

2. Open ODC Studio: Launch OutSystems Developer Cloud Studio and open the application where you intend to use the component.

3. Import the Library:

   • Navigate to the Libraries section of your application.

   • Click the Import Library button.

   • Select the downloaded library file (.oml or equivalent package) and confirm the import.

4. Reference Dependencies: After importing, ensure the necessary modules and block references are available in your application's consumer module.

5. Configure API Key:

   • Locate the initialization Client Action for the Google Map component within the newly imported library (e.g., InitializeMap).

   • Provide your valid Google Maps API Key as an input parameter to this action.

   • Confirm that the drawing and geometry libraries are correctly referenced in the Google Maps script loading mechanism.

6. Drag and Drop: The main ShapeEditor Block should now be available in your application's UI toolbox. Drag it onto the desired screen or Block where the map functionality is required.

7. Final Setup: Configure the required input parameters for the ShapeEditor Block, such as initial map center coordinates, zoom level, and event handlers for polygon updates (e.g., OnPolygonUpdated).

Load Initial Polygons

To pre-load polygons, pass a JSON string to the StartPolygons parameter:
{

"PolygonList": [

{

"Id": "polygon-1",

"Location": [

{ "Lat": 38.7516, "Lng": -9.2608 },

{ "Lat": 38.7508, "Lng": -9.2609 },

{ "Lat": 38.7509, "Lng": -9.2598 }

]

}

]

}

Handle Polygon Events

Client Actions capture polygon changes (create, update, drag, delete). Example output:

{

"PolygonList": [

{

"Id": "polygon-1",

"Location": [

{ "Lat": 38.7516, "Lng": -9.2608 },

{ "Lat": 38.7508, "Lng": -9.2609 },

{ "Lat": 38.7509, "Lng": -9.2598 }

],

"AreaM2": 4255.23,

"PerimeterM": 185.23

}

]

}

Configuration Guide

Visual Aid: Workflow Diagram

Workflow Overview: Map Polygon Creation and Data Export

This diagram illustrates the sequential steps for creating and managing map polygons, culminating in data utilization within an OutSystems environment.

1. Initialize Map: The process begins with the preparation and loading of the map interface.

2. Draw Polygons: Users then create the desired polygon shapes on the initialized map.

3. Edit or Drag Polygons: Polygons can be modified, either by editing their points or repositioning them on the map.

4. Export Polygon Data: The final polygon coordinates and associated data are extracted from the map.

5. Processing in OutSystems: The exported data is then consumed and processed by the OutSystems application.

   
   

Demo Highlights

• Interactive Drawing: Real-time polygon creation with live preview lines and visual feedback.

• Live Editing: Drag vertices, remove points, or move entire polygons.

• Runtime Drag Toggle: Enable or disable polygon dragging during execution.

• Metric Calculation: Immediate calculation of area (m²) and perimeter (m).

• JSON Import: Load predefined polygons at startup.

• Client Action Output: Visualization of polygon data exported back to OutSystems.

Contact and Support

Support Contact:

• Email: david.matias@lcs.valantic.com

Repository: GitHub – Google Maps Shape Editor