Marker Icons

A key feature of this add-on is that custom marker icons can be created via the dashboard and assigned globally, per map block and against individual locations.

There are two types of marker icon that can be created:

  • Image based icons
  • 'Custom Path' based icons

Image based icons

Image based icons require the upload of a marker icon image. Use a png file with transparency.

Selecting an image will automatically assign calculate Anchor and Scaled Size values. 

However, if the anchor of the marker is not correct, these values can be manually adjusted. Simply drag the marker on the preview map to see anchor point - a small X will appear.

You can either create your own marker graphics, or you may find freely available ones on the web.

A site with many suitable icons is https://mapicons.mapsmarker.com

Tip: For 'retina' icons, select your marker image and then half the values in the Anchor and Scaled Size fields.

Custom Path based icons

Custom Path based icons are based on an SVG path. This is a series of text that defines a shape in SVG.

A series of common presets have been included - clicking a preset will fill the SVG Path with that shape's path data.

You can then adjust the anchor points, scale, fill colour, stroke colour and weight to your liking - changing these values will adjust the preview automatically.

If you wish to use your own SVG shape, you will need to find the path data in your SVG file.

Open your SVG file in a text editor and look for a <path> element. Within this path element will be a d="" attribute.

Copy the text within this attribute into the SVG Path field.

Tip: The preset file shapes can be found within the svgs folder of the package. You can use any one of the files as a guide as to a suitable sized SVG file when you are creating your own.