GoogleMaps Custom Marker

Category: Widgets
Subcategory: Display widgets

Overview

15-4-2021: There is a newer version of the widget available, based on the React framework. It is best to use the newer version as this version, based on Dojo, will not be upgraded anymore. See 'Documentation' tab for a direct link to the new widget. This is an extension to the default Mendix Google Maps widget, based on version 6.0.1 of the AppStore. Extra features are: - toggling between drag and drop mode; - saving of new coordinates of dragged marker; - markerclustering for multiple markers; - customizing the infowindow and marker; - v1.1: Reverse geocoding after dragging - v1.1: Multiple dragging options - v2.0: Show Line between markers or just a line - v2.1: Added DataSource MF support - v2.2: Added Legend configuration - v2.3: Addded styling of button in infowindow - v3.0: Added Draw and Search capabilities - v3.1: Enabled non-persistent entity support

Documentation

Demo urlhttps://googlemapscustomma.mxapps.io/index.html

15-4-2021: There is a newer version of the widget available, based on the React framework. It is best to use the newer version as this version, based on Dojo, will not be upgraded anymore.

Description

This is an extension to the default Mendix Google Maps widget, based on version 6.0.1 of the AppStore. Extra features are:

  • toggling between drag and drop mode;
  • markerclustering for multiple markers;
  • customizing the infowindow;
  • customizing the marker.
    • Shape (6 options)
    • Size (5 options)
    • Color (entity attribute)
    • Opacity (per widget usage)
  • v1.1: Reverse geocoding after dragging
    • Automatically the formatted address will be deduced via the API based on the latitude and logitude the marker was dragged to.

Typical usage scenario

When wanting to customize the markers, to have drag and drop support for end-users to reposition the marker, to show clusters of markers when too many on screen and to have heaps of styling options for single markers (different shapes, colors, sizes).

Features 

  • toggling between drag and drop mode;
  • markerclustering for multiple markers;
  • customizing the infowindow and marker.
    • Different marker shapes and sizes are supported + the option to use a color attribute to add a specific color to some marker.

Known 'bugs'

  • The Google Map will not zoom well when adding the map to a tab container in a tab pane that is not loaded directly. This is a known issue for the tab container itself. Google it.

Dependencies

  • Mendix v6

Configuration

Next to the default settings available on the Mendix Google Maps widget, settings are added in four tabs:

Datasource:

Color attribute: if wanting to add custom colors to single markers, an attribute of the entity which is used for marker creation can be used. The color string should be a hexadecimal one, starting with #. So, red will be: '#FF0000'.

Appearance:

Border Color: add a hexadecimal string here to change the color of the border of the Google Map.

Marker:

Symbol: choose between one out of siz shapes to show the marker. These shapes are paths rather than images, for optimal performance;

Marker Size: choose between 5 sizes for the marker, XXS to L;

Opacity: manage the opacity of the markers shown on the Google Map. 1.0 is fully opaque, 0.0 is fully transparent

Animation Mode: determine how the objects will be plotted on the map.

Toggle Dragging: decide whether an end-user will be able to toggle between draggable and non-draggable modus;

Enable Clustering: enable or disable marker clustering when zooming out;

Grid Size: determines the maximum size of the grid shown, when clustering is enabled;

Maximum Zoom: determines the maximum zoom level at which clustering is still being done.

Interaction

On Click Microflow: the microflow to trigger when clicking on a marker. 

Disable infowindow on click: when set to true, the on click microflow will directly be triggered when clicking on the marker. If set to false an infowindow will be shown, in which a button is available to trigger the on click microflow;

Name Label: the label of the name popping up in the infowindow.

 

 

 

 

 

Releases

Version: 3.2.1
Framework Version: 8.11.1
Release Notes: Because of deprecation of mx.ui, was giving warnings in logging.
Version: 3.2.0
Framework Version: 7.22.2
Release Notes: * Removed deprecated store.caller parameter on mx.data.action. * Made infowindownamelabel appear without : if left empty in Modeler. * Fixed bug in zooming for single object.
Version: 3.1.0
Framework Version: 7.13.1
Release Notes: Added allowNonPersistableEntities="true" setting in Modeler XML to cater for non-persistent entity support.
Version: 3.0.1
Framework Version: 7.13.1
Release Notes: Fix for marker clustering on phonegap app.
Version: 3.0.0
Framework Version: 7.8.0
Release Notes: Added the 'Enable Draw' and 'Enable Search' options. - Enable Draw: When having a contextobject without coordinates and 'Enable Draw' is set to 'Yes', at first click on the map a marker will be drawn. - Enable Search: when enabling this setting, a Search Box in top of the Google map will appear. Able to adjust the placeholder and width.