Google Maps Polygon

Content Type: Widget
Categories: User Interface

Overview

Displaying and editing Polygons and Polylines within your Mendix application. This widget uses React / TypeScript and the new pluggable widgets API. Additional features: * Support for all datasources, even nanoflows; * Support for all types of on click behavior when clicking on a Polygon / Polyline overlay; * Editability based on Mendix Studio Pro, respecting entity access rights; * One hole per polygon is supported * fully customizble info window

Documentation

Demo urlhttps://googlemapspolygona-sandbox.mxapps.io

GoogleMapsPolygon

Displaying and editing Polygons and Polylines within your Mendix application.

Additional features:

Support for all datasources; Support for all types of on click behavior when clicking on a Polygon / Polyline overlay; Editability based on Mendix Studio Pro, respecting entity access rights;

Features

DRAWING

  • Drawing, editing and dragging of polygons and polylines
  • Multiple holes per polygon supported. Can't be edited directly within Polygon
  • Area calculation (in hectares) for polygons
  • Undo Redo for drawing
  • Validation of format both for polygons as well as holes per polygon

CUSTOMIZATION

  • Styling of polygons and polylines can be fully customized; color, stroke weight, opacity etc
  • Infowindow popup can be configured as a Mendix dataview hence fully styled to users liking

INTERACTION

  • Possibility for static as well as dynamic default location
  • Recenter button
  • flipping of coordinates (when drawing, google maps generates the lat / lng pairs in reverse order as can be for instance abstracted from GeoJSON format);

Usage

  • API Key:

    • Production: If you want to use the widget in Production a valid Google Maps API key needs to be entered in every widget instance.
    • Development: Developing can be done without an API key, but will show messages on top of the Google Map, making it unusable in Production.

  • Add the Google Maps Polygon widget to your page, see screenshots for Settings in Studio Pro.

  • At least configure:

  1. Data source: the Mendix objects containing the Polygon/Polyline data
  2. Coordinates attribute: required format : ((lat1,long1),(lat2,long2),(lat3,long3),(..)) or [[lat1,long1],[lat2,long2],[lat3,long3],[..]]
  3. Color attribute: any simple color (red, green, blue) or hexadecimal (with the #) will suffice;
  4. Type attribute: Enum containing values Polygon and Polyline.

Demo project

https://googlemapspolygona-sandbox.mxapps.io

Issues, suggestions and feature requests

If you are in single object edit mode (so drawing enabled) and you would like changes to for instance color, opacity and stroke weight, to be directly reflecting in the drawn polygon/polyline, an infowindow dataview NEEDS to be placed inside the widget. This will make sure Mendix pushes direct updates to the map.

Development and contribution

Thanks to the team behind the React Google Maps vis-gl and Terra Draw libraries.

Releases

Version: 3.0.0
Framework Version: 10.24.16
Release Notes:

1. Moved from Google Maps drawing library to Terra Draw due to deprecation

2. Dynamic loading of API Key via datasource, to being able to use different API Key per environment

3. Undo/Redo buttons for drawing

4. Recenter button to recenter the map after it has been dragged

5. Area calculation (in hectares) for Polygons

6. Validation of format both for polygons as well as holes per polygon

7. Multiple holes per polygon supported

Version: 2.0.0
Framework Version: 10.6.1
Release Notes: Upgraded to vis.gl library promoted by Google. Structure of widget changed significantly; components changed from class based to function based React components.
Version: 1.4.1
Framework Version: 10.6.1
Release Notes: - Upgraded to newest react-google-maps-api release (2.19.3) - Fixed async loading warning
Version: 1.4.0
Framework Version: 10.6.1
Release Notes: Added the possibility to select a dynamic default location by via datasource. The widget will pick the latitude and longitude of the ..first object in the data source.
Version: 1.3.1
Framework Version: 10.6.1
Release Notes: - Direct on click action without an infowindow fixed again, wasn't working - Added Map Height and Width settings to fully control sizing. 10.000 means responsive!
Version: 1.3.0
Framework Version: 10.6.1
Release Notes: * Upgraded to Mendix 10 and tested in Mendix 10.6.1 * Upgraded to newest Pluggable Widgets API * Updated deprecated code
Version: 1.2.1
Framework Version: 8.18.23
Release Notes: - Fix for default lat lng not being used if no objects or one object without coordinates yet - Fix for now also registering the first change and translating to coordinates string for first change of polygon
Version: 1.2.0
Framework Version: 8.18.23
Release Notes: - Add your own fullly customizable Data View widget as Google Maps InfoWindow - React upgraded to 17 release (17.0.1) - React-Google-Maps/API library upgraded to latest release (2.18.1) - Rebranded from First Consulting to Valcon
Version: 1.1.0
Framework Version: 8.15.2
Release Notes: - FIx for warnings popping up about Google Maps API being loaded multiple times - Fix for position of info window on click of a Polyline. It was positioned in the center of the polygon shape around it, which is never on the Polyline
Version: 1.0.0
Framework Version: 8.15.2
Release Notes: Displaying and editing Polygons and Polylines within your Mendix application. This widget is a rewrite of the original GoogleMapsPolygon widget, originally based on the Dojo framework, see https://marketplace.mendix.com/link/component/105491. This widget uses React / TypeScript and the new pluggable widgets API. Additional features: * Support for all datasources, even nanoflows; * Support for all types of on click behavior when clicking on a Polygon / Polyline overlay; * Editability based on Mendix Studio Pro, respecting entity access rights; * One hole per polygon is supported;