Settings
This tab contains main options and groups of options that do not have their own screen.
Main settings
| Field | Description |
|---|---|
| File | Name of the SVG file. If you use a custom SVG file and need to upload a new version — go to the MapSVG start screen and click the Upload SVG file button. If you keep the filename the same as before, the existing SVG file is automatically overwritten. Then go to Map editor > Settings > File > click the Reload button to reload the list of Regions. You can also change the file by clicking Change, or remove it by clicking Remove. |
| Title | The title is used only internally in the MapSVG editor. |
| Preloader text | The text that is shown when the map loads. |
Size
| Field | Description |
|---|---|
| Responsive | When the map is responsive, it always takes the full width of the parent container. |
| Width / Height | If Responsive is "Off", changing width/height changes the actual size of the map, but the size doesn't change in the preview — changes are visible only on the front-end. When "Responsive" is "On", the map always takes the full width of the parent container and width/height options change only map proportions (the width/height ratio). |
| Lock aspect ratio | When it's "On", the width/height ratio is preserved while you change width or height. Example: if your map is 640×480, "Lock aspect ratio" is "On", and you change the width to "320", the height is automatically adjusted to "240". |
Position
| Field | Description |
|---|---|
| Start position | This option lets you change the initial zoom and scroll position of the map. If you need to change the initial position: turn on zoom and scroll, zoom in to the desired location, then click Set current position as initial. |
| Fit markers | Choose whether the map should change its position to fit all loaded markers. |
Containers
MapSVG has 4 containers that can be used for showing the Directory, Filters, and Details view. In this settings section you can choose which containers to show and set their size.
Scroll
| Field | Description |
|---|---|
| Scroll | Choose whether to allow scrolling the map with the mouse pointer (or fingers on touch devices). |
| Limit scroll to boundaries | Prevent scrolling past the map boundaries. Works only with SVG maps; does not work with Google Maps. |
Zoom
MapSVG supports zoom by clicking +/- buttons, zoom by mouse wheel, and zoom by pinch on touch devices.
| Field | Description |
|---|---|
| Zoom | Turn zoom on/off |
| Zoom by mousewheel | If your map takes the full width of the screen, you may want to turn this option off — otherwise users may not be able to scroll down past your map: when they reach it, scrolling the mouse wheel will zoom the map, not the page. If you set this option "On", there should be enough space around the map for the mouse pointer to scroll the page. |
| Zoom buttons | Choose zoom buttons location or turn them off. |
| Zoom limits | How many +/- zoom steps to provide, counting from the initial map position. |
Tooltips
Tooltips are shown on mouse hover over a Region or Marker. Tooltips contain HTML content with your custom fields.
| Field | Description |
|---|---|
| Tooltips | Turn tooltips on/off |
| Tooltip position | Choose tooltip position relative to the mouse pointer. |
Popovers
Popovers are scrollable pop-ups shown on click on a Region or Marker. Popovers contain HTML content with your custom fields.
| Field | Description |
|---|---|
| Width | Width of popovers in pixels. |
| Max-Width | Maximum width relative to the map container. |
| Max-height | Maximum height relative to the map container. |
| Center map on popovers | Popovers are always shown over the center of a clicked object. If a popover is shown at the edge of the map, its content may get cut off. To prevent that, turn this option "On". |
| Reset map position on popover close | If "Center map on popovers" is on — choose whether to reset the map position when the popover is closed. |
| Fullscreen on mobile devices | Popovers on mobile devices may be too small for comfortable reading. This option helps solve that issue. |
Choropleth
A Choropleth map shows statistical data on the map with different shades of a color. For example, you want to show the number of votes by each US state. You add a custom field "votes" to your Regions, add numbers to each state, then turn on Choropleth map. States with the highest number of votes are painted red, states with the lowest numbers become black, and all states in between get colors from a gradient between red and black.
Detailed tutorial with screenshots: Choropleth map
Colors for the Choropleth map can be changed in the Menu > Colors tab.
| Field | Description |
|---|---|
| Choropleth | on/off |
| Region field | Choose a custom Region field that contains numbers that should be converted to colors. |
| Gradient labels | Enter labels for "lowest" and "highest" values. |
Pagination
When DB Objects are loaded to the map and Directory, they are split into pages. The default is 30 items per page. You can change this number or turn off pagination entirely.
| Field | Description |
|---|---|
| Pagination | On/Off: Choose whether to split the list of objects in the Directory and on the map into pages (even if you don't use the Directory, markers can be paginated too). |
| Location | Choose the location of pagination buttons: Directory (at the bottom of the list), map container, or both. |
| Items per page | How many items to load for each page. |
| Next page label | When pagination is shown, there are 2 buttons: "Next page" and "Prev. page". You can change these labels (translate to your language). |
| Prev. page label | Same as above |
Labels
You can use these 2 options to add labels above Markers (for example, to show city names) or in the center of Regions (to show country/state names). What is shown in the labels is defined in the following 2 templates: Marker label template and Region label template.
| Field | Description |
|---|---|
| Marker labels | On/Off |
| Regions labels | On/Off |
Buttons
If you use Directory, on mobile devices 2 buttons are shown below the map: Map / Directory. You can change the texts of those buttons.
| Field | Description |
|---|---|
| "Map" button label | Label for the button that shows the map (when the Directory is hidden on mobile). |
| "Directory" button label | Label for the button that shows the Directory list. |
| "Close" button label | This button is shown at the bottom of fullscreen Details view / Popovers / Modal Filters windows. |