Google Maps Polygon (React)

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.

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

As per version 2.0.0 the widget uses the vis.gl/react-google-maps library. 

Development and contribution

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

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;