Skip to main content

What is Regions in MapSVG

When you create a new map using an SVG file in MapSVG - it parses the file and tries to find SVG shapes that could be made interactive. Those objects get into the Regions list in MapSVG. Then you can add custom fields to your Regions in MapSVG, which will be shown in the next articles.

SVG Objects to Regions​

SVG objects that match ALL of the following rules get into the list of Regions:

  1. Type of the object is: path / rect / polygon / ellipse / circle
  2. Object has an ID. Example, SVG object without ID:
<path d="..." />

SVG object with ID:

<path id="area-51" d="..." />
Adobe Illustrator

If you're creating a custom SVG file in Adobe Illustrator: you can't set IDs for individual SVG objects in it. AI converts layer names to IDs but layer may contain multiple SVG object. ID will be given to a <g id="layer-name">...</g> SVG tag and individual SVG objects inside of it will be left without IDs. So it is recommended to use Inkscape (free SVG editing software) for SVG editing (at least for final SVG editing after AI). How to set an Object ID in Inkscape: open your SVG file, right-click on a vector shape, choose "Object properties", enter ID, click "Set". Also you can set IDs right in MapSVG by clicking on "Edit SVG file" button in the top toolbar.

  1. Object has a color fill. If you create a custom SVG file and you need to have Regions that are transparent, don't use empty or none color fill values, use rgba(0,0,0,0) as a trasparent color.
  2. If Region ID prefix is provided in MapSVG settings, SVG Object ID must start with the prefix. In more detail: when you use a custom SVG file, sometimes there are too many small graphical details that already have IDs and you don't want all of them to get into the list of Regions. In that case you can add a prefix to IDs of SVG object that you want to become Regions in MapSVG. Example. In MapSVG, Region ID prefix = "lot*". The following objects will get into the list of _Regions*:
<path id="lot_number_12" d="..." /> <rect id="lot_number_3" x="..." y="..." />

These objects will be skipped:

<path id="path_231" d="..." /> <circle id="circle_89" x="..." y="..." />

Default fields​

Regions have 2 default fields, that are taken from SVG object attributes:

  • id: short text without spaces
  • title: longer text, can contain spaces

Example: USA in the world.svg file has ID "US" and the title "United States".

All geo-calibraed maps included in MapSVG have both "id" and "title" attributes. Older uncalibrated maps have only "id". You can add titles in SVG file by using Inkscape editor or in MapSVG, by clicking on "Edit SVG file" button.

Custom fields​

Regions can have the following custom fields:

  • Text: short text, 255 characters max.
  • Textarea: long text, with optional HTML support
  • Status: custom statuses. Example: "Available / Sold". Each status has a user-defined color and enabled/disabled option, which control if Region must be disabled.
  • Select / Multiselect: drop-down list of values
  • Checkbox: any value that can be on/off
  • Radio: list of values
  • Images: set of images. Each image comes in 3 different sizes: thumbnail, medium, full
  • WP Post: WordPress post
  • Date: datepicker field, supports many international formats