Google Maps Custom Marker (React)

Content Type: Widget
Categories: User Interface

Overview

An extension to the default Mendix Maps widget for showing point locations on a Google Map. It offers heaps of extra features like dropping/dragging, geocoding, fully customized marker appearance and infowindow content, marker clustering and determining current location.

 

Documentation

Demo urlhttps://googlemapsmarker100-sandbox.mxapps.io/index.html

GoogleMapsCustomMarker

An extension to the default Mendix Maps widget for showing point locations on a Google Map. It offers heaps of extra features like dropping/dragging, geocoding, marker clustering and determining current location. See all features in action here:

https://googlemapsmarker100-sandbox.mxapps.io/index.html

This widget uses React / TypeScript and the new pluggable widgets API. Additional features:

Features

  • Drawing and dragging marker. In the process the location is reverse geocoded and all possible addresses retrieved.
  • Multiple symbols (cross, diamond, circle, triangle, star) supported next to default Google Maps marker
  • Polyline between all marker locations, with or without markers
  • Extra Legend with custom symbols / images by enumeration
  • Marker clustering when zooming out
  • Search box for easy navigation to known address
  • Determining current location;
  • Fully customizable info winfow (Mendix Data View)

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 Custom Marker widget to your page, see screenshots for Settings in Studio Pro.

  • At least configure:

    • Data source: the Mendix objects containing the Location data
    • For Position: Latitude / Longitude attributes: required format: Decimal
    • For Editing of Position: Lat Attribute (for updates) / Lng Attribute (for updates)
    • For Reverse geocoding (retrieving addresses when dragging marker): Formatted Address
    • Appearance: Enum attribute / Color + Symbol + Size attribute:
      • If Enum attribute is selected, configure 'Enum based marker images' as well. The can be free format; doesn't need predefined values. The enumeration key used in the attribute does have to agree with the 'Enum key' of the configured 'Enum based marker images'.
      • If no Enum attribute selected then configure at least Color and Symbol attribute and optional the Size attribute.
        • Symbol attribute; please use an enumeration attribute with possible keys: 'MARKER','CIRCLE','DIAMOND','TRIANGLE','STAR','CROSS'.
        • Size attribute; please use an enumeration attribute with possible keys: 'XXS','XS','S','M','L'

  • All other features

    1. Legend (based on enumeration or symbols)
    2. Interaction via on click infowindow or directly on click
    3. Marker Clustering
    4. SearchBox
    5. Lines (Dotted/Dashed/with/without Markers)
    6. Location based on current location
    7. Customizable Info Window (Mendix Data View)

    should be self explanatory. A print screen for settings per feature is added in the Mendix Marketplace.

Demo project

https://googlemapsmarker100-sandbox.mxapps.io/index.html

Issues, suggestions and feature requests

This version uses the vis.gl/react-google-maps library for creating React elements. Currently there is a shortcoming in the Mendix Pluggable widgets API, not being able to directly change an attribute loaded by data source, hence the latitude and longitude attributes have to be selected twice in the widget settings, if updates on latitude/longitude need to be automated by the widget via dragging.

Development and contribution

Thanks to the team 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: 9.24.6
Release Notes: 1. Moved to Google Maps promoted React library: vis.gl/react-google-maps 2. Improved marker clustering, also adding an extra setting 'Infowindow text' 3. In 'Data source' added 'Display name' attribute which will be used for tooltip text and in infowindow of marker clustering 4. New demo url: https://googlemapsmarker100-sandbox.mxapps.io/index.html
Version: 1.3.0
Framework Version: 9.24.6
Release Notes: - Mendix 9 upgrade - Removed deprecations - Added Map Width and Height settings
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.18.1
Release Notes: * Resolved an error popping up in the browser console for when no location is available yet, * Map zooms to default location when there are no locations
Version: 1.0.1
Framework Version: 8.18.1
Release Notes: Updated XML for readability * Splitted 'Data source' pane in widget XML and gave 'Appearance' settings an own tab pane. * Added defined values for Symbol and MarkerSize enumerations. * Moved infowindow attribute to 'Interaction' pane.
Version: 1.0.0
Framework Version: 8.18.1
Release Notes: An extension to the default Mendix Maps widget for showing point locations on a Google Map. It offers heaps of extra features like dropping/dragging, geocoding, marker clustering and determining current location. See all features in action here: https://googlemapscustomma.mxapps.io/index.html?profile=Responsive This widget is a rewrite of the original GoogleMapsCustomMarker widget, originally based on the Dojo framework, see https://marketplace.mendix.com/link/component/43162 This widget uses React / TypeScript and the new pluggable widgets API. Additional features: * Determine current location * Support for all datasources, even nanoflows; * Support for all types of on click behavior when clicking on a Marker; * Editability based on Mendix Studio Pro, respecting entity access rights;