MapSVG-jQuery Documentation
Installation
Just copy mapsvg
folder to the root folder (or any subfolder) on your server.
Then enter http://yoursite.com/path-to/mapsvg/
to get started.
MapSVG can work in 2 modes:
- HTML + JS: in this mode you can't upload files from a browser and you need to edit
/mapsvg/js/settings.js
file if you want to add custom markers. Also you don't have map selection function because plugin can't read contents of /mapsvg/maps folder with javaScript; - PHP + HTML + JS: you can upload files from your browser. Uploads are being handled by a PHP script.
And you have a map quick-search field:
/mapsvg/maps
folder is being scanned on start by PHP script to get full list of all available maps.
/mapsvg/functions.php
file and in
case of success it switches itself to PHP mode.
If you have PHP mode turned ON - you need to change access rules for
.../mapsvg/maps/user-uploads
to 777
.
Creating a new map
If you have PHP mode ON - just start typing the name of map you need in the search box on the start screen of MapSVG builder, or upload a custom SVG file from your browser.
If you have PHP mode OFF - enter URL of a SVG file and click "Go". If you want to upload custom SVG file
- put it into /mapsvg/maps/user-uploads
folder.
Also you're able to edit the map you have previously created in MapSVG and inserted into your website. To do that, just enter URL of that page on the start screen of MapSVG Builder and it will get map settings from that page automatically.
Map modes
There are 3 modes for the map preview:- Preview - everything looks and works in the same way as a final version of your map after you insert it to your wesbite. With only one exception that Responsive mode is always ON in MapSVG Builder (required for proper resizing of a map in the Builder);
- Edit regions - markers are hidden, all custom event handlers are disabled. Zoom & Scroll are turned ON. Region tooltips are changed to show region's ID:title. When you click on a region - Builder switches to "Regions" tab and scrolls to the region to start editing.
- Edit markers - regions are disabled, all custom event handlers are disabled. Zoom & Scroll are turned ON. Marker tooltips are changed to show marker's ID. When you click on a marker - builder switches to "Markers" tab and scrolls to the marker to start editing. If you click on a map - new marker is being added.
Settings
Parameter | Description |
---|---|
Title | Title of a map. |
Width | Width of a map. If Responsive is turned ON then width has effect only on width/height ratio of the map. |
Height | Height of a map. If Responsive is turned ON then height has effect only on width/height ratio of the map. |
Lock aspect ratio | Unlock if you want to change default width/height ratio of the map. |
Start position | Defines initial viewBox for the map. If you want your map
to start with some initial zoom - zoom it in the preview and the click Set .
Position will be remembered and you can continue editing your map.
|
Responsive |
|
Scroll |
on | off - enable or disable map scrolling.
|
Zoom |
on | off - enable or disable map zooming.
|
Zoom buttons |
hide | left | right - position of +/- zoom buttons.
|
Zoom limits | Set min and max levels of zoom,
starting from initial map position defined above.
|
Global popovers |
Popovers are info boxes with close button which are being shown onClick on a Region or Marker. Global popovers are being shown for all active (not disabled) Regions and Markers. Local popovers (defined in Regions / Markers) have priority over globals.
|
Global tooltips |
Tooltips are info boxes with are being shown on hover over a Region or Marker. Global tooltips are being shown for all active (not disabled) Regions and Markers. Local tooltips (defined in Regions / Markers) have priority over globals.
|
Curor | Cursor style which is applied when you hover the mouse over a Region |
Multiselect | on | off - enable / disable an ability to select multiple Regions. |
Gauge |
To get an idea how it works, turn Gauge |
Gauge labels |
low - label for lowest Gauge valueshigh - label for highest Gauge values
|
Menu |
|
Menu contaier |
ID of menu container. You have to add empty |
Menu item template |
JavaScript template function which should return a string. Default template:
|
Preloader text |
Text being shown during map loading process. Default is "Loading map...". |
Colors
Parameter | Description |
---|---|
Background | Color of a background. Applied to MapSVG div container.
Click on a grey button on the left of input field to show Color Picker.
Also you can enter color value manually into the text input field.
Besides color values you can use the word transparent to make
a transparent background. Or you can use image URL in CSS format url(/path/to/image.png) |
Base | Base color for all Regions. Overrides Region colors defined in SVG file. |
Disabled | Color of disabled Regions |
Strokes | Color of strokes (Region borders) |
Hover |
Color for Region hover state. There are 2 modes:color - static color for all Regionsbrightness (default) - change Region brightness relative to it's default color.
This mode is useful when you have regions with different colors.
|
Selected |
Color for Region selected state. Two modes, same as for Hover .
|
Gauge low | Color of Region with lowest gaugeValue |
Gauge high | Color of Region with highest gaugeValue |
Regions
Parameter | Description |
---|---|
Disabled | Disable a Region to make it non-clickable (also hides it from automatically generated menu with list of Regions). |
Color | Color of a Region. Some color settings have more priority than others. This is the color chain affecting final Region color, Gauge color has the biggest priority: Gauge < Region color < Disabled(?) < Base < SVG |
Tooltip |
Tooltip text / HTML. Has priority over Global Tooltips
|
Popover |
Popover text / HTML. Has priority over Global Popovers
|
Link | URL to open on click. |
Data |
Any data object which you can use in custom event handlers or global tooltips/popovers.
Data can be in JSON format or javaScript object format. Example:
And then in onClick event handler:
|
Markers
If a map is geo-calibrated, you will see New Marker input field in Markers tab. Just enter an address and marker will be added to the map.
Also you can add a Marker if you switch the map to Edit Markers mode: click on the map to add a marker.
Click on a Marker in Edit Markers mode to edit it.
Parameter | Description |
---|---|
ID | Unique ID of a Marker. Spaces not allowed here. |
Lat/lon coordinates | Visible only if map is geo-calibrated. Geo coordinates of a Marker. |
Image |
Image for a Marker. You can add your custom Marker images into
.../mapsvg/markers/ folder. Note that markers are being positioned
by a center point at bottom of an image.
|
Link | URL to open on click. |
Data |
Any data object which you can use in custom event handlers or global tooltips/popovers.
Data can be in JSON format or javaScript object format. Example:
And then in onClick event handler:
|
JavaScript
Parameter | Description |
---|---|
onClick | Fires onClick on a Region or Marker. Example:
Parameters:this - MapObject (could be a Region or a Marker )e - event object (same as in jQuery)mapsvg - MapSVG instance
|
mouseOver | Fires on mouseOver on a Region or Marker.
Example:
Parameters:this - MapObject (could be a Region or a Marker )e - event object (same as in jQuery)mapsvg - MapSVG instance
|
mouseOver | Fires on mouseOut on a Region or Marker.
Example:
Parameters:this - MapObject (could be a Region or a Marker )e - event object (same as in jQuery)mapsvg - MapSVG instance
|
beforeLoad | Fires before MapSVG starts rendering SVG file.
Example:
Parameters:this - MapSVG instance
|
afterLoad | Fires after MapSVG finished rendering SVG file.
Example:
Parameters:this - MapSVG instance
|