Class: FlaMap

FlaMap

new FlaMap(config)

Creates a map object with specified parameters. This method accepts only one parameter. Plain object with config options
Name Type Description
config Object plain object with following optional keys:

{
  mapWidth:       500, // Map width in pixels. If 0 - map width will be 100% (responsive mode)
                       // Also any percent value can be specified. I.e. '50%'
  mapHeight:      350, // Map height. If width = 0 or % - height will be ignored
  borderWidth:    1, // Border width for regions
  borderColor:    "#ffffff",
  borderColorOver:"#ffffff", // Color of the border for active region
  pointBorderWidth:    1, // Border width for point
  pointBorderColor:    "#ffffff", Border color for point
  pointBorderColorOver:"#ffffff", // Color of the border for active point
  nameColor:      "#ffffff", // Name colors (used with short name)
  nameColorOver:  "#ffffff", // Color of the short name for active region
  nameFontFamily: "", // Font-family for short names
  nameFontSize:   "11px", // Short names font size
  nameFontWeight: "bold", // Short name boldness. Can be "normal" or "bold"
  nameStroke:     false, // Whether short names should have stroke or not
  nameStrokeColor: '#ffffff',
  nameStrokeColorOver: false,
  nameStrokeWidth: 2.5,
  nameStrokeOpacity: 0.6, // Short name stroke opacity.
  nameAutoSize:   false, // Try to fit label into a region shape if shape is smaller than a shortname
  pointNameColor:      "#ffffff", // Name colors (used with short name) for points
  pointNameColorOver:  "#ffffff", // Color of the short name for active point
  pointNameFontFamily: "", // Short names font size of the point shortname
  pointNameFontSize:   "11px", // Short names font size of the point shortname
  pointNameFontWeight: "bold", // Short name boldness. Can be "normal" or "bold"
  pointNameStroke:     false, // Whether short names should have stroke or not
  zoomEnable:     true, // Whether zoom capabilities enabled or not
  zoomEnableControls: true, // Whether zoom controls are available or not
  zoomIgnoreMouseScroll: false, // If true - mouse scroll will not zoom in/out.
  zoomMax:        2, // Maximum zoom level
  zoomStep:       0.2, // This setting is used by scroll zooming and zoomIn and zoomOut methods
  overDelay:      100, // animation duration in milliseconds
  pathToJSON: "data/", // path where all map data for sub regions is stored
  mainCfg: "main.cfg.js", // filename with configuration for the top-level region
  mainPoints: null, // filename with points information for the top-level region
  inputName: "", // Name of the input field in which selected states are stored (and can be sent to server)
  inputValue: "", // Default value for input field. Specified states will be selected.
  parseQueryString: true, // If true - query string will be parsed for searching "inputName" and founded values will be default values for "inputValue"
  multiSelect: false, // If false - only one state can be selected at a time
  backButtonTitle: 'back', // Text for back button,
  demoLinkPosition: 'left-bottom', // Position of a demo link (if demo version is used). Can be: left-bottom, left-top, right-bottom, right-top
  allowStateSelection: true, // Whether state can be selected or not. If true the selectability of a state is controlled by state.selectable (default: true)
                            // Otherwise all states are unselectable.
  tooltipOnHighlightIn: false, // Show tooltip when stateHighlightIn is called.
  dblClickToOpen: false, // Whether  to use double-click/double-tap for state opening or not.
  dblClickTimeout: 250 // double click timeout (in ms).
  tooltipOnMobileCentralize: false, // Whether to centralize tooltip on mobile devices or not
  tooltipOnMobileWidth: "80%", // If centralization is on - width of the tooltip in % (related to map width)
  tooltipOnMobileVPosition: "bottom", // If centralization is on - vertical position according to "click" or "tap"
}
Version:
  • 2.6.2
Returns:
FlaMap object
Example
<div id="c"></div>
<link rel="stylesheet" href="map.css">
<script src="lib/raphael.js"></script>
<script src="lib/jquery-1.7.min.js"></script>
<script src="map.js"></script>
<script>
var map = new FlaMap(settings);
map.draw('c');
</script>

Methods

addText(text, x, y, fillColor, fontWeight, fontSize)

Add text to map
Name Type Description
text string text to add
x number x coordinate for text
y number y coordinate for text
fillColor string color of the text ('black' or '#555' for ie)
fontWeight string one of: normal, bold, italic
fontSize number font size. 14 for ie.
Example
map.addText('my map!', 0, 0, 'bold', 'red', 20);

disableState(sid)

Disables any interaction with this state.
Name Type Description
sid string state id name from *cfg.js ie. st1, st2, st10....
Since:
  • 2.3.2
Example
map.disableState('st1');

draw(container, container)

draw the map in specified container
Name Type Description
container string id of html element. Ie: 'map_container' or
container HTMLElement html element to which map will be appended
Example
<div id="map_container"></div>
<script>
var map = new FlaMap(config);
map.draw('map_container');
</script>

drawOnDomReady(container, callback)

delay draw call until document DOM is ready
Name Type Description
container string See @FlaMap.draw
callback function optional Optional callback that will be executed after draw is done. FlaMap object will be passed to callback. (since 2.3.3)
Example
map.drawOnDomReady('container', function(map) {
  alert('Map is drawn!');
});

enableState(sid)

Enables specified state if it was disabled.
Name Type Description
sid string state id name from *cfg.js ie. st1, st2, st10....
Since:
  • 2.3.2
Example
map.enableState('st1');

enableZoom(enable, enableControls)

enable or disable zoom capabilities
Name Type Description
enable bool enable or disable zoom capabilities
enableControls bool show or not built-in zoom controls.
Example
map.enableZoom(true, false);

fetchStateAttr(sid, attr){string}

get attribute from config for specified state. Options from second-level states will be available after that state will be opened first time.
Name Type Description
sid string state id from *cfg.js ie. st1, st2, st10....
attr string valid attributes (name, shortname, url, popup, image, color, color2, ...)
Since:
  • 2.3.2
Returns:
value for selected config parameter.
Example
var name = map.fetchStateAttr('s1', 'name');

getSelectedStates(){Array}

Returns array of ids of selected states.

hideState(sid)

Hide specified state
Name Type Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
Example
map.hideState('s1s1');

isStateEnabled(sid){boolean}

Whether interaction with this state enabled or not
Name Type Description
sid string state id name from *cfg.js ie. st1, st2, st10....
Since:
  • 2.3.2
Example
map.isStateEnabled('st1');

on(event, callback)

Set callback handlers for specified events
Name Type Description
event string on of possible events: click, mousein, mouseout, push, pop, select, unselect
callback function function that that will be called. 3 parameters will be passed to callback: 1) original event (null for push and pop events), 2) sid (state id), 3) map object it self.
Example
map.on('mousein', function(ev, sid, map) { console.log(sid); });

openState(sid){boolean}

Open submap for specified state if available. Specified region must present on opened map and must have submap.
Name Type Description
sid string state id from *cfg.js ie. s1, s2, s10....
Returns:
on success, false otherwise.
Example
<a href="javascript:map.openState('s1')">open region 1</a>

reloadMap()

reload the map
Example
map.reloadMap();

selectAllStates(noEvent)

Highlight all states on current map.
Name Type Default Description
noEvent bool false optional don't fire event (otherwise will be fired for every selected state).
Example
<a href="javascript:map.selectAllStates(false)">Select all regions on current map</a>

selectState(sid, noEvent)

Highlight specified stated. It will be highlighted until unselected.
Name Type Default Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
noEvent bool false optional don't fire event.
Example
<a href="javascript:map.selectState('s1s2')">Select region 1</a>

setStateAttr(sid, attr, value)

This methods allows you to change value of any state specific attribute.
Name Type Description
sid string state id from *cfg.js ie. st1, st2, st10....
attr string | Object can be either a name of a single attribute or an object, containing set of attributes and values Possible attributes: color, color2, color3, colorDisabled, borderColor, borderColorOver, borderColorSelected, borderColorDisabled, popup_type, url, target, name, popup, image, allowOpen.
value string optional new value for the attribute (if single attribute name specified). If value isn't specified for a single attribute, than attribute value will be reset to default.
Since:
  • 2.5.0
Example
map.setStateAttr('s1', 'color', '#fff');
map.setStateAttr('s1', {'name': 'New state name', 'popup': 'new popup value'});
map.setStateAttr('s1', 'color'); // reset state color to a default value

showState(sid)

Show specified state
Name Type Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
Example
map.showState('s1s1');

stateHighlightIn(sid, fillColor, borderColor)

Highlight specified stated. It will be highlighted until stateHighlightOut or any other stateHighlight appear
Name Type Description
sid string state id from *cfg.js ie. st1, st2, st10....
fillColor string fill color for highlighted state. Optional.
borderColor string border color for highlighted state. Optional.
Example
<a href="javascript:void(0)" onmouseover="map.stateHighlightIn('st1','#366CA3','#ffffff')" onmouseout="map.stateHighlightOut('st1')">region 1</a>

stateHighlightOut(sid)

Return the state to normal default color after stateHighlightIn
Name Type Description
sid string state name from *cfg.js ie. st1, st2, st10....
Example
<a href="javascript:void(0)" onmouseover="map.stateHighlightIn('st1','#366CA3','#ffffff')" onmouseout="map.stateHighlightOut('st1')">region 1</a>

stateLabelModifyColor(sid, fillColor, borderColor)

Change label text of the state
Name Type Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
fillColor string color to fill the state label ie. #11AABB
borderColor string color of the border for specified state label ie. #11AABB
Deprecated
Example
map.stateLabelModifyColor('s1s1', 'red', 'black');

stateLabelModifyText(sid, text)

Change label text of the state
Name Type Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
text string text to go as label for that state
Example
map.stateLabelModifyText('s1s1', 'My region!');

stateModify(sid, fillColor, borderColor)

Change color properties of the state
Name Type Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
fillColor string optional color to fill the state ie. #11AABB
borderColor string optional color to fill stroke ie. #000000
Deprecated
Example
map.stateModify('s1s1', '#bbb', 'white');

stateModifyPopup(sid, title, popup, image)

This method allows to setup popup specific parameters.
Name Type Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
title string tooltip title
popup string tooltip content
image string optional tooltip image. default - none
Since:
  • 2.5.0
Deprecated
Example
map.stateModifyPopup('s1', 'New York', 'Manager contacts: ... ', '/manager/photo.jpg');
map.stateModifyPopup('s2', 'Los Angeles', '<b>Currently unavailable</b>');

unselectAllStates(noEvent)

Unselect all states on current map.
Name Type Default Description
noEvent bool false optional don't fire event (otherwise will be fired for every selected state).
Example
<a href="javascript:map.unselectAllStates(false)">Unselect all regions on current map</a>

unselectState(sid, noEvent)

Return the state to normal default color
Name Type Default Description
sid string state id from *cfg.js ie. s1s1, s2s12, s1s10....
noEvent bool false optional don't fire event.
Example
<a href="javascript:map.unselectState('s1s2')">Unselect region 1</a>

updateZoom(zoom)

Set zoom level to specified level. Will be automaticly corrected to min or max value
Name Type Description
zoom number zoom level. Ie: 2.
Example
map.updateZoom(2);

zoomIn()

One step zoom-in
Example
map.zoomIn();

zoomOut()

One step zoom-out
Example
map.zoomOut();