Google Maps Polygon (React)
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
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;
- 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);
-
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:
- Data source: the Mendix objects containing the Polygon/Polyline data
- Coordinates attribute: required format : ((lat1,long1),(lat2,long2),(lat3,long3),(..)) or [[lat1,long1],[lat2,long2],[lat3,long3],[..]]
- Color attribute: any simple color (red, green, blue) or hexadecimal (with the #) will suffice;
- Type attribute: Enum containing values Polygon and Polyline.
- Infowindow attribute: the string attribute containing the to be displayed name in the infowindow popup
https://googlemapspolygona-sandbox.mxapps.io
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.
Thanks to the team maintaining the React Google Maps API library, see https://www.npmjs.com/package/@react-google-maps/api