Skip to content

Customizing marker's pin image

Ramil Valitov edited this page Sep 9, 2016 · 4 revisions

This section describes how to customize marker's pin image.

Notice for users of Widgetkit 2.7.x

Standard Map Widget since version 2.7.x has "Custom Marker" field near "Location" field, see the screenshot below.

Map Widget 2.7.x custom marker field

This field is intended to add some functionality to customize markers, but still it lacks features that the MapEx originally provides. Because the MapEx is based on Widgetkit, this field also automatically appears in the MapEx widget, too. But MapEx ignores this field. Please, don't use it. This field will be removed in the future versions of the MapEx widget to eliminate possible misunderstanding.

The default image

The widget uses the red pin as the default marker's pin icon:

Default MapEx widget marker pin icon

The pin image

You can use any valid image image supported by web browser as marker's pin icon. I suggest using PNG with transparency or SVG (read more about important recommendations when using SVG). A pin image has an anchor - it's a place where the icon's hotspot is located. For "pin-like" icons the hotspot is set to the end of the pin. You can choose any position for the hotspot as you like to achieve best icon positioning and visual results. The hotspot is defined by 2 parameters in the widget: the X and the Y coordinates. The coordinates are set in pixels and are relative to the the image's dimensions, so that:

  • the bottom left corner of the image is a starting zero-point (0,0);
  • axes have standard orientation: the X to the right; Y to the top.

The above geometry is presented on the following picture (the image's border is marked with purple dashed line):

Google Map Marker's Pin Geometry

If the anchor point is not defined (or is empty) then the bottom center point of the image is used as the anchor.


Custom general marker

You can override and set a custom icon that will be used for all points (markers) on the map. First of all you should select "Custom" option for the "Marker Pin Icon" setting. After that, you will be able to choose the desired image and set the anchor point if necessary:

MapEx widget settings

The resulting rendered map will look as follow: Custom Map widget icon

Custom unique marker

It's possible to set a custom unique icon for every item (marker) of the map. This is achieved using the "Content" interface:

Map content interface screenshot

The options "Custom Pin Image", "Custom Pin Anchor X" and "Custom Pin Anchor Y" define the unique marker's pin icon for selected content item. These settings have a higher priority and override the icon and values that may be defined in the "Settings" interface of the widget (described in the previous section). Inspite of that, you should anyway select "Custom" option for the "Marker Pin Icon" setting in order to activate the "Custom marker pin" feature of the widget.

The resulting rendered map will look as follow:

Custom Map widget unique item icons