Google Maps Polygon (React)

Content Type: Widget
Categories: User Interface

Overview

Displaying and editing Polygons and Polylines within your Mendix application. This widget is a rewrite of the original GoogleMapsPolygon widget, 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;

Documentation

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

GoogleMapsPolygon

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;

Features

  • plotting of Polygons and Polylines;
  • drawing and editing of Polygons and Polylines
  • styling options, both for map as well as appearance of Polygons / Polylines;
  • on click infowindow and triggering of action (microflow/nanoflow/show page etc);
  • optionally disable the infowindow and directly trigger the action
  • 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.
    5. Infowindow attribute: the string attribute containing the to be displayed name in the infowindow popup

Demo project

https://googlemapspolygona-sandbox.mxapps.io

Issues, suggestions and feature requests

This version uses the React Google Maps API library for creating React elements, without hooks for now. One shortcoming is the LoadScriptNext React element, it will trigger a warning in the browser console every time the Google Map is reloaded.

Development and contribution

Thanks to the team maintaining the React Google Maps API library, see https://www.npmjs.com/package/@react-google-maps/api

Releases

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;