Map Marker Icons

How to set the map marker icons for the map pins, individual results and categories

Michael Fatica avatar
Written by Michael Fatica
Updated over a week ago

There are several ways to control how the map marker icon appears on your Interface.  This article includes links to details regarding each of the methods.

  1. Default Map Marker Icon - You can set a default icon for use on your interface by specifying the Default Map Marker Icon as found under Map settings.

  2. Category Icons - You can control the map marker icon based on the category assigned to the record.  The marker is assigned to the category, and is then used for all records that are in that category.

  3. Location-specific Marker Icon - You can even specify a custom icon for a specific record.  Edit the record and find the "Custom Marker URL" field, which is found on the Basic Information tab.

Default Map Marker Icon

Map Marker icons in MetaLocator come in two formats, a CSS font icon and an image. By default, we use FontAwesome CSS font icons because they're easy to colorize, look great on all devices and are fast loading.

To control the default CSS font icon, choose Map Settings, then Marker Icon.

The "fa fa-map-marker fa-fw" is the FontAwesome class of this map marker:

Click the folder icon next to the Marker Icon setting to browse for other map marker icons.

Custom Map Marker Images

You can also provide a custom map marker as an image file. This is good to do when you want to use your company logo, or have a similar branding objective. For example, a franchise of trampoline parks could use an image of a trampoline as the map marker.

Map marker icon images be 50 pixels wide and provided as a transparent PNG. The image should indicate some sort or pointer at the bottom center. A good map marker has an arrow or point at the bottom center that helps the user understand where it is pointing. Logos don't always make the best map marker. A good example is shown below:

To upload a custom logo image, click Upload on this setting found under Map Settings > More Map Features.

Important: You have to remove the "fa fa-map-mark..." value under the Marker Icon Setting described above, so that it does not override this setting.

Category Icons

Map markers can also be used to indicate different location types. For example, if you have a locator with retailers and distributors, representing each with a different icon is helpful to the user to distinguish the location types on the map. With category-level icons, the icon is specified at the Category, under Data > Categories

Click the category name to edit the category settings.

Since locations can be in multiple categories, the icon is chosen from the Category with the highest ordering value. In the example show above, if a location was in both the ATM and Vendor categories, the system would choose the icon from the Vendor category. To easily re-order categories, click the Order column heading, and then drag-and-drop for the desired ordering. The lowers ordering will be at the top and the highest ordering value will be at the bottom of the list.

If you are using a CSS Font Icon as described above, you can simply choose a color class as primary, secondary and so forth. The actual colors for those are defined under the Interface Settings > Style & Color Settings.

To have a separate Font Icon for a category, choose the icon class by clicking the folder icon as shown:

Category icons can also be provided as custom images. To use an image for the category icon, upload the icon under the Category Options tab, and scroll down to the Marker URL setting.

Location-specific Icons

For organizations with a special location, like a headquarters or any other application where the map marker icon must be location-specific, a custom marker URL can be specified for that location. Under Data > All Records, edit the location by clicking the name and then upload the icon under Custom Marker URL as shown below:

Map Legends

With multiple icons, you might also consider showing a map legend. Legends help the user understand what each icon means. Enable the legend as shown below with the Show Icon Marker Legend.

Search Center Marker

By default, the Show search center marker setting is set to Yes and a green arrow on the map indicates the center of your search. When no Search center marker URL is present, a FontAwesome icon is used.

User Marker

Setting the Show User Marker Icon to Yes will indicate where the user is located and is represented by a location arrow with a pulsating ring.

Marker Language Constants

MetaLocator allows for users to display their interface in any language. The default language constants affecting markers are LOCATOR_SEARCH_CENTER_IWCONTENT and LOCATOR_MAP_USER_LOCATION_TITLE. To manage language and translations, see this article.

Did this answer your question?